/* ============================================================
   Roma Collectibles — WooCommerce overrides
   Maps WC default markup onto the theme's design system.
   ============================================================ */

/* ---------- Prices ---------- */
.woocommerce .price {
	font-weight: 800 !important;
	font-size: 1.12rem;
	color: var(--primary);
}
.woocommerce .price del,
.pd-price .price del,
.product-foot .price del {
	color: var(--muted);
	font-weight: 500;
	font-size: .85rem;
	margin-inline-end: 7px;
	opacity: 1;
}
.woocommerce .price ins,
.pd-price .price ins {
	background: none;
	text-decoration: none;
	font-weight: 800;
	color: var(--primary);
}
.pd-price .price {
	font-size: 2rem !important;
	margin-bottom: 6px;
}
.pd-price .price del { font-size: 1rem; }

/* ---------- Sale flash ---------- */
.woocommerce span.onsale {
	position: absolute;
	top: 13px;
	left: 13px;
	z-index: 2;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 100px;
	background: var(--gold);
	color: #1a1405;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	border-radius: 100px;
	margin: 0;
}
[dir="rtl"] .woocommerce span.onsale { left: auto; right: 13px; }

/* ---------- Buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 28px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: .95rem;
	border: 1.5px solid transparent;
	transition: all .22s ease;
	background: var(--primary);
	color: #fff;
	box-shadow: 0 6px 18px rgba(30, 58, 138, .28);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--primary-dark);
	color: #fff;
	transform: translateY(-2px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button {
	background: var(--primary) !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
	padding: 11px 28px !important;
	font-weight: 600 !important;
	box-shadow: 0 6px 18px rgba(30, 58, 138, .28);
}
.single_add_to_cart_button:hover { background: var(--primary-dark) !important; }

/* ---------- Loop cards (belt & braces) ---------- */
ul.products { list-style: none; padding: 0; margin: 0; }
li.product { list-style: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
}

/* ---------- Single product add-to-cart row ----------
   The WC <form> is a block element, so the qty stepper + button used to be
   inline-level (baseline-aligned → the button sat a few px high and flex:1
   was ignored). Make the form a flex row to center both. */
.pd-buy form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.pd-buy form.cart .qty-box { flex: 0 0 auto; }
.pd-buy form.cart .single_add_to_cart_button { margin: 0; }

/* ---------- Quantity steppers ---------- */
.qty-box .qty {
	width: 52px;
	height: 46px;
	border: none;
	border-radius: 0;
	text-align: center;
	font-size: .98rem;
	font-weight: 700;
	font-family: inherit;
	background: #fff;
	color: var(--text);
	margin: 0;
}
.qty-box .qty:focus { outline: none; }
.qty-box input[type="number"]::-webkit-outer-spin-button,
.qty-box input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-box input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty-box .qty-btn {
	width: 42px;
	height: 46px;
	border: none;
	background: var(--surface);
	font-size: 1.1rem;
	color: var(--primary);
	font-weight: 700;
	cursor: pointer;
}
.qty-box .qty-btn:hover { background: var(--primary-50); }

/* ---------- Single product gallery ---------- */
.pd-gallery .woocommerce-product-gallery {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.pd-gallery .woocommerce-product-gallery img { width: 100%; }

/* Thumbnail rail (matching the design's pd-main-img frame) */
.pd-main-img { border-radius: 20px; box-shadow: var(--shadow-md); }
.pd-main-img img { width: 100%; border-radius: 20px; }
.pd-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin-top: 14px;
}
.pd-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s ease;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { border-color: var(--primary-100); }
.pd-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }

@media (max-width: 992px) {
	.pd-thumbs { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}
@media (max-width: 576px) {
	.pd-thumbs { gap: 7px; }
	.pd-thumb { border-width: 1.5px; border-radius: 9px; }
}

/* ---------- Tabs ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 2px solid var(--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--muted);
	font-weight: 600;
	padding: 12px 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--primary);
	border-color: var(--primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 16px; }

/* ---------- Breadcrumb ---------- */
.woocommerce .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	font-size: .82rem;
	color: #9fb2e4;
	margin-bottom: 14px;
}
.woocommerce .woocommerce-breadcrumb a { color: #fff; }
.woocommerce .woocommerce-breadcrumb a:hover { color: #fff; }

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 20px;
	font-size: .92rem;
	font-weight: 600;
	margin-bottom: 24px;
	border-top-width: 1px;
}
.woocommerce-message { background: #f0fdf4; border-color: #bbf7d0; color: var(--success); }
.woocommerce-info { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary); }
.woocommerce-error { background: #fef2f2; border-color: #fecaca; color: var(--danger); }
.woocommerce-message .button,
.woocommerce-info .button { float: none; margin-inline-start: 12px; }

/* ---------- Ordering / pagination ---------- */
.woocommerce-ordering select,
.woocommerce .orderby {
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 14px;
	font-size: .88rem;
	font-family: inherit;
	background: #fff;
	color: var(--text);
	outline: none;
}
.woocommerce nav.woocommerce-pagination { margin-top: 40px; }
.woocommerce nav.woocommerce-pagination ul {
	border: none;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--primary);
	font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--primary); color: #fff; }

/* ---------- Cart page ---------- */
/* ponytail: bare WC image without the .cart-thumb wrapper — same look, no template change */
img.roma-cart-thumb-img {
	display: block;
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 11px;
	background: var(--surface);
}
.woocommerce .cart-row .cart-qty .quantity { display: inline-flex; }
.woocommerce .cart-row .quantity input.qty {
	width: 54px;
	text-align: center;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 10px 6px;
	font-family: inherit;
	font-size: .95rem;
	background: #fff;
	color: var(--text);
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce .cart-row .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .cart-row .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .cart-row .remove-btn,
.woocommerce a.remove {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: none;
	background: none;
	color: var(--muted);
	border-radius: 8px;
	font-size: 1.15rem;
}
.woocommerce a.remove:hover { background: #fef2f2; color: var(--danger); }
.cart-actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-top: 1px solid var(--border);
}
.cart-actions-row .promo-row input {
	flex: 1;
	min-width: 180px;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 11px 14px;
	font-size: .88rem;
	font-family: inherit;
	outline: none;
	background: #fff;
}
.woocommerce-message .button.wc-forward { float: none; }

/* ============================================================
   Checkout
   Owns the whole page (WC layout CSS is dequeued by the theme).
   Scoping: form.checkout + unique IDs — no body-class chains.
   :where() keeps field styling at (0,x,x) so anything can override.
   ============================================================ */

/* Flex shell — RTL: first DOM child = right side -> form right, summary LEFT.
   #order_review_heading is moved inside #order_review by JS (survives the
   checkout AJAX, which only replaces the table + payment fragments). */
form.checkout {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	align-items: flex-start;
}
/* Coupon toggle/form are extra flex children — force them to full-width rows */
form.checkout > :is(.woocommerce-form-coupon-toggle, form.checkout_coupon) {
	flex-basis: 100%;
	order: -1;
}

/* Billing/shipping column — a card like everything else on the site */
#customer_details {
	flex: 1.55 1 0;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	box-shadow: var(--shadow-sm);
	counter-reset: roma-step;
}
#customer_details .col-1,
#customer_details .col-2 { float: none; width: auto; }
#customer_details .col-2 {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--border);
}

/* Numbered section headings — the brand's numeral motif */
.woocommerce-billing-fields h3::before,
#ship-to-different-address::before {
	counter-increment: roma-step;
	content: counter(roma-step, persian);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: var(--primary-50);
	color: var(--primary);
	font-family: var(--font-body);
	font-size: .88rem;
	font-weight: 700;
	margin-inline-end: 10px;
	vertical-align: -4px;
}

/* Order summary — museum-plaque gold accent */
#order_review {
	flex: 0.95 1 0;
	min-width: 0;
	position: sticky;
	top: 110px;
	background: #fff;
	border: 1px solid var(--border);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow-sm);
}
#order_review_heading { display: none; }
#order_review_heading.in-review {
	display: block;
	font-family: var(--font-display);
	font-size: 1.25rem;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}
#order_review .product-name { font-weight: 600; font-size: .92rem; }
.order-total :where(th, td) { font-size: 1.05rem; }
.order-total td { color: var(--primary); }

/* Section headings */
:is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) h3,
#order_review_heading {
	font-family: var(--font-display);
	font-size: 1.2rem;
	margin: 0 0 18px;
}
.woocommerce-additional-fields { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--border); }

/* Fields */
.form-row :where(input.input-text, textarea, select) {
	width: 100%;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 13px 16px;
	font-size: .92rem;
	font-family: inherit;
	outline: none;
	background: #fff;
	color: var(--text);
	line-height: 1.5;
	height: auto;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.form-row :where(input.input-text, textarea, select):focus {
	border-color: var(--primary);
	background: #fff;
	box-shadow: 0 0 0 4px var(--primary-50);
}
.form-row { margin: 0 0 18px; }
.form-row label {
	display: block;
	font-size: .84rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 7px;
	cursor: pointer;
}
.form-row label .required { color: var(--danger); }
.form-row label .optional { color: var(--muted); font-weight: 400; }
.woocommerce-input-wrapper { display: block; width: 100%; }

/* Field validation states */
.form-row.woocommerce-invalid label { color: var(--danger); }
.form-row.woocommerce-invalid :where(input.input-text, select),
.form-row.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: var(--danger);
	background: #fef2f2;
}

/* Paired halves (first/last name, city/postcode…) — flex, no floats */
:is(.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper,
	form.checkout_coupon) {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4%;
	align-items: flex-start;
}
:is(.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper,
	form.checkout_coupon) > .form-row {
	flex: 1 1 100%;
	min-width: 0;
}
:is(.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper,
	form.checkout_coupon) > :is(.form-row-first, .form-row-last) {
	flex: 0 0 48%;
}

/* Terms, privacy, coupon toggle */
.woocommerce-terms-and-conditions-wrapper { margin: 20px 0 0; }
.woocommerce-terms-and-conditions-wrapper label { font-size: .9rem; cursor: pointer; }
.woocommerce-privacy-policy-text { font-size: .82rem; color: var(--muted); margin-top: 12px; line-height: 1.8; }
:is(.woocommerce-privacy-policy-text a, .woocommerce-privacy-policy-link) { color: var(--primary); font-weight: 600; }
.woocommerce-form-coupon-toggle :is(a.showcoupon, a.showlogin) {
	color: var(--primary);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
form.checkout_coupon { margin-top: -8px; }
#ship-to-different-address { margin: 0 0 18px; }
#ship-to-different-address label { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; cursor: pointer; }
#payment .place-order { margin: 0; padding-top: 4px; }
.wc_payment_methods .woocommerce-info { margin-bottom: 0; }

/* Checkboxes & radios */
.woocommerce :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--primary);
	width: 17px;
	height: 17px;
	vertical-align: middle;
}

/* Order review table */
#order_review table { border: none; margin: 0; }
#order_review :where(th, td) {
	background: transparent;
	border-top: none;
	border-bottom: 1px solid var(--border);
	padding: 12px 4px;
}
#order_review tr:last-child :where(th, td) { border-bottom: none; }
.product-quantity { font-weight: 400; color: var(--muted); }
.order-total :where(th, td) { font-size: 1.02rem; padding-block: 16px; }
.wc-item-meta { font-size: .82rem; color: var(--muted); margin: 4px 0 0; padding: 0 14px 0 0; list-style: none; }

/* Payment box — nested card inside the summary */
#payment {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 18px;
	margin-top: 18px;
}
#payment ul.payment_methods {
	list-style: none;
	border-bottom: 1px solid var(--border);
	padding: 0 0 14px;
	margin: 0;
}
#payment ul.payment_methods li {
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 13px 16px;
	margin-bottom: 10px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
/* ponytail: :has() — unsupported browsers just lose the selected-method highlight */
#payment ul.payment_methods li:has(input:checked) {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-50);
}
#payment ul.payment_methods li label { font-weight: 700; font-size: .95rem; cursor: pointer; }
#payment div.payment_box {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-size: .88rem;
	color: var(--text-secondary);
	margin-top: 10px;
	position: relative;
}
#payment div.payment_box::before { display: none; }
#place_order {
	width: 100%;
	margin-top: 12px;
	background: var(--gold);
	color: #1a1405;
	border: none;
	border-radius: var(--radius-sm);
	padding: 16px 28px;
	font-size: 1.02rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(200, 162, 74, .35);
	transition: filter .18s ease, transform .18s ease;
}
#place_order:hover { background: var(--gold); filter: brightness(1.06); transform: translateY(-2px); }
#payment::after {
	content: "پرداخت امن · ضمانت اصالت کالا و بسته‌بندی اصلی";
	display: block;
	text-align: center;
	font-size: .78rem;
	color: var(--muted);
	margin-top: 14px;
}

/* selectWoo country/state dropdowns */
.select2-container .select2-selection--single {
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	height: 48px;
	background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding: 0 15px;
	color: var(--text);
	font-size: .92rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-dropdown {
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	outline: none;
	font-family: inherit;
}
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--primary-50); color: var(--primary); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--primary); color: #fff; }

.woocommerce table.shop_table {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	border-collapse: separate;
	overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--border); padding: 16px; }
.woocommerce table.shop_table thead th { background: var(--surface); font-weight: 700; }

/* ---------- My Account ---------- */
/* ponytail: :has() — without it the account dashboard stays stacked full-width (current behavior) */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 36px;
	align-items: start;
}
.woocommerce-MyAccount-navigation { position: sticky; top: 110px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--border); }
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-weight: 600; color: var(--text); transition: background .15s ease; }
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--primary-50); color: var(--primary); }
.woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-family: var(--font-display); }
.woocommerce-MyAccount-content table.shop_table td { padding: 12px 14px; font-size: .92rem; }
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button.button { margin-top: 10px; }

/* Login / register (account page logged out, checkout guest login) */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	max-width: 580px;
	margin-inline: auto;
}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) h2 {
	font-family: var(--font-display);
	font-size: 1.2rem;
	margin: 0 0 14px;
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
}
.woocommerce form.login label,
.woocommerce form.register label { display: block; margin-bottom: 7px; }
.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 20px;
	font-size: .88rem;
	cursor: pointer;
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit { width: 100%; }
.woocommerce-LostPassword { font-size: .88rem; margin: 14px 0 0; }
.woocommerce-LostPassword a { color: var(--primary); font-weight: 600; }

@media (max-width: 1024px) {
	form.checkout { flex-direction: column; gap: 24px; }
	/* Summary first on mobile — users confirm the order before typing details */
	#order_review { order: -1; flex: none; width: auto; position: static; }
	#customer_details { flex: none; width: auto; }
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation { position: static; }
	.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .col2-set { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	img.roma-cart-thumb-img { width: 70px; height: 70px; }
}
@media (max-width: 576px) {
	#customer_details { padding: 20px; }
	#order_review { padding: 18px; }
	:is(.woocommerce-billing-fields__field-wrapper,
		.woocommerce-shipping-fields__field-wrapper,
		form.checkout_coupon) > :is(.form-row-first, .form-row-last) { flex-basis: 100%; }
	.woocommerce-MyAccount-content { padding: 20px; }
	#payment { padding: 14px; }
}
.woocommerce .star-rating { color: var(--gold); }
.woocommerce .star-rating span::before { color: var(--gold); }
.woocommerce .product-meta .star-rating { font-size: .8rem; }
.woocommerce .woocommerce-product-gallery__trigger { top: 14px; right: 14px; }
[dir="rtl"] .woocommerce .woocommerce-product-gallery__trigger { right: auto; left: 14px; }

/* ============================================================
   Single product — content (توضیحات) + Reviews (نظرات)
   ============================================================ */
.product-description {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 34px;
	box-shadow: var(--shadow-sm);
	line-height: 2;
	color: var(--text);
}
.product-description p { margin-bottom: 1em; }
.product-description p:last-child { margin-bottom: 0; }
.product-description h2, .product-description h3, .product-description h4 { font-family: var(--font-display); margin: 1.2em 0 .4em; }

/* ---------- Product tabs (توضیحات / نظرات) ---------- */
.product-tabs {
	display: flex;
	gap: 6px;
	border-bottom: 2px solid var(--border);
	margin-bottom: 28px;
}
.product-tab {
	border: none;
	background: none;
	padding: 13px 24px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: var(--muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color .18s ease, border-color .18s ease;
}
.product-tab:hover { color: var(--primary); }
.product-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.product-tab .tab-count { color: var(--gold); font-size: .85rem; margin-inline-start: 3px; }
.product-tab-panel { display: none; }
.product-tab-panel.active { display: block; animation: romaFadeIn .25s ease; }
@keyframes romaFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Reviews */
.product-reviews .woocommerce-Reviews { max-width: 820px; }
.woocommerce-Reviews #comments { margin-bottom: 34px; }
.woocommerce-Reviews-title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 18px; color: var(--text); }
.woocommerce-Reviews ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-Reviews ol.commentlist li.review {
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 24px;
}
.woocommerce-Reviews ol.commentlist li.review .comment_container { display: flex; gap: 14px; align-items: flex-start; }
.woocommerce-Reviews ol.commentlist img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--border);
}
.woocommerce-Reviews .comment-text .meta { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.woocommerce-Reviews .comment-text .description { line-height: 1.9; }
.woocommerce-Reviews .star-rating { color: var(--gold); }
.woocommerce .woocommerce-noreviews { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 26px 30px; color: var(--muted); font-weight: 600; margin-bottom: 26px; }

/* Review form */
.product-reviews #review_form_wrapper { margin-top: 6px; }
.product-reviews #review_form {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
}
.product-reviews #reply-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); display: block; margin-bottom: 16px; }
.product-reviews form.comment-form label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.product-reviews form.comment-form input[type="text"],
.product-reviews form.comment-form input[type="email"],
.product-reviews form.comment-form select,
.product-reviews form.comment-form textarea {
	width: 100%;
	max-width: 100%;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	font-size: .92rem;
	font-family: inherit;
	background: var(--surface);
	outline: none;
}
.product-reviews form.comment-form input:focus,
.product-reviews form.comment-form textarea:focus,
.product-reviews form.comment-form select:focus {
	border-color: var(--primary);
	background: #fff;
	box-shadow: 0 0 0 4px var(--primary-50);
}
.product-reviews form.comment-form .comment-form-rating select { max-width: 220px; }
.product-reviews form.comment-form p { margin-bottom: 16px; }
.product-reviews form.comment-form .submit {
	background: var(--primary) !important;
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	padding: 12px 26px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}
.product-reviews form.comment-form .submit:hover { background: var(--primary-dark); }
.product-reviews .must-log-in, .woocommerce-verification-required { color: var(--muted); background: var(--primary-50); border-radius: var(--radius-sm); padding: 14px 18px; }

/* ---------- Review form: star rating picker ----------
   single-product.js injects <p class="stars"> with the rating links;
   WooCommerce's default stylesheet (disabled by this theme) used to style them. */
#respond p.stars {
	display: inline-block;
	margin: 0 0 14px;
	padding: 0;
	line-height: 1.2;
}
#respond p.stars > span { display: inline-flex; gap: 4px; }
#respond p.stars a {
	position: relative;
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	font-size: 1.45rem;
	text-indent: 999em;
	overflow: hidden;
	text-decoration: none !important;
}
#respond p.stars a::before {
	content: "\2605"; /* ★ (Persian/RTL star) */
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.3em;
	text-indent: 0;
	color: var(--muted);
	transition: color .15s ease;
}
#respond p.stars:hover a::before { color: var(--gold); }
#respond p.stars a:hover ~ a::before { color: var(--muted); }
/* Selected state (set by single-product.js: .active on the star, .selected on the group) */
#respond p.stars.selected a::before { color: var(--muted); }
#respond p.stars.selected a.active::before { color: var(--gold); }
@media (hover: none) {
	/* Touch screens: no hover, just show the select-friendly fallback + stars */
	#respond p.stars a { width: 1.8em; height: 1.8em; font-size: 1.4rem; }
}


/* ============================================================
   Category navigation (cat-nav) — emoji + dropdown product menu
   ============================================================ */
.cat-nav {
	background: #fff;
	border-top: 1px solid var(--border);
	position: relative;
	z-index: 150;
}
/* The nav bar lives in the sticky .site-header (z-index 200) — raising it here
   guarantees the whole row (incl. dropdowns) paints above page content. */
.site-header { z-index: 300; }
.cat-nav-inner {
	display: flex;
	align-items: center;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-nav-dropdown-item { position: relative; flex: 0 0 auto; }
/* Lift the opened branch so its dropdown paints above everything below it. */
.cat-nav-dropdown-item:hover,
.cat-nav-dropdown-item:focus-within { z-index: 40; }
.cat-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 13px;
	font-weight: 700;
	font-size: .88rem;
	color: var(--text);
	white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}
.cat-nav-item:hover { background: var(--primary-50); color: var(--primary); }
.cat-nav-emoji { font-size: 1.15rem; line-height: 1; }
.cat-nav-caret {
	width: 13px;
	height: 13px;
	color: var(--muted);
	transition: transform .2s ease;
}
.has-dropdown:hover .cat-nav-caret,
.has-dropdown:focus-within .cat-nav-caret { transform: rotate(180deg); }
.cat-dropdown {
	position: absolute;
	top: calc(100% + 0px);
	inset-inline-start: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: var(--shadow-lg);
	padding: 8px;
	margin: 0;
	list-style: none;
	min-width: 220px;
	display: none;
	z-index: 999;
}
/* Pointer: tucked against the dropdown's top edge — only the tip sits in the
   gap above; the rest is clipped so it reads as "behind" the panel. */
.cat-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    inset-inline-start: 20px;
    width: 12px;
    height: 12px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-inline-start: 1px solid var(--border);
    border-radius: 2px;
    transform: rotate(315deg);
    z-index: 0;
}
.cat-dropdown li { position: relative; z-index: 1; }
.has-dropdown:hover > .cat-dropdown,
.has-dropdown:focus-within > .cat-dropdown { display: block; }
.cat-dropdown li:last-child { border: none; }
.cat-dropdown li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 9px;
	font-weight: 500;
	font-size: .88rem;
	color: var(--text);
}
.cat-dropdown li a:hover { background: var(--primary-50); color: var(--primary); }

/* Large screens: the bar has room, so disable the horizontal scroller —
   an ancestor with overflow:auto was clipping/layering the absolute dropdowns. */
@media (min-width: 1024px) {
	.cat-nav-inner { overflow: visible; }
}

/* Small screens: keep the horizontal scroller for the bar; render children
   as stacked lists below the parent (no clipping, touch-friendly). */
@media (max-width: 1023px) {
	.cat-dropdown {
		position: static;
		min-width: 0;
		width: 100%;
		display: none;
		border-radius: 8px;
		margin-top: 4px;
	}
	.cat-dropdown::before { display: none; }
	.has-dropdown:hover > .cat-dropdown,
	.has-dropdown:focus-within > .cat-dropdown { display: block; }
}

/* No focus ring on the navigation */
.site-header a:focus,
.site-header button:focus,
.mobile-nav-panel a:focus,
.mobile-nav-panel button:focus,
.cat-nav a:focus,
.cat-nav button:focus,
.main-nav a:focus { outline: none; }



/* ============================================================
   Hero style 2 — compact slideshow (2/3) + product grid (1/3)
   ============================================================ */
.hero.hero-compact { padding: 22px 0; }
/* Style 3: the compact block sits under the style-1 hero — no repeated hero bg. */
.hero.hero-flat { background: none; }
.hero-compact-inner {
	display: grid;
	grid-template-columns: 4fr 1fr;
	gap: 16px;
	align-items: stretch;
}
.hero-slideshow {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: var(--surface);
	min-height: 320px;
	box-shadow: var(--shadow-md);
}
.hs-stage, .hs-slide { position: absolute; inset: 0; }
/* Crossfade via opacity only - no z-index jump (that caused instant swaps).
   Inactive slides must not capture clicks: they're still stacked on top of
   the stage, so the LAST slide in DOM would swallow every button click. */
.hs-slide { opacity: 0; transition: opacity .8s ease; will-change: opacity; pointer-events: none; }
.hs-slide.active { opacity: 1; pointer-events: auto; }
/* Gentle Ken Burns zoom on the active slide's image */
.hs-media { position: absolute; inset: 0; overflow: hidden; }
.hs-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s linear; }
.hs-slide.active .hs-media img { transform: scale(1.08); }
.hs-media-ph {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--primary), var(--primary-dark));
}
/* Text content drifts up when its slide becomes active */
.hs-slide.active .hs-body { animation: hsFadeUp .7s ease both; }
@keyframes hsFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.hs-media-ph {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--primary), var(--primary-dark));
}
.hs-media-ph .ph-numeral { color: rgba(200,162,74,.9); }
.hs-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(23, 44, 107, .5) 0%, rgba(23, 44, 107, .45) 45%, rgba(23, 44, 107, .08) 100%);
    z-index: 3;
    transform: rotate(180deg);
}
.hs-body {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 30px 65px 45px;
	max-width: 68%;
}
.hs-body::after { display: none; }
.hs-cat {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
}
.hs-title {
	font-family: var(--font-display);
	color: #fff;
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	line-height: 1.3;
	margin: 8px 0 4px;
}
.hs-price { color: #fff; font-weight: 800; font-size: 1.05rem; }
.hs-actions { margin-top: 14px; }
.btn-sm { padding: 9px 18px; font-size: .84rem; }
.hs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	backdrop-filter: blur(4px);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.hs-arrow:hover { background: var(--primary); transform: translateY(-50%) scale(1.06); }
.hs-prev { inset-inline-start: 14px; }
.hs-next { inset-inline-end: 14px; }
.hs-dots {
	position: absolute;
	bottom: 14px;
	inset-inline-start: 34px;
	z-index: 5;
	display: flex;
	gap: 6px;
}
.hs-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.45);
	cursor: pointer;
	padding: 0;
	transition: background .2s ease;
}
.hs-dot.active { background: var(--gold); }

.hero-promos {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 12px;
}


/* ============================================================
   Categories — compact boxes (style 3)
   ============================================================ */
.cat-boxes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}
.cat-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 14px 18px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-box:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary);
}
.cat-box .box-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: var(--primary-50);
	color: var(--primary);
	margin-bottom: 2px;
}
.cat-box .box-icon svg { width: 26px; height: 26px; }
.cat-box .box-name {
	font-weight: 700;
	font-size: .9rem;
	color: var(--text);
	line-height: 1.35;
}
.cat-box .box-count {
	font-size: .7rem;
	font-weight: 800;
	color: var(--gold);
	background: var(--gold-soft);
	padding: 3px 10px;
	border-radius: 100px;
}

/* ============================================================
   Categories — museum exhibit plaques (style 4, the vault halls)
   ============================================================ */
.cat-plaques {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.cat-plaque {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	min-height: 96px;
	border-radius: 14px;
	overflow: hidden;
	color: var(--text);
	/* marble-linen plate: faint diagonal weave over warm ivory */
	background:
		repeating-linear-gradient(45deg, rgba(30,58,138,.03) 0 2px, rgba(30,58,138,.006) 2px 8px),
		linear-gradient(160deg, #fdfcf8 0%, #f5f1e8 100%);
	border: 1px solid rgba(200,162,74,.55);
	/* double brass frame (outer hairline + inner highlight) */
	box-shadow:
		inset 0 0 0 4px #fffdf7,
		inset 0 0 0 5px rgba(200,162,74,.45),
		0 2px 8px rgba(15,23,42,.05);
	transition: transform .22s ease, box-shadow .22s ease;
}
.cat-plaque:hover {
	transform: translateY(-3px);
	box-shadow:
		inset 0 0 0 4px #fffdf7,
		inset 0 0 0 5px rgba(200,162,74,.72),
		0 16px 34px rgba(15,23,42,.14);
}
/* engraved Roman-numeral medallion (start-top corner of the plaque) */
.plaque-medal {
	position: absolute;
	top: 12px;
	inset-inline-end: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .98rem;
	color: var(--gold);
	border: 1px solid rgba(200,162,74,.6);
	background:
		repeating-linear-gradient(135deg, rgba(200,162,74,.13) 0 2px, rgba(200,162,74,.03) 2px 7px),
		#fbf6ec;
	box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(138,107,29,.25);
	transition: transform .28s ease;
}
.cat-plaque:hover .plaque-medal { transform: scale(1.12) rotate(6deg); }
.plaque-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: var(--primary);
	background: #fff;
	border: 1px solid rgba(200,162,74,.35);
	box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.plaque-icon svg { width: 22px; height: 22px; }
.plaque-info { min-width: 0; padding-inline-end: 46px; }
.plaque-info b {
	font-family: var(--font-display);
	font-size: 1.06rem;
	color: #172c6b;
	display: inline-block;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 3px;
	width: fit-content;
}
.plaque-info > span {
	font-size: .74rem;
	color: var(--muted);
	display: block;
	margin-top: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.plaque-count {
	margin-inline-start: auto;
	flex-shrink: 0;
	font-size: .7rem;
	font-weight: 800;
	color: #8a6b1d;
	background: var(--gold-soft);
	border: 1px solid rgba(200,162,74,.35);
	padding: 4px 11px;
	border-radius: 100px;
	white-space: nowrap;
}
@media (max-width: 1023px) {
	.cat-plaques { grid-template-columns: 1fr; }
	.plaque-info { padding-inline-end: 0; }
}
/* ============================================================
   Categories — compact chip strip (style 2)
   ============================================================ */
.cat-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}
.cat-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 100px;
	color: var(--text);
	font-weight: 600;
	font-size: .86rem;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cat-chip:hover {
	border-color: var(--primary);
	background: var(--primary-50);
	color: var(--primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.cat-chip .chip-icon { display: inline-flex; align-items: center; color: var(--primary); }
.cat-chip .chip-icon svg { width: 18px; height: 18px; }
.cat-chip .chip-name { line-height: 1; }
.cat-chip .chip-count {
	font-size: .7rem;
	font-weight: 800;
	color: var(--gold);
	background: var(--gold-soft);
	padding: 2px 8px;
	border-radius: 100px;
	margin-inline-start: auto;
}
/* Compact trust card (hero promotion) */
.trust-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
	min-height: 0;
}
.trust-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.trust-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--primary-50);
	color: var(--primary);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.trust-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trust-card-body b { font-family: var(--font-display); font-size: .92rem; color: var(--text); line-height: 1.3; }
.trust-card-body > span { font-size: .75rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 1023px) {
	.hero-compact-inner { grid-template-columns: 1fr; }
	.hero-slideshow { min-height: 260px; }
	.hs-body { max-width: 88%; padding: 22px 24px 46px; }
}
@media (max-width: 720px) {
	.hero-promos { grid-template-columns: 1fr; }
@media (max-width: 720px) {
	.hero-promos { display: none; }
}
	.hero-slideshow { min-height: 230px; }
}
/* ============================================================
   Brands bar (homepage)
   ============================================================ */
.brands-bar { background: var(--surface); border-block: 1px solid var(--border); }
.brands-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px 32px;
	flex-wrap: wrap;
	padding: 16px 0;
}
.brands-label {
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.brands-label::after {
	content: "";
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--gold);
	margin-inline-start: 12px;
	vertical-align: middle;
}
/* Carousel viewport — native horizontal scroll, chrome-less */
.brands-viewport { position: relative; flex: 1; min-width: 0; }
.brands-row {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	padding: 2px 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.brands-row::-webkit-scrollbar { display: none; }
/* Edge fades — visible only while that side can scroll further */
.brands-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 46px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
	z-index: 2;
}
.brands-fade-start { /* start side: right in RTL */
	right: 0;
	background: linear-gradient(to left, var(--surface), transparent);
}
.brands-fade-end {
	left: 0;
	background: linear-gradient(to right, var(--surface), transparent);
}
.brands-fade.visible { opacity: 1; }
/* Overlay arrows — one per physical side, vertically centered */
.brands-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(.92);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--border);
	color: var(--primary);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	z-index: 3;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease;
}
.brands-arrow-left { left: 7px; }
.brands-arrow-right { right: 7px; }
.brands-viewport:hover .brands-arrow,
.brands-arrow:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.brands-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.brands-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
/* Not scrollable (or touch where arrows stay hidden anyway) */
.brands-viewport.is-static .brands-arrow,
.brands-viewport.is-static .brands-fade { opacity: 0 !important; pointer-events: none; }
@media (hover: none) {
	.brands-arrow { display: none; }
}
.brand { position: relative; display: inline-flex; flex-shrink: 0; }
.brand-name {
	font-family: var(--font-display);
	font-size: 1.06rem;
	font-weight: 700;
	color: #8b9ab8;
	opacity: .75;
	white-space: nowrap;
	transition: opacity .2s ease, color .2s ease;
	cursor: default;
}
.brand-name:hover { opacity: 1; color: var(--primary); }

/* Brand hover tooltip - ONE floating element created by JS, fed from the
   .brand data-* attributes. Never in-flow, so the carousel can't clip it.
   Height is content-driven: 52px tile + 2x8px padding + border = 70px. */
.brand-tip {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	line-height: 1.35;
	max-width: 78vw;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.brand-tip.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.brand-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--tip-arrow, 50%);
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #fff;
	filter: drop-shadow(0 1px 0 var(--border));
}
.brand-tip-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-dark);
    background: #fff;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
}
.brand-tip-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	padding: 4px;
	object-fit: contain;
}
.brand-tip-name {
	font-weight: 700;
	font-size: .92rem;
	color: var(--text);
	white-space: nowrap;
}
/* Brand archive hero — logo tile beside the title */
.brand-hero {
	display: flex;
	align-items: center;
	gap: 16px;
}
.brand-hero-logo {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
}
.brand-hero-logo img {
	max-width: 100%;
	max-height: 100%;
	padding: 6px;
	object-fit: contain;
}

@media (max-width: 720px) {
	.brands-inner { justify-content: center; text-align: center; flex-wrap: wrap; }
	.brands-row { gap: 14px 18px; }
	.brand-name { font-size: .95rem; }
	.brands-fade { width: 30px; }
	.brand-hero { gap: 12px; }
	.brand-hero-logo { width: 48px; height: 48px; border-radius: 11px; }
}
/* ===== Shop filter drawer (mobile) ===== */
.filters-toggle { display: none; }
.filters-drawer-head { display: none; }
/* Overlay must never become a .shop-layout grid item on desktop */
.filters-overlay { display: none; }
@media (max-width: 1024px) {
	.filters-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 18px;
		border-radius: 10px;
		background: #fff;
		border: 1.5px solid var(--border);
		font-family: inherit;
		font-size: .88rem;
		font-weight: 700;
		color: var(--primary);
		cursor: pointer;
		transition: border-color .18s ease, background .18s ease;
	}
	.filters-toggle:hover { border-color: var(--primary); background: var(--primary-50); }
	.filters-overlay {
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s;
		z-index: 940;
	}
	body.filters-open .filters-overlay { opacity: 1; visibility: visible; }
	/* The aside becomes an off-canvas drawer (RTL: slides from the right) */
	.filters-col {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(330px, 88vw);
		margin: 0;
		padding: 0 18px 26px;
		background: #fff;
		z-index: 960;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(250%);
		transition: transform .3s ease;
		display: block;
		box-shadow: var(--shadow-lg);
	}
	body.filters-open .filters-col { transform: none; }
	body.filters-open { overflow: hidden; }
	.filters-drawer-head {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 0 12px;
		margin-bottom: 8px;
		background: #fff;
		border-bottom: 1px solid var(--border);
		z-index: 2;
	}
	.filters-drawer-head b { font-family: var(--font-display); font-size: 1.05rem; }
	.filters-close {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border: none;
		background: var(--surface);
		border-radius: 50%;
		color: var(--muted);
		cursor: pointer;
	}
	.filters-close:hover { color: var(--danger); }
}

/* ============================================================
   Mini-cart drawer (AJAX cart)
   ============================================================ */
.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: none;
}
.cart-drawer.open { display: block; }
.cart-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15,23,42,.45);
	backdrop-filter: blur(3px);
}
.cart-drawer-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(400px, 94vw);
	background: #fff;
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	animation: slideInRtl .28s ease;
}
.cart-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid var(--border);
}
.cart-drawer-head b { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); }
.cart-drawer-items {
	flex: 1;
	overflow-y: auto;
	padding: 4px 22px;
}
.cart-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--surface-2);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.cart-item-name { font-weight: 600; font-size: .9rem; color: var(--text); display: block; line-height: 1.4; }
.cart-item-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.cart-item-price { color: var(--primary); font-weight: 700; font-size: .86rem; }
.cart-item-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}
.cart-item-qty .cq-btn { border: none; background: var(--surface); width: 26px; height: 26px; cursor: pointer; color: var(--primary); font-weight: 700; font-size: .95rem; }
.cart-item-qty .cq-val { min-width: 26px; text-align: center; font-size: .85rem; font-weight: 700; color: var(--text); }
.cart-item-remove { border: none; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; border-radius: 8px; width: 28px; height: 28px; }
.cart-item-remove:hover { color: var(--danger); background: #fef2f2; }
.cart-empty { text-align: center; color: var(--muted); padding: 44px 10px; font-weight: 600; line-height: 1.9; }
.cart-drawer-footer { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface); }
.cart-drawer-total { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 14px; color: var(--text); }
.cart-drawer-total .val { color: var(--primary); font-size: 1.05rem; }
.cart-drawer-actions { display: flex; gap: 10px; }
.cart-drawer-actions a { flex: 1; padding: 12px 8px; font-size: .88rem; }
@media (max-width: 480px) {
	.cart-drawer-actions { flex-direction: column; }
}


/* ===== Shop filter widgets (ported) ===== */
k {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.filter-section {
    margin-bottom: 20px;
}
.filter-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-title svg {
    width: 14px;
    height: 14px;
    color: var(--primary);
}
.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Collapsible category children */
.filter-cat-wrap { display: flex; align-items: center; flex-wrap: wrap; }
.filter-cat-wrap > .filter-checkbox { flex: 1; min-width: 0; }
.filter-cat-toggle {
    flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    padding: 4px; line-height: 1; color: var(--muted);
    transition: transform 200ms, color 150ms;
    display: flex; align-items: center; justify-content: center;
}
.filter-cat-toggle:hover { color: var(--primary); }
.filter-cat-wrap.open > .filter-cat-toggle { transform: rotate(180deg); }
.filter-cat-children {
    display: none;
    flex-basis: 100%;
    margin-right: 20px;
    margin-top: 4px;
    padding-right: 12px;
    border-right: 2px solid var(--border);
    flex-direction: column;
    gap: 4px;
}
.filter-cat-wrap.open > .filter-cat-children { display: flex; }
.filter-cat-child { font-size: 11px; }
.filter-empty { font-size: 12px; color: var(--muted); margin: 4px 0; }
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 3px 0;
    transition: color 150ms;
}
.filter-checkbox:hover {
    color: var(--primary);
}
.filter-checkbox input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 150ms;
}
.filter-checkbox input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.filter-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 4.5px;
    width: 4px;
    height: 8px;
    border: solid var(--bg);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.filter-count {
    color: var(--muted);
    font-size: 11px;
    margin-right: auto;
}
.filter-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0 16px;
}

/* ===== ROMA WIDGETS (product categories) ===== */
.widget_roma_product_categories {
    margin-bottom: 20px;
}
.widget_roma_product_categories .widget-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}
.roma-brand-list,
.roma-product-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.roma-brand-list li a,
.roma-product-cats li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    line-height: 1.4;
}
.roma-brand-list li a:hover,
.roma-product-cats li a:hover {
    background: var(--surface);
    color: var(--primary);
}
.roma-brand-list .count,
.roma-product-cats .count {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.price-range-wrap {
    padding: 4px 0;
}
.price-slider-container {
    position: relative;
    height: 24px;
    margin-bottom: 10px;
}
.price-slider-track {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
}
.price-slider-range {
    position: absolute;
    top: 10px;
    height: 4px;
    background: var(--primary);
    border-radius: 2px;
}
.price-slider-container input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    pointer-events: none;
    z-index: 2;
}
.price-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--surface-elevated);
    border: 2px solid var(--primary);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: var(--shadow-sm);
    transition: transform 150ms, box-shadow 150ms;
}
.price-slider-container input[type="range"]::-webkit-slider-thumb:hover {
    
    box-shadow: var(--shadow-md);
}
.price-slider-container input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--surface-elevated);
    border: 2px solid var(--primary);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: var(--shadow-sm);
}
.price-inputs {
    display: flex;
    gap: 8px;
}
.price-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.price-input-label {
    font-size: 10px;
    color: var(--muted);
}
.price-input {
    width: 100%;
    padding: 5px 8px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    outline: none;
    text-align: center;
    font-family: 'Vazirmatn', 'Inter', sans-serif;
    transition: border-color 150ms;
}
.price-input:focus {
    border-color: var(--border-focus);
}
.filter-reset {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 150ms;
    margin-top: 4px;
    font-family: 'Vazirmatn', 'Inter', sans-serif;
}
.filter-reset:hover {
    background: var(--danger);
    color: var(--bg);
}
.price-range-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px;
}
.star-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.star-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text);
}
.star-option input[type="radio"] {
    accent-color: var(--primary);
}
.star-icons {
    display: inline-flex;
    gap: 2px;
    margin-right: auto;
}
.star-icons svg {
    width: 14px;
    height: 14px;
}
.star-icons svg.filled {
    fill: #f59e0b;
    stroke: #f59e0b;
}
.star-icons svg.empty {
    fill: none;
    stroke: var(--border);
}
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44,36,22,0.4);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
}
.sidebar-overlay.open {
    opacity: 1;
    pointer-events: all;
}


/* Mixed-language product titles: Latin names go LTR/left-aligned */
.product-name[dir="ltr"],
.pd-title[dir="ltr"] {
	direction: ltr;
	text-align: left;
	font-family: var(--font-ltr);
}

/* Descriptions whose first 3 words are English */
.pd-desc[dir="ltr"],
.product-description[dir="ltr"] {
	direction: ltr;
	text-align: left;
}

/* ===== ABOUT PAGE (ported) ===== */
.about-hero { background: var(--surface); padding: 64px 0 48px; text-align: center; }
.page-tag { display: inline-block; font-size: 12px; color: var(--primary); background: var(--primary-50); border-radius: 999px; padding: 5px 14px; margin-bottom: 10px; }
.about-hero-title { font-size: 32px; font-weight: 800; color: var(--text); font-family: var(--font-display); margin: 0 0 12px; }
.about-hero-desc { font-size: 15px; color: var(--muted); max-width: 640px; margin: 0 auto; line-height: 1.8; }
.about-stats { display: flex; justify-content: center; gap: 48px; margin-top: 40px; flex-wrap: wrap; }
.about-stat { text-align: center; }
.about-stat-val { font-size: 28px; font-weight: 800; color: var(--primary); font-family: var(--font-display); }
.about-stat-lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }
.about-section { padding: 56px 16px; }
.about-section-title { font-size: 24px; font-weight: 800; color: var(--text); font-family: var(--font-display); margin: 0 0 28px; }
.mission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.mission-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; text-align: center; }
.mission-icon { font-size: 36px; margin-bottom: 12px; }
.mission-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.mission-card p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
.timeline { position: relative; max-width: 700px; margin: 0 auto; padding-right: 24px; }
.timeline::before { content: ''; position: absolute; right: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding: 0 24px 32px 0; }
.timeline-dot { position: absolute; right: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--border); }
.timeline-year { font-size: 18px; font-weight: 800; color: var(--primary); font-family: var(--font-display); margin-bottom: 4px; }
.timeline-content h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.timeline-content p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.7; }
.partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.partner-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.partner-name { font-size: 13px; font-weight: 600; color: var(--text); }
.about-cta { background: var(--gold-soft); padding: 56px 0; text-align: center; }
.about-cta h2 { font-size: 26px; font-weight: 700; color: var(--text); font-family: var(--font-display); margin: 0 0 8px; }
.about-cta p { font-size: 14px; color: var(--muted); max-width: 480px; margin: 0 auto 24px; }
.about-cta-btn { display: inline-block; padding: 12px 32px; background: var(--primary); color: #fff !important; border-radius: var(--radius); font-size: 14px; font-weight: 600; text-decoration: none; transition: all 200ms; }
.about-cta-btn:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* ===== REQUEST PAGE (ported) ===== */
.request-hero { text-align: center; margin-bottom: 40px; }
.request-title { font-size: 30px; font-weight: 800; color: var(--text); font-family: var(--font-display); margin: 8px 0 12px; }
.request-desc { font-size: 14px; color: var(--muted); max-width: 580px; margin: 0 auto; line-height: 1.8; }
.request-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; }
.request-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.roma-form .form-group { margin-bottom: 18px; }
.roma-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.roma-form .req { color: var(--danger); }
.roma-form input[type="text"],
.roma-form input[type="tel"],
.roma-form textarea {
	width: 100%; box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-sm);
	font-family: inherit; font-size: 13px;
	background: var(--bg); color: var(--text);
	outline: none; resize: vertical;
	transition: border-color 150ms, box-shadow 150ms;
}
.roma-form input:focus, .roma-form textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-50);
}
.roma-form input[type="file"] { font-size: 13px; color: var(--muted); }
.request-page .btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 32px;
	background: var(--primary); color: #fff !important;
	border: none; border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
	transition: all 200ms;
}
.request-page .btn-primary:hover { background: var(--primary-dark); }
.request-page .btn-primary:disabled { opacity: 0.6; cursor: wait; }
.request-form-msg { margin-top: 16px; font-size: 13px; padding: 12px 16px; border-radius: var(--radius-sm); display: none; }
.request-form-msg.request-form-success, .request-form-msg.request-form-error { display: block; }
.request-form-success { background: #d4f5e0; color: #1b7a3e; }
.request-form-error { background: #fae3e3; color: #c44747; }
.request-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; height: fit-content; }
.request-sidebar-title { font-size: 16px; font-weight: 700; color: var(--text); font-family: var(--font-display); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.request-info-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--border); transition: opacity 150ms; }
.request-info-item:last-child { border-bottom: 0; }
.request-info-item:hover { opacity: 0.7; }
.request-info-icon { font-size: 24px; flex-shrink: 0; }
.request-info-label { font-size: 12px; color: var(--muted); }
.request-info-val { font-size: 14px; color: var(--text); font-weight: 500; }

@media (max-width: 768px) {
	.request-grid { grid-template-columns: 1fr; }
	.about-stats { gap: 24px; }
}
@media (max-width: 600px) {
	.about-hero-title, .request-title { font-size: 24px; }
}

/* ===== Cart loading states ===== */
.is-loading {
	pointer-events: none;
	position: relative;
}
.is-loading > * {
	visibility: hidden;
}
.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 15px;
	height: 15px;
	margin: auto;
	border: 2px solid rgba(30, 58, 138, .18);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: roma-spin .7s linear infinite;
}
.btn-primary.is-loading::after,
.single_add_to_cart_button.is-loading::after {
	border-color: rgba(255, 255, 255, .35);
	border-top-color: #fff;
}

/* Drawer dims + locks while a cart request is in flight */
.cart-drawer-panel.busy .cart-drawer-items {
	opacity: .45;
	pointer-events: none;
	transition: opacity 150ms;
}

/* ===== Floating action button — "curator medallion" ===== */
.roma-fab {
	position: fixed;
	z-index: var(--fab-z, 9999);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	bottom: var(--fab-bottom, 24px);
	right: var(--fab-right, 24px);
	/* The wrapper box spans the (hidden) channel area — let clicks pass
	   through to the page; children re-enable their own hit-testing. */
	pointer-events: none;
}
.roma-fab-toggle { pointer-events: auto; }
.roma-fab:not([data-open="1"]) .roma-fab-channels { visibility: hidden; }

/* Channels: circular icon + hover label chip, staggered reveal */
.roma-fab-channels {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.roma-fab-channel {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	outline: none;
}
.roma-fab-channel-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--bg);
	color: var(--primary);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 180ms, color 180ms, border-color 180ms, transform 180ms;
}
.roma-fab-channel-icon svg {
	width: 19px;
	height: 19px;
}
.roma-fab-channel:hover .roma-fab-channel-icon,
.roma-fab-channel:focus-visible .roma-fab-channel-icon {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
	transform: scale(1.08);
	box-shadow: var(--shadow-md);
}
.roma-fab-channel-text {
	background: rgba(15, 23, 42, .92);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 6px 13px;
	border-radius: 8px;
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 180ms, transform 180ms;
	pointer-events: none;
}
.roma-fab-channel:hover .roma-fab-channel-text,
.roma-fab[data-open="1"] .roma-fab-channel-text {
	opacity: 1;
	transform: none;
}
/* Staggered entrance */
.roma-fab-channel {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px) scale(.9);
	transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}
.roma-fab[data-open="1"] .roma-fab-channel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}
.roma-fab[data-open="1"] .roma-fab-channel:nth-child(1) { transition-delay: .04s; }
.roma-fab[data-open="1"] .roma-fab-channel:nth-child(2) { transition-delay: .09s; }
.roma-fab[data-open="1"] .roma-fab-channel:nth-child(3) { transition-delay: .14s; }
.roma-fab[data-open="1"] .roma-fab-channel:nth-child(4) { transition-delay: .19s; }
.roma-fab[data-open="1"] .roma-fab-channel:nth-child(5) { transition-delay: .24s; }

/* Toggle: navy medallion with gold ring + soft pulse */
.roma-fab-toggle {
	position: relative;
	width: var(--fab-size, 58px);
	height: var(--fab-size, 58px);
	border-radius: 50%;
	border: 2px solid var(--gold);
	background: radial-gradient(circle at 32% 28%, var(--primary-light), var(--primary) 58%, var(--primary-dark));
	color: var(--gold);
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: transform 250ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms;
}
.roma-fab-toggle::before {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid var(--gold);
	opacity: 0;
	animation: fab-pulse 2.8s ease-out infinite;
}
@keyframes fab-pulse {
	0%   { transform: scale(.92); opacity: .55; }
	70%  { transform: scale(1.22); opacity: 0; }
	100% { transform: scale(1.22); opacity: 0; }
}
.roma-fab-toggle:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}
.roma-fab-toggle:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 4px;
}
.roma-fab-toggle svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 44%;
	height: 44%;
	transition: opacity 200ms, transform 280ms cubic-bezier(.34, 1.56, .64, 1);
}
.roma-fab-toggle .fab-ic-close {
	opacity: 0;
	transform: rotate(-90deg) scale(.4);
}
.roma-fab[data-open="1"] .roma-fab-toggle::before {
	display: none;
}
.roma-fab[data-open="1"] .roma-fab-toggle .fab-ic-chat {
	opacity: 0;
	transform: rotate(90deg) scale(.4);
}
.roma-fab[data-open="1"] .roma-fab-toggle .fab-ic-close {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.roma-fab-toggle::before { animation: none; opacity: .35; }
	.roma-fab-channel,
	.roma-fab-toggle,
	.roma-fab-toggle svg,
	.roma-fab-channel-text { transition: none; }
}

/* ===== SPP gallery: dim main image while swapping + hover zoom ===== */
#pd-main-img {
	transition: opacity 180ms ease, transform 150ms ease;
}
#pd-main-img.is-swapping {
	opacity: .3;
}
@media (hover: hover) {
	.pd-main-img { overflow: hidden; cursor: zoom-in; }
	.pd-main-img.is-zoomed { cursor: zoom-in; }
	.pd-main-img.is-zoomed #pd-main-img { transform: scale(2.1); }
}

/* ===== SPP gallery lightbox ===== */
.pd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(10, 15, 30, .9);
	backdrop-filter: blur(4px);
}
.pd-lightbox.open { display: flex; }
.pd-lb-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.pd-lb-stage img {
	max-width: min(1100px, 92vw);
	max-height: 84vh;
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
	animation: pdLbIn .22s ease;
}
@keyframes pdLbIn {
	from { opacity: 0; transform: scale(.97); }
}
.pd-lb-close,
.pd-lb-arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: background .18s ease;
	backdrop-filter: blur(2px);
	z-index: 2;
}
.pd-lb-close:hover,
.pd-lb-arrow:hover { background: rgba(255, 255, 255, .3); }
.pd-lb-close { position: absolute; top: 18px; left: 18px; }
.pd-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.pd-lb-prev { left: 16px; }
.pd-lb-next { right: 16px; }
.pd-lb-dots {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}
.pd-lb-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .38);
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
.pd-lb-dot.active { background: #fff; transform: scale(1.15); }
@media (max-width: 720px) {
	.pd-lb-arrow { width: 38px; height: 38px; }
	.pd-lb-prev { left: 8px; }
	.pd-lb-next { right: 8px; }
	.pd-lb-close { top: 12px; left: 12px; }
}

/* ===== Shop filter loading state ===== */
.product-grid { position: relative; min-height: 220px; }
.product-grid.is-loading { pointer-events: none; }
.product-grid.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 44px;
	height: 44px;
	margin: auto;
	border: 3px solid var(--border);
	border-top-color: var(--primary);
	border-radius: 50%;
	z-index: 6;
	animation: roma-spin .7s linear infinite;
}

/* ===== Dynamic shop pagination (client-rendered) ===== */
.shop-pagination button.page-numbers {
	cursor: pointer;
	font-family: inherit;
}
.shop-pagination button.page-numbers.disabled {
	opacity: .4;
	pointer-events: none;
}