/*
 * Reem Store cards + filter bar (loaded only on skins with 'cards' => true).
 * Targets the real markup: Avada Post Cards on category pages (li.post-card.product,
 * .fusion-woo-product-image, .fusion-title-heading, .fusion-woo-price-tb) and the
 * WooCommerce grid used on the landing page (ul.products li.product).
 * Product photos are 1000x1000 squares on white, so nothing here crops them.
 */

/* ---------- Equal-height cards: titles max 2 lines ---------- */
/* 6 Nov: not the ON SALE / NEW ARRIVAL badge titles (pink ribbon column), so badges keep their size. */
body.altaj-skin #main :is(.post-card.product .fusion-title-heading:not([style*="ffb5b5" i] .fusion-title-heading), li.product .product-title, li.product .woocommerce-loop-product__title) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	line-height: 1.4 !important;
	min-height: 2.8em;
}

/* ---------- Second photo on hover (only exists when the product has one) ---------- */
body.altaj-skin #main .altaj-rc-media {
	position: relative;
	display: block;
}
body.altaj-skin #main .altaj-rc-hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
@media (hover: hover) {
	body.altaj-skin #main li.product:hover .altaj-rc-hover {
		opacity: 1;
	}
}

/* ---------- Colour swatches ---------- */
body.altaj-skin #main .altaj-rc-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 26px;
	margin: 4px 0 6px;
}
body.altaj-skin #main .altaj-rc-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	text-decoration: none;
}
body.altaj-skin #main .altaj-rc-swatch-dot {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--altaj-soft);
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
	transition: box-shadow .15s ease;
}
body.altaj-skin #main a.altaj-rc-swatch:is(:hover, :focus-visible) .altaj-rc-swatch-dot {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--altaj-surface), 0 0 0 3px var(--altaj-text);
}
body.altaj-skin #main a.altaj-rc-swatch:focus-visible {
	outline: none;
}
/* Out-of-stock colour: greyed with a strike, like the product page (altaj-oos-variations). */
body.altaj-skin #main .altaj-rc-swatch.is-oos {
	cursor: not-allowed;
	opacity: .45;
	position: relative;
}
body.altaj-skin #main .altaj-rc-swatch.is-oos .altaj-rc-swatch-dot {
	filter: grayscale(100%);
}
body.altaj-skin #main .altaj-rc-swatch.is-oos::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 1px;
	background: var(--altaj-text);
	transform: rotate(-45deg);
}
body.altaj-skin #main .altaj-rc-more {
	font-size: 12px;
	line-height: 26px;
	padding: 0 4px;
	color: var(--altaj-muted) !important;
	text-decoration: none;
}

/* ---------- Filter bar (category / brand pages) ---------- */
body.altaj-skin #main .altaj-rc-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	width: 100%;
	margin: 0 0 22px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--altaj-border);
	font-family: var(--altaj-font-body);
}
body.altaj-skin #main .altaj-rc-filters[hidden] {
	display: none;
}
body.altaj-skin #main .altaj-rc-group {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
body.altaj-skin #main .altaj-rc-group-label {
	flex: 0 0 auto;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--altaj-muted);
}
body.altaj-skin #main .altaj-rc-chips {
	display: flex;
	gap: 6px;
	min-width: 0;
}
body.altaj-skin #main .altaj-rc-chip {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--altaj-border);
	border-radius: 999px;
	background: var(--altaj-surface);
	color: var(--altaj-text) !important;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
body.altaj-skin #main .altaj-rc-chip:hover {
	border-color: var(--altaj-text);
}
body.altaj-skin #main .altaj-rc-chip.is-active {
	background: var(--altaj-button-bg);
	border-color: var(--altaj-button-bg);
	color: var(--altaj-button-text) !important;
}
body.altaj-skin #main .altaj-rc-clear {
	font-size: 13px;
	color: var(--altaj-link) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.altaj-skin.rtl #main :is(.altaj-rc-group-label, .altaj-rc-chip) {
	letter-spacing: normal;
}

/* Phones: one row per group, scrolling sideways inside the row (never the page). */
@media (max-width: 800px) {
	body.altaj-skin #main .altaj-rc-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	body.altaj-skin #main .altaj-rc-chips {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	body.altaj-skin #main .altaj-rc-chips::-webkit-scrollbar {
		display: none;
	}
	body.altaj-skin #main .altaj-rc-group-label {
		width: 64px;
	}
	body.altaj-skin #main .altaj-rc-chip {
		min-height: 38px;
	}
}

/* ---------- Category bar + Sort by (6 Nov) ---------- */
body.altaj-skin #main .altaj-rc-bar {
	display: flex;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	background: none;
}
body.altaj-skin #main .altaj-rc-bar[hidden] {
	display: none;
}
body.altaj-skin #main .altaj-rc-bar .altaj-rc-cats {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}
body.altaj-skin #main .altaj-rc-bar .altaj-rc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 16px;
	border: 1px solid var(--altaj-border);
	border-radius: 999px;
	background: var(--altaj-surface);
	color: var(--altaj-text) !important;
	font-size: 14px;
	white-space: nowrap;
	text-decoration: none;
}
body.altaj-skin #main .altaj-rc-bar .altaj-rc-chip:is(:hover, :focus-visible) {
	border-color: var(--altaj-link);
}
body.altaj-skin #main .altaj-rc-bar .altaj-rc-chip.is-active {
	background: var(--altaj-link);
	border-color: var(--altaj-link);
	color: #fff !important;
}
body.altaj-skin #main .altaj-rc-bar .altaj-rc-sort {
	flex: 0 0 auto;
	margin: 0;
}
body.altaj-skin #main .altaj-rc-bar .altaj-rc-sort select {
	height: 38px;
	padding: 0 32px 0 12px;
	border: 1px solid var(--altaj-border);
	border-radius: 999px;
	background-color: var(--altaj-surface);
	color: var(--altaj-text);
	font-size: 13px;
	cursor: pointer;
}
body.altaj-skin.rtl #main .altaj-rc-bar .altaj-rc-sort select {
	padding: 0 12px 0 32px;
}
@media (max-width: 800px) {
	body.altaj-skin #main .altaj-rc-bar {
		flex-wrap: wrap;
	}
	body.altaj-skin #main .altaj-rc-bar .altaj-rc-cats {
		flex: 0 0 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}
	body.altaj-skin #main .altaj-rc-bar .altaj-rc-cats::-webkit-scrollbar {
		display: none;
	}
}


/* ---------- Category bar: slim pills on every screen (6 Nov, 2) ---------- */
body.altaj-skin #main .altaj-rc-bar .altaj-rc-chip {
	flex: 0 0 auto !important;
	height: 38px !important;
	min-height: 0 !important;
	line-height: 1 !important;
	padding: 0 16px !important;
	margin: 0 !important;
	width: auto !important;
}
@media (max-width: 800px) {
	body.altaj-skin #main .altaj-rc-bar .altaj-rc-sort {
		flex: 0 0 auto;
	}
	body.altaj-skin #main .altaj-rc-bar .altaj-rc-chip {
		height: 36px !important;
		padding: 0 14px !important;
		font-size: 13px !important;
	}
}

/* ---------- Phones: Sort by on its own line under the category buttons (6 Nov, 3) ---------- */
@media (max-width: 800px) {
	body.altaj-skin #main .altaj-rc-bar {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		padding-bottom: 0 !important;
		border-bottom: 0 !important;
	}
	body.altaj-skin #main .altaj-rc-bar[hidden] {
		display: none !important;
	}
	body.altaj-skin #main .altaj-rc-bar .altaj-rc-sort {
		display: block !important;
		width: 100% !important;
		visibility: visible !important;
	}
	body.altaj-skin #main .altaj-rc-bar .altaj-rc-sort select {
		display: block !important;
		width: 100% !important;
		max-width: 220px !important;
	}
}
@media (max-width: 800px) {
	body.altaj-skin #main .altaj-rc-bar {
		flex-wrap: nowrap !important;
		height: auto !important;
		max-height: none !important;
	}
	body.altaj-skin #main .altaj-rc-bar > * {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	body.altaj-skin #main .altaj-rc-bar .altaj-rc-cats {
		height: auto !important;
	}
}

/* ---------- 11 Nov: every Reem Store page uses the landing page's cards ----------
   Category pages, the Reem Store brand page and the landing page: one blush colour for the whole card, no frame,
   photos blended (multiply turns their white surround into the card colour), one "خصم X%" badge (the "تخفيض"
   ribbon is removed in PHP, altaj_brand_skins_reem_card_tags), "وصل حديثاً" on the photo corner, names on 2 lines
   so prices line up, card ends under the price. Rules copied from reem-landing.css (scope changed). */
body.altaj-skin-reemstore #main { --rl-burg: #8B3A4C; --rl-card: #F7EDE9; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .fusion-onsale { background: var(--rl-burg) !important; border-color: var(--rl-burg) !important; color: #fff !important; }
/* every frame the same size (10 Nov): even grid, all rows as tall as the tallest card, frame fills its cell */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) ul.fusion-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) ul.fusion-grid > .post-card { width: auto !important; max-width: none !important; display: flex !important; flex-direction: column; align-self: stretch !important; height: auto !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) ul.fusion-grid > .post-card > .fusion-column-wrapper { flex: 1 0 auto; height: auto !important; }
@media (max-width: 1024px) { body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) ul.fusion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 10 Nov, design 2 on this page only ("blend" option): one light-blush colour for the whole card (outer card, inner blocks,
   photo area), no beige frame, one badge (no "تخفيض" ribbon), no stock line. Photos are not edited: multiply turns their
   white surround into the card colour, so the photo's own container carries the card colour behind it. */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) { --rl-card: #F7EDE9; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper { border: 0 !important; background: var(--rl-card) !important; box-shadow: none !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-column-wrapper { background-color: var(--rl-card) !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card :has(> img) { background-color: var(--rl-card) !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card img,
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card img.altaj-rc-hover { mix-blend-mode: multiply; background-color: transparent !important; } /* 11 Nov: no own background on the photo: the layer behind it has the card colour (altaj-photo-fill), otherwise the photo's empty area is multiplied twice (darker band) */
/* top row: "وصل حديثاً" stays (products with the tag New), the "تخفيض" ribbon is removed in reem-landing.php; no empty row left behind */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper > .fusion-builder-row-inner:not(:has(.fusion-layout-column)) { display: none !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag > .fusion-column-wrapper { background-color: #8B3A4C !important; }
/* the tag row always on top (the shop card moves it below on small screens) */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper { display: flex !important; flex-direction: column !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper > .fusion-builder-row-inner:has(.altaj-rl-newtag) { order: -1 !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag .fusion-title-heading { color: #fff !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card p.stock { display: none !important; }

/* tighter cards (10 Nov): content starts at the top, smaller gaps around photo, title and price */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper { justify-content: flex-start !important; padding: 10px 10px 14px !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-builder-row-inner .fusion-column-wrapper { justify-content: flex-start !important; margin-top: 0 !important; transform: none !important; }
/* (the shop card shifts its content 50px down and slides it up on hover; on this page it stays in place, so no gap and no overflow) */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-builder-row-inner > .fusion-layout-column { margin-bottom: 6px !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-post-card-image { margin-top: 0 !important; margin-bottom: 10px !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title { margin-bottom: 6px !important; }

/* the shop card hides the old price; this page shows it struck through before the sale price */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .price del { display: block !important; visibility: visible !important; opacity: 1 !important; margin: 0 0 2px; text-decoration: line-through; line-height: 1.3; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .price del .amount, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .price del bdi { font-size: 15px !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) del, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) del .amount { color: #8a7f7b !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) ins .amount, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .price > .amount { color: var(--rl-burg) !important; }

/* 10 Nov, two sections (best sellers, new arrivals): cards end right under the price and badge */
/* the add-to-cart row only showed on mouse hover and kept ~50px empty under every price: removed on this page */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-builder-row-inner:has(.addToCart) { display: none !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper { padding-bottom: 10px !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-woo-price-tb { margin-bottom: 0 !important; }
/* the "وصل حديثاً" tag sits on the photo corner, so it adds no height and the prices stay in line */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper { position: relative !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper > .fusion-builder-row-inner:has(.altaj-rl-newtag) {
	position: absolute !important; top: 10px; inset-inline-start: 10px; z-index: 20 !important; width: auto !important; margin: 0 !important;
}
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag { width: auto !important; margin: 0 !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag > .fusion-column-wrapper { padding: 3px 10px !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag .fusion-title { margin: 0 !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag .fusion-title-heading { font-size: 13px !important; line-height: 1.5 !important; white-space: nowrap !important; }
/* names: up to 2 full lines (not one cut line), always 2 lines tall so long names never move the price */
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title:not(.altaj-rl-newtag *) .fusion-title-heading {
	white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden !important; height: 2.8em !important; min-height: 0 !important; line-height: 1.4 !important;
}
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title:not(.altaj-rl-newtag *) .fusion-title-heading a { white-space: normal !important; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title:not(.altaj-rl-newtag *) { font-size: 18px; }
body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title:not(.altaj-rl-newtag *) .fusion-title-heading { font-size: 18px !important; }

/* Phone */
@media (max-width: 767px) {
	/* less padding around the photo, so the photo is wider and the card shorter */
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) ul.fusion-grid > .post-card { padding: 4px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper { padding: 6px 6px 8px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-post-card-image { margin-bottom: 6px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title { margin-bottom: 4px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card > .fusion-column-wrapper > .fusion-builder-row-inner:has(.altaj-rl-newtag) { top: 6px; inset-inline-start: 6px; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag > .fusion-column-wrapper { padding: 2px 7px !important; }
	/* 11 Nov: the bag photo comes first on phones, then a short title and the button */
	/* the "add to cart" button only appears on mouse hover; phones have no hover, so it was blank space */
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-builder-row-inner:has(.addToCart) { display: none !important; }
	/* smaller card text on phone (10 Nov) */
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card h1, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card h2, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card h3, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card h4,
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title-heading, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title-heading a { font-size: 14px !important; line-height: 1.45 !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-title:not(.altaj-rl-newtag *) .fusion-title-heading { font-size: 14px !important; line-height: 1.4 !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .altaj-rl-newtag .fusion-title-heading { font-size: 11px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .price, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .price ins .amount, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .price > .amount,
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .price ins bdi, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .price > .amount bdi { font-size: 15px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .price del .amount, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .price del bdi { font-size: 12px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-onsale { font-size: 12px !important; padding: 2px 6px !important; }
	body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-text, body.altaj-skin-reemstore #main .fusion-post-cards:not(.awb-carousel) .post-card .fusion-text p { font-size: 11px !important; }
}

/* product page and carousels: blended photos too */
body.altaj-skin-reemstore #main .fusion-post-cards.awb-carousel .post-card .fusion-column-wrapper,
body.altaj-skin-reemstore #main .fusion-post-cards.awb-carousel .post-card :has(> img) { background-color: var(--rl-card) !important; border-color: transparent !important; }
body.altaj-skin-reemstore #main .fusion-post-cards.awb-carousel .post-card img { mix-blend-mode: multiply; }
body.altaj-skin-reemstore #main .altaj-more-from__item { background-color: var(--rl-card) !important; border-color: transparent !important; }
body.altaj-skin-reemstore #main .altaj-more-from__item :has(> img) { background-color: var(--rl-card) !important; }
body.altaj-skin-reemstore #main .altaj-more-from__item img { mix-blend-mode: multiply; }
body.altaj-skin-reemstore.single-product #main :is(.woocommerce-product-gallery, .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image, .flex-viewport, .fusion-woo-product-images, .avada-product-gallery, .avada-product-gallery-lightbox-wrapper, .swiper, .swiper-slide, .slides li, .flex-control-thumbs li):not(.post-card *) { background-color: #F6F1EA !important; } /* 11 Nov: not inside cards (the card photo blends onto the card colour) */ /* page colour: the slider is its own layer, so the photo blends against this */
body.altaj-skin-reemstore.single-product #main :is(.woocommerce-product-gallery, .fusion-woo-product-images, .avada-product-gallery) img,
body.altaj-skin-reemstore.single-product #main img.variation-swatch { mix-blend-mode: multiply; }

/* 11 Nov: the "X% Off" badge always on its own line under the price (Arabic already wrapped, English fitted on one
   line); a long old + new price wraps inside the card instead of overflowing */
body.altaj-skin-reemstore #main .post-card .fusion-woo-price-tb { flex-direction: column !important; align-items: center !important; row-gap: 4px; }
body.altaj-skin-reemstore #main .post-card .fusion-woo-price-tb .price { flex-wrap: wrap !important; justify-content: center !important; max-width: 100%; }
body.altaj-skin-reemstore #main .post-card .fusion-woo-price-tb .fusion-onsale { margin: 0 !important; }

/* ---------- 11 Nov: Reem Store product pages ---------- */
/* 1. PC: the title follows the page direction (right in Arabic, left in English), lined up with the brand name and price
   (the product layout fixes it to "left"). Phones keep the centred title. */
@media (min-width: 641px) {
	body.altaj-skin-reemstore.single-product #main .fusion-title .fusion-title-heading.title-heading-left { text-align: start !important; }
}
/* 2. PC: Tabby and Tamara one under the other, full column width and readable (altaj-custom-functions shrinks them to
   72% side by side on every product). Phones keep their size. */
@media (min-width: 641px) {
	body.altaj-skin-reemstore.single-product .fusion-woo-cart > #tabbyPromo,
	body.altaj-skin-reemstore.single-product .fusion-woo-cart > tamara-widget { zoom: .92; flex: 0 0 100%; width: 100%; max-width: 100%; }
}
/* 3. Description, additional information and reviews tabs: on the page colour, no white panel, no frame lines */
body.altaj-skin-reemstore.single-product #main .fusion-woo-tabs-tb { --awb-backgroundcolor: #F6F1EA; --awb-inactivecolor: #F6F1EA; --awb-bordercolor: transparent; }
body.altaj-skin-reemstore.single-product #main .fusion-woo-tabs-tb :is(.woocommerce-tabs, .wc-tabs, .wc-tabs li, .wc-tabs li a, .woocommerce-Tabs-panel) {
	background: #F6F1EA !important; border-color: transparent !important; box-shadow: none !important;
}
body.altaj-skin-reemstore.single-product #main .fusion-woo-tabs-tb .wc-tabs li.active a { color: #8B3A4C !important; box-shadow: inset -3px 0 0 #8B3A4C !important; }
html[dir="ltr"] body.altaj-skin-reemstore.single-product #main .fusion-woo-tabs-tb .wc-tabs li.active a { box-shadow: inset 3px 0 0 #8B3A4C !important; }

/* 4. "More from Reem Store": one carousel of landing-page cards (altaj_brand_skins_reem_more), 4 on PC, 2 on phones */
body.altaj-skin-reemstore #main .altaj-pp-more { max-width: 1200px; margin: 0 auto; padding: 40px 20px 48px; background: transparent; border: 0; }
/* the section sits in a flex row: without these it grows to the width of all 10 cards */
body.altaj-skin-reemstore #main .altaj-pp-more, body.altaj-skin-reemstore #main .altaj-pp-viewport, body.altaj-skin-reemstore #main .altaj-pp-more .fusion-post-cards { min-width: 0; width: 100%; flex: 1 1 100%; box-sizing: border-box; }
body.altaj-skin-reemstore #main .altaj-pp-more .altaj-more-from__head { margin-bottom: 18px; }
body.altaj-skin-reemstore #main .altaj-pp-viewport { position: relative; }
body.altaj-skin-reemstore #main .altaj-pp-more .fusion-post-cards:not(.awb-carousel) ul.fusion-grid {
	display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: calc((100% - 72px) / 4);
	grid-auto-rows: auto; gap: 24px !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 !important; padding: 0 !important; width: 100% !important;
}
body.altaj-skin-reemstore #main .altaj-pp-more ul.fusion-grid::-webkit-scrollbar { display: none; }
/* as on the landing page: every photo in the same square box; the all-time sold line small, grey, centred */
body.altaj-skin-reemstore #main .altaj-pp-more .post-card .fusion-post-card-image img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: contain; }
body.altaj-skin-reemstore #main .altaj-pp-more .altaj-rl-sold { width: 100%; margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: #7a6f6b; text-align: center; }
body.altaj-skin-reemstore #main .altaj-pp-more ul.fusion-grid > .post-card { scroll-snap-align: start; padding: 0 !important; margin: 0 !important; }
body.altaj-skin-reemstore #main .altaj-pp-arrow {
	position: absolute; top: 38%; z-index: 30; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center; background: #fff; color: #8B3A4C; box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
body.altaj-skin-reemstore #main .altaj-pp-arrow:hover:not(:disabled) { background: #8B3A4C; color: #fff; }
body.altaj-skin-reemstore #main .altaj-pp-arrow:disabled { opacity: .35; cursor: default; }
body.altaj-skin-reemstore #main .altaj-pp-fits .altaj-pp-arrow { display: none; }
body.altaj-skin-reemstore #main .altaj-pp-prev { inset-inline-start: -20px; }
body.altaj-skin-reemstore #main .altaj-pp-next { inset-inline-end: -20px; }
body.altaj-skin-reemstore #main .altaj-pp-prev svg { transform: scaleX(-1); }
html[dir="rtl"] body.altaj-skin-reemstore #main .altaj-pp-prev svg { transform: none; }
html[dir="rtl"] body.altaj-skin-reemstore #main .altaj-pp-next svg { transform: scaleX(-1); }
@media (max-width: 1024px) {
	body.altaj-skin-reemstore #main .altaj-pp-more .fusion-post-cards:not(.awb-carousel) ul.fusion-grid { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px !important; }
}
@media (max-width: 767px) {
	body.altaj-skin-reemstore #main .altaj-pp-more { padding: 28px 12px 32px; margin: 0 -18px; width: calc(100% + 36px); max-width: none; flex-basis: calc(100% + 36px); }
	body.altaj-skin-reemstore #main .altaj-pp-arrow { display: none; }
	body.altaj-skin-reemstore #main .altaj-pp-more .fusion-post-cards:not(.awb-carousel) ul.fusion-grid { grid-auto-columns: calc((100% - 12px) / 2.15); }
}