/*
 * WooCommerce classic templates — account, cart, checkout, order pages.
 *
 * These are PHP templates outside the block system, so theme.json never
 * reaches them; without this file they render as unstyled browser defaults.
 * Every token below comes from theme.json, so the brand colour set in Store
 * Settings still drives them. Logical properties throughout for RTL.
 */

/* ---------- Shared form controls ---------- */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-block-end: var(--wp--preset--spacing--40);
	padding: 0;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}
.woocommerce form .form-row .required {
	color: var(--wp--preset--color--sale);
	text-decoration: none;
	border: 0;
}
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select,
.woocommerce-page .form-row input.input-text,
.woocommerce-page .form-row textarea,
.woocommerce-page .form-row select,
.select2-container .select2-selection--single {
	inline-size: 100%;
	padding-block: .7rem;
	padding-inline: .9rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: none;
	transition: border-color var(--wp--custom--transition--fast) var(--wp--custom--transition--ease);
}
.woocommerce .form-row input.input-text:focus,
.woocommerce .form-row textarea:focus,
.woocommerce .form-row select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}
.woocommerce .form-row textarea { min-block-size: 6rem; resize: vertical; }

/* Persian WooCommerce renders province/city through select2; match it to the
   native controls so the form does not look assembled from two kits. */
.select2-container--default .select2-selection--single {
	block-size: auto !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.6 !important;
	color: inherit !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	inset-block-start: 50% !important;
	transform: translateY(-50%);
	inset-inline-end: .6rem;
	inset-inline-start: auto;
}
.select2-dropdown {
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--wp--preset--color--primary);
}

/* ---------- Buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: .75rem;
	padding-inline: 1.5rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 550;
	line-height: 1.4;
	color: var(--oo-on-primary, #fff);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	transition: background var(--wp--custom--transition--fast) var(--wp--custom--transition--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--oo-on-primary, #fff);
}
.woocommerce #place_order,
.woocommerce button.button.alt {
	inline-size: 100%;
	padding-block: .95rem;
	font-size: var(--wp--preset--font-size--md);
}

/* ---------- Notices ---------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-block-end: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	list-style: none;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	/* Logical, so the accent sits on the correct edge under RTL. */
	border-inline-start: 3px solid var(--wp--preset--color--primary);
}
.woocommerce-error { border-inline-start-color: var(--wp--preset--color--sale); }
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { display: none; }
.woocommerce-info .button,
.woocommerce-message .button { margin-inline-start: auto; }

/* ---------- My Account ----------
 * Width comes from templates/page-my-account.html, whose post-content is
 * alignwide — the account dashboard needs more room than contentSize, which
 * is sized for prose. Doing it in the template avoids escaping the
 * constrained layout with negative margins, where an explicit width plus two
 * margins over-constrains the box and the browser puts all the expansion on
 * one side.
 */
.woocommerce-account .woocommerce {
	display: grid;
	/* Fixed, not minmax(0,240px): that lets the column shrink to its
	   content, and a short menu collapsed the sidebar to ~70px. */
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

/* Placement is explicit rather than relying on child order.
 *
 * Woo emits more than the two panels as direct children — a notices
 * wrapper, sometimes a greeting — and each of those takes a grid cell.
 * That pushed the navigation and the content into different rows, which
 * is why the dashboard looked broken while the logged-out view was fine.
 *
 * Anything that is not one of the two panels spans the full width, so it
 * reads as a banner; the panels then auto-place side by side in the row
 * after it, whatever the child count turns out to be.
 */
.woocommerce-account .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; }

/* Woo's own layout stylesheet floats these and gives them percentage
   widths — float:right/width:30% and float:left/width:68%. Inside a grid
   column those percentages resolve against the track, so the sidebar came
   out at 30% of 240px, about 70px wide. Cleared here; the grid owns the
   columns now. The child combinator outranks Woo's two-class selector,
   which loads after the theme stylesheet. */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	float: none;
	inline-size: auto;
	width: auto;
}
/* Login and register have no navigation, so the grid would leave a gap. */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.woocommerce-MyAccount-navigation li + li {
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: .85rem 1.1rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background var(--wp--custom--transition--fast) var(--wp--custom--transition--ease);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--surface-alt); }
.woocommerce-MyAccount-navigation .is-active a {
	font-weight: 600;
	color: var(--oo-on-primary, #fff);
	background: var(--wp--preset--color--primary);
}

/* min-inline-size:0 lets a grid item shrink below its content; without it a
   wide order table would push the column out instead of scrolling. */
.woocommerce-MyAccount-content {
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
}
.woocommerce-MyAccount-content > :first-child { margin-block-start: 0; }
.woocommerce-MyAccount-content > :last-child { margin-block-end: 0; }
.woocommerce-MyAccount-content p { max-inline-size: 62ch; }

/* Login / register */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-inline-size: 26rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
}
.woocommerce-form-login__rememberme { font-size: var(--wp--preset--font-size--sm); }
.woocommerce-LostPassword { font-size: var(--wp--preset--font-size--xs); }

/* ---------- Tables (orders, downloads, cart, order review) ---------- */
.woocommerce table.shop_table {
	inline-size: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--sm);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: .85rem 1rem;
	text-align: start;
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.woocommerce table.shop_table thead th {
	background: var(--wp--preset--color--surface);
	font-weight: 600;
	border-block-start: 0;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { background: var(--wp--preset--color--surface); }
.woocommerce table.shop_table .order-total { font-size: var(--wp--preset--font-size--md); }

/* Narrow screens: a 5-column order table cannot shrink, so stack it. */
@media (max-width: 600px) {
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table tr { display: block; padding-block: .5rem; }
	.woocommerce table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border: 0;
	}
	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		font-weight: 500;
		color: var(--wp--preset--color--muted);
	}
}

/* ---------- Checkout ---------- */
.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { inline-size: auto; float: none; }

#customer_details { margin-block-end: var(--wp--preset--spacing--60); }

h3#order_review_heading {
	margin-block-start: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--xl);
}

#order_review {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}
#order_review table.shop_table { background: var(--wp--preset--color--base); }

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--40);
	list-style: none;
	border: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: .9rem 1.1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-checkout #payment ul.payment_methods li + li { margin-block-start: .6rem; }
.woocommerce-checkout #payment ul.payment_methods li img {
	max-block-size: 1.6rem;
	inline-size: auto;
	margin-inline-start: .5rem;
	vertical-align: middle;
}
.woocommerce-checkout #payment div.payment_box {
	margin-block-start: .75rem;
	padding: .8rem 1rem;
	font-size: var(--wp--preset--font-size--xs);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--muted);
}
/* Woo draws a CSS triangle on the payment box that assumes LTR. */
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Two columns is wrong on a phone, and wrong for a single-column address
   form once country and address line 2 are removed. */
@media (max-width: 781px) {
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

/* ---------- Cart ---------- */
.woocommerce .cart_totals { margin-block-start: var(--wp--preset--spacing--50); }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: var(--wp--preset--font-size--lg); }
.woocommerce .coupon { display: flex; gap: .5rem; flex-wrap: wrap; }
.woocommerce .coupon input.input-text { inline-size: auto; flex: 1 1 10rem; }

/* =========================================================================
 * Checkout — card layout
 *
 * Classic Woo stacks billing, then order review. The reference puts
 * billing in one card with the order summary beside it, so form.checkout
 * becomes a two-column grid. Grid rather than float, so the summary can
 * stick while a long address form scrolls.
 *
 * #payment is NOT a sibling here — Woo renders it inside #order_review.
 * An earlier version gave it its own grid-area, which matched no grid
 * item: the second row's cell stayed empty (reading as a mis-centred
 * page) and #payment drew a second card inside the summary card. It is
 * styled as a section of the summary instead.
 * ====================================================================== */
.woocommerce-checkout { background: var(--wp--preset--color--surface); }
.woocommerce-checkout main { padding-block: var(--wp--preset--spacing--60); }

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--50);
}
.woocommerce-checkout #customer_details { margin-block-end: 0; }
.woocommerce-checkout #order_review_heading { display: none; }
.woocommerce-checkout #order_review {
	position: sticky;
	inset-block-start: var(--wp--preset--spacing--40);
}

/* Shared card shell. border-box so the padding stays inside the grid
   track — with content-box the billing card overflowed its column. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	box-sizing: border-box;
	inline-size: 100%;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}
.woocommerce-checkout #customer_details *,
.woocommerce-checkout #order_review * { box-sizing: border-box; }

/* Country and address line 2 are gone, so billing is one column with
   paired name fields rather than Woo's own two-column split. */
.woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--40);
}
.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }

.woocommerce-checkout h3 {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xl);
}

/* Pill fields, per the reference. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	border-radius: var(--wp--custom--radius--pill);
	padding-inline: 1.1rem;
}
.woocommerce-checkout .form-row textarea {
	border-radius: var(--wp--custom--radius--lg);
	padding-inline: 1.1rem;
}

/* Order summary table sheds its own borders inside the card. */
.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	border-radius: 0;
	background: transparent;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding-inline: 0;
	border-block-start-color: var(--wp--preset--color--line);
}
.woocommerce-checkout #order_review table.shop_table thead th,
.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td {
	background: transparent;
}
.woocommerce-checkout #order_review .order-total td,
.woocommerce-checkout #order_review .cart-subtotal td {
	text-align: end;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.woocommerce-checkout #order_review .order-total { font-size: var(--wp--preset--font-size--lg); }

/* Payment: a section of the summary card, not a card of its own. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.woocommerce-checkout #payment ul.payment_methods li {
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	border-color: transparent;
}
.woocommerce-checkout #payment .form-row.place-order { margin-block-end: 0; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-checkout #order_review { position: static; }
}
@media (max-width: 600px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

/* Cart page gets the same card treatment for consistency. */
.woocommerce-cart .woocommerce > form,
.woocommerce-cart .cart-collaterals .cart_totals {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}
.woocommerce-cart table.shop_table { border: 0; }

/* Auth form submits span the field width.
 * Woo puts the submit in a .form-row alongside a hidden nonce and the
 * "remember me" label; as a flex item it sized to content and sat 16px
 * short of the inputs above, misaligned on one edge. Scoped to the auth
 * forms so buttons that should stay inline — applying a coupon, for
 * instance — are untouched. */
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-ResetPassword button[type="submit"] {
	inline-size: 100%;
}

/* =========================================================================
 * Checkout — robustness fixes
 * ====================================================================== */

/* Woo injects a .woocommerce-NoticeGroup into form.checkout on validation
 * failure. As an unplaced grid item it claimed a column, which shunted the
 * summary out and made the whole page appear to jump on error. Anything
 * that is not one of the two panels spans the full width instead, so the
 * layout is identical with and without an error. */
.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }
.woocommerce-checkout form.checkout > #order_review { grid-column: 2; }

/* Woo injects <wc-order-attribution-inputs> between the two cards: a custom
   element of zero height that holds the attribution hidden fields. It matches
   the `form.checkout > *` catch-all above, so it spanned 1 / -1, claimed a
   grid row of its own, and pushed the order summary from row 1 column 2 down
   to row 3 — the summary appeared under the billing card instead of beside
   it, at every width.
   Taking it out of layout is safe: display:none does not stop a hidden input
   being submitted, only `disabled` does, so attribution still works if it is
   ever switched back on. */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
	display: none;
}

/* Woo floats the paired rows and gives them width:47%. Inside a grid track
 * that resolves against the track, so a 239px column produced a 113px
 * field. The grid owns the columns; clear Woo's sizing. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
	float: none;
	inline-size: auto;
	width: auto;
}

/* Country stays in the DOM so Woo's address JS and Persian WooCommerce's
 * province/city cascade still have a country to read; it is only hidden.
 * Not display:none — some scripts skip fields with no layout box. */
.woocommerce-checkout .oo-hidden-field,
.woocommerce-account .oo-hidden-field,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field,
.woocommerce-account #billing_country_field,
.woocommerce-account #shipping_country_field {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Province and city sit side by side. Persian WooCommerce rewrites their
 * classes to form-row-wide, so the pairing is done by id here rather than
 * fought for in PHP — it is presentation, and the DOM order is already
 * correct from the field reordering. */
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_state_field,
.woocommerce-checkout #shipping_city_field {
	grid-column: auto;
}
@media (max-width: 600px) {
	.woocommerce-checkout #billing_state_field,
	.woocommerce-checkout #billing_city_field,
	.woocommerce-checkout #shipping_state_field,
	.woocommerce-checkout #shipping_city_field {
		grid-column: 1 / -1;
	}
}

/* Woo's block-theme compatibility sheet caps the shop pages at 1000px:
 *
 *   .woocommerce-account main .woocommerce,
 *   .woocommerce-cart main .woocommerce,
 *   .woocommerce-checkout main .woocommerce,
 *   ... .wp-block-post-title { max-width: 1000px }
 *
 * Inside our 1240px alignwide column that left a 240px gap on the inline
 * end, which read as the page being off-centre — the column itself measured
 * dead centre, and the header lined up with the column rather than the
 * content. Released so the page layout decides the width, as it does
 * everywhere else in the theme. Prefixed with body to clear Woo's 0-2-1
 * specificity; its stylesheet loads after the theme's.
 */
body.woocommerce-account main .woocommerce,
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout main .woocommerce,
body.woocommerce-account .wp-block-post-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title {
	max-width: none;
}