/*
 * The request list (/cart/) and the submit form (/checkout/) from the designer's frames (file vHWADW7DYoP0PRSbFuYlyl):
 *   - «Checkout / State 1» 354:9752 (issue #76): the page title 359:11998, the outer card 354:9989, the list card
 *     359:11822 with its rows of Product Cards (367:14406, hover variant 359:12108) and the «تایید» row 367:13455;
 *   - «Checkout / State 2» 367:13097 (issue #77): the page title 367:13103, the outer card 367:13104, the form column
 *     367:13105 (fields from the «Verify Mobile Number» text field 310:3954 / 359:10698) and the summary card 367:13132
 *     with its Product Cards (367:13143, hover variant 367:12738).
 * Every number traces to one of those nodes (figma-to-css.md); the node is in the comment. Loaded by src/Checkout.php on
 * the two pages (and on the order-received page, which shares the title card). The markup is WooCommerce's and
 * WoodMart's; this file only dresses it. No phone frame exists: the widths below 1025 px are the desktop rules stacked.
 */

/* ---------------------------------------------------------------- the content column: 1280 wide like the header and the archive */
@media (min-width: 1025px) {
	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) main.wd-content-layout.container {
		max-width: 1312px;
		padding: 16px 16px 64px !important; /* 354:9987: 16 under the title card, 64 above the footer */
	}

	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title .container {
		max-width: 1312px;
		padding: 0 16px;
	}
}

/* INTERIM (no tablet or phone frame): the column keeps 16 px gutters */
@media (max-width: 1024px) {
	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) main.wd-content-layout.container {
		padding: 16px 16px 40px !important;
	}

	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title .container {
		padding: 0 16px;
	}
}

/* ---------------------------------------------------------------- page title (359:11998 / 367:13103): the theme's checkout steps as the frame's card */
/* the theme's coloured title band: the frame has only the card, 24 px under the header (354:9987 y = 24) */
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title {
	min-height: 0;
	margin: 0;
	padding: 24px 0 0;
	background: none !important;
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title .wd-page-title-bg {
	display: none;
}

/* 359:11998: the lavender card, 1 px #b5a3ff inside the box, radius 16, padding 20 16 16; 359:11202: the steps 16 apart,
   bottom-aligned, centred. The arrows (24 px) sit between the steps with 16 px on each side: 56 px between two steps. */
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) ul.wd-checkout-steps {
	display: flex;
	flex-wrap: nowrap; /* the theme wraps its steps */
	align-items: flex-end;
	justify-content: center;
	gap: 56px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 20px 16px 16px;
	list-style: none;
	border: 0;
	border-radius: 16px;
	background: #edebff;
	box-shadow: inset 0 0 0 1px #b5a3ff;
	font-family: var(--ah-font);
}

/* 367:15182 / 367:15005 / 367:15062 «Checkout States»: the chip above the label, 4 px apart */
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	font-size: 0;
}

/* 367:14941: the chip, a 24 px icon on 8 px of padding, radius 24, #b5a3ff; the current step's (367:14945) is #5b4ecd */
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li::before {
	content: "";
	display: block;
	box-sizing: content-box;
	width: 24px;
	height: 24px;
	padding: 8px;
	border-radius: 24px;
	background: #b5a3ff center / 24px no-repeat;
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li.step-cart::before {
	background-image: url("../icons/checkout/step-store.svg"); /* 367:14946 Store */
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li.step-checkout::before {
	background-image: url("../icons/checkout/step-clipboard.svg"); /* 367:14942 Task Clipboard */
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li.step-complete::before {
	background-image: url("../icons/checkout/step-done-icon.svg"); /* 367:14942 Start Check Accept OutlineChecked */
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li.step-active::before {
	background-color: #5b4ecd;
}

/* 367:14943: the label, 20 px on a 32 px line, #b5a3ff; the current step's (367:14947) bold #5b4ecd */
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li > a,
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li > span {
	position: static;
	display: block;
	margin: 0;
	padding: 0;
	font: 400 20px/32px var(--ah-font);
	color: #b5a3ff;
	white-space: nowrap;
	text-decoration: none;
	opacity: 1; /* the theme fades its inactive steps to 70 %; the frame's colour is the whole of it */
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li > a:hover {
	color: #b5a3ff; /* the frame draws no hover */
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li.step-active > a,
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li.step-active > a:hover,
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li.step-active > span {
	font-weight: 700;
	color: #5b4ecd;
}

/* 359:11232 / 359:11237: the arrow between two steps, 24 px, on the row's bottom line, at the end side of the step (the
   theme's own separator is replaced) */
body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li::after {
	content: none;
}

body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-end: -40px;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 0;
	background: url("../icons/checkout/step-arrow.svg") center / 24px no-repeat;
}

/* 367:15156 (the title of State 2): a step already done carries the green check, 24 x 16, over the chip's top-left. The
   theme marks only the current step, so "done" is read from the page: on the submit form the list step is done, on the
   order-received page both earlier steps are. */
body.araz-home-skin.woocommerce-checkout .wd-checkout-steps li.step-cart > :first-child::before,
body.araz-home-skin.woocommerce-order-received .wd-checkout-steps li.step-checkout > :first-child::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 16.5px);
	width: 24px;
	height: 16px;
	transform: translateX(-50%);
	background: url("../icons/checkout/step-check.svg") center / contain no-repeat;
}

/* INTERIM (no tablet or phone frame): between the design's width and a phone the three steps keep their row and get smaller (the account stepper's rule) */
@media (max-width: 1024px) {
	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) ul.wd-checkout-steps {
		gap: 40px;
		padding: 16px 12px 12px;
	}

	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li::before {
		padding: 6px;
	}

	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li > a,
	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li > span {
		font-size: 14px;
		line-height: 24px;
	}

	body.araz-home-skin:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps li:not(:last-child)::after {
		inset-inline-end: -32px;
	}
}

/* ================================================================ the request list, /cart/ (issue #76) */

/* 354:9989: the outer card, white, 1 px #e0e0e0 inside, radius 16, padding 24 */
body.araz-home-skin.woocommerce-cart .entry-content > .woocommerce {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	box-sizing: border-box;
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0e0;
	font-family: var(--ah-font);
}

/* 359:11822: the list card, white, 1 px #e0e0e0 inside, radius 16, padding 16, its rows 16 apart */
body.araz-home-skin.woocommerce-cart .cart-content-wrapper {
	flex: 1 0 0;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
	margin: 0;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0e0;
	overflow: clip;
}

body.araz-home-skin.woocommerce-cart .cart-content-wrapper > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* 367:13096: the rows of cards, 8 apart; the total (allowed viewers only) is one more row */
body.araz-home-skin.woocommerce-cart form.woocommerce-cart-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	margin: 0;
}

body.araz-home-skin.woocommerce-cart table.woocommerce-cart-form__contents {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

body.araz-home-skin.woocommerce-cart table.woocommerce-cart-form__contents thead {
	display: none; /* the frame has no column names */
}

/* 359:12044 / 359:12045: three cards of equal width a row, 8 px apart; fewer on a narrower screen */
body.araz-home-skin.woocommerce-cart table.woocommerce-cart-form__contents tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
	gap: 8px;
}

/* :where() keeps this reset at (0,3,2), the weight of the cell rules below (td.product-thumbnail, td.product-name,
   td.product-quantity), so their frame paddings (I367:14406;359:12083 / I367:14406;359:12069) come after it and win;
   with :is() it was (0,3,3) and set them all to 0 */
body.araz-home-skin.woocommerce-cart table.woocommerce-cart-form__contents :where(td, th) {
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
	vertical-align: middle;
}

/* WooCommerce's responsive table writes the column name before each cell on a phone */
body.araz-home-skin.woocommerce-cart table.woocommerce-cart-form__contents td::before {
	content: none !important;
	display: none !important;
}

/* 367:14406 «Product Card»: 128 high, white, 1 px #e0e0e0 inside, radius 8; the picture slot (108) at the start, the
   text column beside it with its three lines (title, quantity, amount) 4 px apart and centred in the height */
body.araz-home-skin.woocommerce-cart tr.woocommerce-cart-form__cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	/* 367:14406: the text column (I367:14406;359:12069) is centred in the 128 px card by two equal 1fr rows around its
	   three lines; the 112 px picture slot spans all five rows, so it no longer stretches the lines' rows (with
	   auto rows its height was spread over them: name cell 27 high, lines at 20 / 52.25 / 82.75 instead of 24 / 52 / 80) */
	grid-template-rows: 1fr auto auto auto 1fr;
	row-gap: 4px;
	column-gap: 0;
	box-sizing: border-box;
	height: 128px;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0e0;
	overflow: clip;
}

/* 359:12108, the hovered card: lavender, no line; its picture, quantity box and icons turn lavender / purple */
body.araz-home-skin.woocommerce-cart tr.woocommerce-cart-form__cart-item:hover {
	background: #edebff;
	box-shadow: none;
}

/* I367:14406;359:12083 «Slot»: 108 wide, padding 12 with 8 on the text side; the picture 88 x 88, 1 px #e0e0e0 inside,
   radius 8 (I367:14406;359:12083;367:14405) */
body.araz-home-skin.woocommerce-cart td.product-thumbnail {
	grid-column: 1;
	grid-row: 1 / -1; /* I367:14406;359:12083 */
	position: static; /* the theme's phone table pins the picture cell absolutely at the top */
	display: flex;
	align-items: center;
	align-self: center;
	box-sizing: border-box;
	width: 108px;
	padding: 12px;
	padding-inline-end: 8px;
}

body.araz-home-skin.woocommerce-cart td.product-thumbnail a {
	position: relative;
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 8px;
	overflow: hidden;
}

body.araz-home-skin.woocommerce-cart td.product-thumbnail a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px #e0e0e0;
	pointer-events: none;
}

body.araz-home-skin.woocommerce-cart tr.woocommerce-cart-form__cart-item:hover td.product-thumbnail a::after {
	box-shadow: inset 0 0 0 1px #b5a3ff; /* 359:12067 */
}

body.araz-home-skin.woocommerce-cart td.product-thumbnail img {
	display: block;
	width: 88px;
	height: 88px;
	max-width: none;
	object-fit: cover;
	border-radius: 8px;
}

/* I367:14406;359:12071 / 359:12072: the name, bold 14 on a 24 px line, two lines at most, with 32 px kept free at the
   end for the trash; the column's own padding is 12 (I367:14406;359:12069) */
body.araz-home-skin.woocommerce-cart td.product-name {
	grid-column: 2;
	grid-row: 2; /* I367:14406;359:12071 */
	box-sizing: border-box;
	max-height: 48px;
	padding-inline: 12px 44px;
	overflow: hidden;
	font: 700 14px/24px var(--ah-font);
	color: var(--ah-text);
}

body.araz-home-skin.woocommerce-cart td.product-name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: inherit;
	color: var(--ah-text);
	text-decoration: none;
	word-break: break-word;
}

/* I367:14406;359:12074 «Delete Small»: 24 px at the end of the name line, 0.5 px down; #ff9897, lavender on the hovered card */
body.araz-home-skin.woocommerce-cart td.product-remove {
	grid-column: 2;
	grid-row: 2; /* I367:14406;359:12074 */
	justify-self: end;
	align-self: start;
	position: relative; /* the theme's phone table pins it absolutely; its offsets are cleared */
	inset: auto;
	top: 0.5px; /* I367:14406;359:12074: 0.5 px down, drawn as an offset so the name row stays 24 high (a margin made it 24.5) */
	width: 24px;
	height: 24px;
	margin-inline-end: 12px;
}

body.araz-home-skin.woocommerce-cart td.product-remove a.remove {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("../icons/checkout/delete.svg") center / 24px no-repeat;
	font-size: 0;
	line-height: 0;
	color: transparent;
	box-shadow: none;
}

body.araz-home-skin.woocommerce-cart td.product-remove a.remove::before,
body.araz-home-skin.woocommerce-cart td.product-remove a.remove::after {
	content: none; /* the theme's own cross glyph and hover disc */
}

body.araz-home-skin.woocommerce-cart td.product-remove a.remove:hover {
	background-color: transparent;
	box-shadow: none;
}

body.araz-home-skin.woocommerce-cart tr.woocommerce-cart-form__cart-item:hover td.product-remove a.remove {
	background-image: url("../icons/checkout/delete-hover.svg"); /* 359:12057 */
}

/* I367:14406;359:12078 «صفحه بندی»: plus, the box, minus, 4 px apart, at the start of the line */
body.araz-home-skin.woocommerce-cart td.product-quantity {
	grid-column: 2;
	grid-row: 3; /* I367:14406;359:12078 */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-inline: 12px;
}

body.araz-home-skin.woocommerce-cart td.product-quantity .quantity {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* I367:14406;359:12079 / 359:12082: the 24 px icons (black at 57 %); purple on the hovered card (359:12062 / 359:12065) */
body.araz-home-skin.woocommerce-cart td.product-quantity .quantity .btn {
	flex: 0 0 24px;
	width: 24px;
	min-width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: center / 24px no-repeat;
	font-size: 0;
	line-height: 0;
	color: transparent;
	box-shadow: none;
	cursor: pointer;
}

body.araz-home-skin.woocommerce-cart td.product-quantity .quantity .btn::before,
body.araz-home-skin.woocommerce-cart td.product-quantity .quantity .btn::after {
	content: none;
}

body.araz-home-skin.woocommerce-cart td.product-quantity .quantity .btn.minus {
	background-image: url("../icons/checkout/minus.svg");
}

body.araz-home-skin.woocommerce-cart td.product-quantity .quantity .btn.plus {
	background-image: url("../icons/checkout/plus.svg");
}

body.araz-home-skin.woocommerce-cart tr.woocommerce-cart-form__cart-item:hover td.product-quantity .quantity .btn.minus {
	background-image: url("../icons/checkout/minus-hover.svg");
}

body.araz-home-skin.woocommerce-cart tr.woocommerce-cart-form__cart-item:hover td.product-quantity .quantity .btn.plus {
	background-image: url("../icons/checkout/plus-hover.svg");
}

/* I367:14406;359:12080 / 359:12081: the box, white, 1 px #9e9e9e, radius 8, at least 24 wide, 12 px beside the number,
   14 px on a 20 px line, Farsi digits; its line is #b5a3ff on the hovered card (359:12063) */
body.araz-home-skin.woocommerce-cart td.product-quantity .quantity input.qty {
	box-sizing: border-box;
	width: 48px;
	min-width: 24px;
	height: 20px; /* I367:14406;359:12080 is 35 x 20 (get_metadata): the stroke is inside the box */
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	font: 400 14px/20px var(--ah-font-num);
	color: var(--ah-text);
	text-align: center;
	box-shadow: inset 0 0 0 1px #9e9e9e;
	-moz-appearance: textfield;
	appearance: textfield;
}

@supports (field-sizing: content) {
	body.araz-home-skin.woocommerce-cart td.product-quantity .quantity input.qty {
		width: auto;
		field-sizing: content;
	}
}

body.araz-home-skin.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
body.araz-home-skin.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.araz-home-skin.woocommerce-cart tr.woocommerce-cart-form__cart-item:hover td.product-quantity .quantity input.qty {
	box-shadow: inset 0 0 0 1px #b5a3ff;
}

/* the frame shows one amount a card, quantity x price (I367:14406;393:13080): the unit price cell is not drawn */
body.araz-home-skin.woocommerce-cart td.product-price {
	display: none;
}

/* I367:14406;393:13080 / 393:13082: the amount, bold 20 on a 24 px line, at the start of the line; «تومان» is its own
   element (PriceMarkup, issue #169), 12 px (I359:12167;393:13081) */
body.araz-home-skin.woocommerce-cart td.product-subtotal {
	grid-column: 2;
	grid-row: 4; /* I367:14406;393:13080 */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	padding-inline: 12px;
	font: 700 20px/24px var(--ah-font-num);
	color: var(--ah-text);
	white-space: nowrap;
}

body.araz-home-skin.woocommerce-cart td.product-subtotal .araz-price__amount {
	font-size: 20px;
	line-height: 24px;
}

body.araz-home-skin.woocommerce-cart td.product-subtotal .araz-price__unit {
	font-size: 12px; /* I359:12167;393:13081 */
}

/* the theme's update-list row: a full-width row only while the theme shows its button (it updates the list itself, so
   the button stays hidden); otherwise the row leaves the grid, so it adds no 8 px track */
body.araz-home-skin.woocommerce-cart tr.wd-cart-action-row {
	display: contents;
}

body.araz-home-skin.woocommerce-cart tr.wd-cart-action-row td.actions {
	grid-column: 1 / -1;
	display: block;
	padding: 0;
}

body.araz-home-skin.woocommerce-cart tr.wd-cart-action-row:has(.cart-actions > .wd-hide) {
	display: none;
}

/* the total, allowed viewers only: the summary card's line of the next step (393:13810 / 393:13812), purple, the
   amount bold 20, its label 12 (no «به‌روز …» tag: #177, #183) */
body.araz-home-skin.woocommerce-cart .araz-cart-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 4px;
	margin: 0;
	font: 700 12px/24px var(--ah-font);
	color: var(--ah-purple);
}

body.araz-home-skin.woocommerce-cart .araz-cart-total .araz-price {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

body.araz-home-skin.woocommerce-cart .araz-cart-total .araz-price__amount {
	font: 700 20px/24px var(--ah-font-num);
	color: var(--ah-purple);
}

body.araz-home-skin.woocommerce-cart .araz-cart-total .araz-price__unit {
	font-size: 12px; /* 393:13811 */
}

/* 367:13455: the button row, at the start of the card */
body.araz-home-skin.woocommerce-cart .araz-cart-actions.wc-proceed-to-checkout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* 367:13456 / 367:13457 / 367:13458: purple, radius 12, padding 8 with 12 before the check and 16 after the words,
   the words 12 px Medium, the 24 px check first */
body.araz-home-skin.woocommerce-cart .araz-cart-actions a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 8px;
	padding-inline: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: #5b4ecd;
	color: #fff;
	font: 500 12px/normal var(--ah-font);
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
}

body.araz-home-skin.woocommerce-cart .araz-cart-actions a.checkout-button::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("../icons/checkout/check-accept.svg") center / 24px no-repeat;
}

body.araz-home-skin.woocommerce-cart .araz-cart-actions a.checkout-button:hover,
body.araz-home-skin.woocommerce-cart .araz-cart-actions a.checkout-button:focus {
	background: #5b4ecd; /* the frame draws no hover */
	color: #fff;
}

/* the shop's sentence under the button (not in the frame): the muted 12 px line */
body.araz-home-skin.woocommerce-cart .araz-cart-actions > p {
	flex: 0 0 100%;
	margin: 0 !important;
	font: 400 12px/20px var(--ah-font) !important;
	color: var(--ah-muted) !important;
	text-align: start !important;
}

/* INTERIM (no phone frame): the outer and the list card paddings shrink to 12 */
@media (max-width: 767px) {
	body.araz-home-skin.woocommerce-cart .entry-content > .woocommerce {
		padding: 12px;
	}

	body.araz-home-skin.woocommerce-cart .cart-content-wrapper {
		padding: 12px;
	}
}

/* ================================================================ the submit form, /checkout/ (issue #77) */

/* 367:13104: the outer card, white, 1 px #e0e0e0 inside, radius 16, padding 24, the two columns 24 apart: the summary
   card (620) at the start, the form column (588) at the end. The theme's wrappers around the review table are flattened
   so the submit row can sit under the form while the table stays in the summary card. */
@media (min-width: 1025px) {
	body.araz-home-skin.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 620fr) minmax(0, 588fr);
		grid-template-rows: 48px auto auto auto;
		column-gap: 24px;
		row-gap: 0;
		align-items: start;
		box-sizing: border-box;
		padding: 24px;
		border-radius: 16px;
		background: #fff;
		box-shadow: inset 0 0 0 1px #e0e0e0;
		font-family: var(--ah-font);
	}

	/* 367:13132 «Account Sidebar»: white, 1 px #b5a3ff inside, radius 16, shadow 0 2 5 rgba(91,78,205,.2); drawn as one
	   box behind the header and the table */
	body.araz-home-skin.woocommerce-checkout form.checkout.woocommerce-checkout::before {
		content: "";
		grid-column: 1;
		grid-row: 1 / 5;
		align-self: stretch;
		border-radius: 16px;
		background: #fff;
		box-shadow: inset 0 0 0 1px #b5a3ff, 0 2px 5px rgba(91, 78, 205, .2);
	}

	body.araz-home-skin.woocommerce-checkout .checkout-order-review,
	body.araz-home-skin.woocommerce-checkout #order_review {
		display: contents;
	}

	/* the card's padding is 16 (367:13132); the header is 32 high on the first row, the table 16 under it */
	body.araz-home-skin.woocommerce-checkout .ah-co-head {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		margin: 16px 16px 0;
	}

	body.araz-home-skin.woocommerce-checkout #order_review > .wd-table-wrapper {
		grid-column: 1;
		grid-row: 2 / 5;
		align-self: start;
		margin: 16px;
	}

	/* 367:13105: the form column; its title starts 58 px under the card's top (367:13105 y = 82, the card's padding 24) */
	body.araz-home-skin.woocommerce-checkout #customer_details {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: start;
		padding-top: 58px;
	}

	/* 367:13126: the submit row, 36 under the form (367:13105 gap) */
	body.araz-home-skin.woocommerce-checkout #payment.woocommerce-checkout-payment {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		margin-top: 36px;
	}

	body.araz-home-skin.woocommerce-checkout .ah-co-head,
	body.araz-home-skin.woocommerce-checkout #order_review > .wd-table-wrapper,
	body.araz-home-skin.woocommerce-checkout #customer_details,
	body.araz-home-skin.woocommerce-checkout #payment.woocommerce-checkout-payment {
		position: relative;
		z-index: 1;
	}
}

/* INTERIM (no tablet or phone frame): the summary card and the form stack */
@media (max-width: 1024px) {
	body.araz-home-skin.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: flex;
		flex-direction: column;
		gap: 24px;
		box-sizing: border-box;
		padding: 16px;
		border-radius: 16px;
		background: #fff;
		box-shadow: inset 0 0 0 1px #e0e0e0;
		font-family: var(--ah-font);
	}

	body.araz-home-skin.woocommerce-checkout .checkout-order-review {
		display: block;
		box-sizing: border-box;
		padding: 16px;
		border-radius: 16px;
		background: #fff;
		box-shadow: inset 0 0 0 1px #b5a3ff, 0 2px 5px rgba(91, 78, 205, .2);
	}

	body.araz-home-skin.woocommerce-checkout .ah-co-head {
		margin: 0 0 16px;
	}

	body.araz-home-skin.woocommerce-checkout #order_review > .wd-table-wrapper {
		margin: 0;
	}

	body.araz-home-skin.woocommerce-checkout #payment.woocommerce-checkout-payment {
		margin-top: 16px;
	}
}

/* the theme's own heading above the table: the card's header below carries the title */
body.araz-home-skin.woocommerce-checkout #order_review_heading {
	display: none;
}

/* 367:13133 / 367:13134: the header line, 32 high: the title (flex 1) at the start, the bag pill at the end, 12 apart */
body.araz-home-skin.woocommerce-checkout .ah-co-head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	height: 32px;
	font-family: var(--ah-font);
}

/* 367:13140: «سبد درخواست», bold 20 on a 32 px line, purple */
body.araz-home-skin.woocommerce-checkout .ah-co-head__title {
	flex: 1 0 0;
	min-width: 1px;
	overflow: hidden;
	font: 700 20px/32px var(--ah-font);
	color: #5b4ecd;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 367:13135: the purple pill, padding 4 8, radius 12, the bag and the count 4 apart (the count at the start side) */
body.araz-home-skin.woocommerce-checkout .ah-co-badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 12px;
	background: #5b4ecd;
}

/* 367:13136: the bag, 24 px, white */
body.araz-home-skin.woocommerce-checkout .ah-co-badge::after {
	content: "";
	width: 24px;
	height: 24px;
	background: url("../icons/checkout/shopping-bag.svg") center / 24px no-repeat;
}

/* 367:13138 / 367:13139: the count on teal, at least 20 wide, padding 0 4, radius 8, bold 12 on a 20 px line */
body.araz-home-skin.woocommerce-checkout .ah-co-badge__count {
	box-sizing: border-box;
	min-width: 20px;
	padding: 0 4px;
	border-radius: 8px;
	background: #5cc6d0;
	color: rgba(0, 0, 0, .87);
	font: 700 12px/20px var(--ah-font);
	font-feature-settings: "ss01"; /* Persian digits from the Latin count, as the header counters */
	text-align: center;
	overflow: clip;
}

body.araz-home-skin.woocommerce-checkout .ah-co-badge.araz-zero .ah-co-badge__count {
	display: none;
}

/* 367:13141: the rows of cards, 8 apart, two a row (367:13142); the theme's wrapper padding (5 25) would leave one a row */
body.araz-home-skin.woocommerce-checkout #order_review > .wd-table-wrapper {
	padding: 0;
	overflow: visible;
}

body.araz-home-skin.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

body.araz-home-skin.woocommerce-checkout table.woocommerce-checkout-review-order-table :is(thead, tfoot) {
	display: none;
}

body.araz-home-skin.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 8px;
}

body.araz-home-skin.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item {
	display: block;
	margin: 0;
	padding: 0;
}

/* 367:13143 «Product Card»: 128 high, white, 1 px #e0e0e0 inside, radius 8; the picture slot first, the text column beside it */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 128px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0e0;
	overflow: clip;
	font-family: var(--ah-font);
}

/* 367:12738, the hovered card: lavender, no line */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod:hover {
	background: #edebff;
	box-shadow: none;
}

/* the frame's step-2 cards have no delete; the list is edited in step 1 */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-remove-btn-wrapp {
	display: none;
}

/* I367:13143;367:12769 «Slot»: 108 wide, padding 12 with 8 on the text side; the picture 88 x 88, 1 px #e0e0e0 inside, radius 8 */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-img {
	position: relative;
	flex: 0 0 108px;
	box-sizing: border-box;
	width: 108px;
	margin: 0;
	padding: 12px;
	padding-inline-end: 8px;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-img::after {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	inset-inline: 12px 8px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px #e0e0e0;
	pointer-events: none;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod:hover .wd-checkout-prod-img::after {
	box-shadow: inset 0 0 0 1px #b5a3ff; /* 367:12753 */
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-img img {
	display: block;
	width: 88px;
	height: 88px;
	max-width: none;
	object-fit: cover;
	border-radius: 8px;
}

/* I367:13143;367:12755 / 367:12756: the text column, padding 12, its three lines 4 apart, centred in the height, at the start */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-cont {
	flex: 1 0 0;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 12px;
	overflow: clip;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-title {
	display: contents;
}

/* I367:13143;367:12758: the name, bold 14 on a 24 px line, two lines at most */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .cart-product-label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 100%;
	max-height: 48px;
	margin: 0;
	overflow: hidden;
	font: 700 14px/24px var(--ah-font);
	color: var(--ah-text);
	text-align: start;
	word-break: break-word;
}

/* I367:13143;367:12764 / 367:12766 / 367:12767: the quantity on a #eee tag, at least 24 wide, padding 0 12, radius 8, 14 on a
   20 px line, Farsi digits; rgba(0,0,0,.12) on the hovered card (367:12749). The theme's +/- of this step are not in the frame. */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .quantity {
	order: 0; /* the theme's `order: 1` put the tag under the amount; the frame has name, tag, amount (367:12756) */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .quantity .btn {
	display: none;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .quantity input.qty {
	box-sizing: border-box;
	width: 48px;
	min-width: 24px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: #eee;
	font: 400 14px/20px var(--ah-font-num);
	color: var(--ah-text);
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

@supports (field-sizing: content) {
	body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .quantity input.qty {
		width: auto;
		field-sizing: content;
	}
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .quantity input.qty::-webkit-outer-spin-button,
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod:hover .quantity input.qty {
	background: rgba(0, 0, 0, .12);
}

/* I367:13143;393:13048 / 393:13050: the amount (allowed viewers only), bold 20 on a 24 px line, at the start */
body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-total {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	width: 100%;
	margin: 0;
	padding: 0;
	font: 700 20px/24px var(--ah-font-num);
	color: var(--ah-text);
	white-space: nowrap;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .wd-checkout-prod-total:empty {
	display: none;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .araz-price__amount {
	font-size: 20px;
	line-height: 24px;
}

body.araz-home-skin.woocommerce-checkout td.wd-checkout-prod .araz-price__unit {
	font-size: 12px; /* I367:13143;393:13049: «تومان» beside the 20 px figure (issue #169) */
}

/* ---------------------------------------------------------------- the form column (367:13105 / 367:13106) */
body.araz-home-skin.woocommerce-checkout #customer_details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px; /* 367:13109: the field blocks 8 apart */
	box-sizing: border-box;
	width: 100%;
	max-width: none; /* the theme's two-column checkout gives it half the row */
	margin: 0;
	padding-inline: 0;
	font-family: var(--ah-font);
}

/* WooCommerce's hidden attribution inputs come first in the column: as a flex item they would add a gap */
body.araz-home-skin.woocommerce-checkout #customer_details > wc-order-attribution-inputs {
	display: none;
}

body.araz-home-skin.woocommerce-checkout #customer_details > :is(.woocommerce-billing-fields, .woocommerce-additional-fields) {
	box-sizing: border-box;
	width: 400px; /* 367:13106 */
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

body.araz-home-skin.woocommerce-checkout #customer_details > .woocommerce-shipping-fields {
	display: none;
}

/* 367:13106: the title, then the fields 16 under it; the shop's identity rows go after the address line, as the frame's rows
   come after its address box */
body.araz-home-skin.woocommerce-checkout .woocommerce-billing-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* 367:13107 / 367:13108: the title, bold 20 on a 32 px line, purple */
body.araz-home-skin.woocommerce-checkout .woocommerce-billing-fields > h3 {
	order: 0;
	margin: 0 0 8px;
	padding: 0;
	font: 700 20px/32px var(--ah-font);
	color: #5b4ecd;
	text-transform: none;
}

body.araz-home-skin.woocommerce-checkout .woocommerce-billing-fields > .woocommerce-billing-fields__field-wrapper {
	order: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.araz-home-skin.woocommerce-checkout .woocommerce-billing-fields > .araz-known-customer {
	order: 2;
}

/* the shop's read-only identity block: its own heading is dropped (the column has one title), its rows are the frame's
   icon rows (367:13111 name, 367:13115 phone): 12 px Medium at 57 %, the 24 px icon first, 4 apart, rows 8 apart */
body.araz-home-skin.woocommerce-checkout .araz-known-customer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

body.araz-home-skin.woocommerce-checkout .araz-known-customer > h3 {
	display: none;
}

body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	font: 500 12px/normal var(--ah-font);
	color: rgba(0, 0, 0, .57);
	text-align: start;
}

body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: center / 24px no-repeat;
}

/* 367:13111: first and last name on one line after the user icon (367:13114) */
body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li:is(.is-first_name, .is-last_name) {
	flex: 0 0 auto;
}

body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li.is-first_name::before {
	background-image: url("../icons/checkout/field-user.svg");
}

body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li.is-last_name::before {
	display: none;
}

/* 367:13115 / 367:13117: the phone */
body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li.is-phone::before {
	background-image: url("../icons/checkout/field-phone.svg");
}

/* the frame's rows carry no label (its postal-code row is the one exception); the company and e-mail rows are not
   printed since issue #169 (araz-customers' CheckoutFlow::SUMMARY_ROWS) */
body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li:is(.is-first_name, .is-last_name, .is-phone) > strong {
	display: none;
}

body.araz-home-skin.woocommerce-checkout .araz-known-customer > ul > li > strong {
	font-weight: inherit;
}

/* 367:13110 / 367:13125 «Verify Mobile Number»: a field is padding 8 0, the label (I367:13110;310:3953: 12 on a 16 px line,
   purple; its red asterisk I367:13110;310:3952 before the words, 4 apart), 4 px, the box; at most 500 wide */
body.araz-home-skin.woocommerce-checkout #customer_details p.form-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	max-width: 500px;
	margin: 0;
	padding: 8px 0;
	float: none;
}

body.araz-home-skin.woocommerce-checkout #customer_details p.form-row > label {
	display: flex;
	justify-content: flex-start;
	gap: 4px;
	margin: 0;
	font: 400 12px/16px var(--ah-font);
	color: #5b4ecd;
}

body.araz-home-skin.woocommerce-checkout #customer_details p.form-row > label .optional {
	display: none; /* the frame marks required fields only */
}

body.araz-home-skin.woocommerce-checkout #customer_details p.form-row > label :is(.required, abbr) {
	color: #f11515;
	font: inherit;
	text-decoration: none;
	border: 0;
}

body.araz-home-skin.woocommerce-checkout #customer_details p.form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* I367:13110;310:3954 «Text Field»: 42 high, white, 1 px #e0e0e0, radius 4, padding 4 12, the words 16 on a 24 px line */
body.araz-home-skin.woocommerce-checkout #customer_details p.form-row .input-text {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 42px;
	min-height: 0;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
	font: 400 16px/24px var(--ah-font);
	color: var(--ah-text);
	box-shadow: none;
}

/* I367:13125;359:10700: the placeholder at 12 % black */
body.araz-home-skin.woocommerce-checkout #customer_details p.form-row .input-text::placeholder {
	color: rgba(0, 0, 0, .12);
	opacity: 1;
}

body.araz-home-skin.woocommerce-checkout #customer_details p.form-row .input-text:focus {
	border-color: #b5a3ff; /* the frame draws no focus state */
	outline: none;
}

/* the section heading above the note: the frame has only the field's label */
body.araz-home-skin.woocommerce-checkout .woocommerce-additional-fields > h3 {
	display: none;
}

body.araz-home-skin.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* I367:13125;359:10698: the note box, 112 high, padding 8 12; its resize grip is the frame's 16 px icon (I367:13125;359:10712) */
body.araz-home-skin.woocommerce-checkout #customer_details p.form-row textarea.input-text {
	height: 112px;
	padding: 8px 12px;
	resize: vertical;
}

body.araz-home-skin.woocommerce-checkout #customer_details p.form-row textarea.input-text::-webkit-resizer {
	background: url("../icons/checkout/textarea-grip.svg") center / 16px no-repeat;
}

/* 367:13126: the submit row: «مرحله قبل» first (at the start), the purple button beside it, 10 apart */
body.araz-home-skin.woocommerce-checkout #payment.woocommerce-checkout-payment {
	margin-bottom: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

body.araz-home-skin.woocommerce-checkout #payment .form-row.place-order {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

body.araz-home-skin.woocommerce-checkout #payment .form-row.place-order > noscript {
	display: none;
}

/* WooCommerce's privacy sentence is not in the frame (367:13105) and WooCommerce does not require it: it prints it only
   while a privacy page is set and the store's checkout privacy text is not empty (wc_privacy_policy_text()). Hidden here
   (issue #169, the designer's words only); a terms checkbox, if the store ever sets terms, keeps its row. */
body.araz-home-skin.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	flex: 0 0 100%;
	margin: 0;
}

body.araz-home-skin.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
body.araz-home-skin.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper:not(:has(input)) {
	display: none;
}

/* 367:13130 / 367:13131: «مرحله قبل», #e2e8f5, radius 12, padding 8 12, 12 px Medium at 57 %, as tall as the row */
body.araz-home-skin.woocommerce-checkout #payment .ah-co-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	align-self: stretch;
	box-sizing: border-box;
	padding: 8px 12px;
	border-radius: 12px;
	background: #e2e8f5;
	color: rgba(0, 0, 0, .57);
	font: 500 12px/normal var(--ah-font);
	text-decoration: none;
	white-space: nowrap;
}

body.araz-home-skin.woocommerce-checkout #payment .ah-co-back:hover {
	background: #e2e8f5; /* the frame draws no hover */
	color: rgba(0, 0, 0, .57);
}

/* 367:13127 / 367:13128 / 367:13129: purple, radius 12, padding 8 with 12 before the check and 16 after the words, the words
   12 px Medium white, the 24 px check first */
body.araz-home-skin.woocommerce-checkout #payment button#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 8px;
	padding-inline: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: #5b4ecd;
	color: #fff;
	font: 500 12px/normal var(--ah-font);
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	float: none;
}

body.araz-home-skin.woocommerce-checkout #payment button#place_order::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("../icons/checkout/check-accept.svg") center / 24px no-repeat;
}

body.araz-home-skin.woocommerce-checkout #payment button#place_order:hover,
body.araz-home-skin.woocommerce-checkout #payment button#place_order:focus {
	background: #5b4ecd; /* the frame draws no hover */
	color: #fff;
}