/*
 * catalog.css — avloon-storefront catalog surfaces: A's product card on every native loop (catalog_skin,
 * body.avs-skin), the native /shop/ head and logo strips (shop, [data-avl-sf=shop]), the crumbs strip and archive
 * tweaks (category, search), listing pages ([data-avl-sf="pages:listings"]) and the light carousels.
 * Values ported per component from the compiled Elementor CSS of 11656, 12376, 519, 11609/11644 and 11034.
 * Logical properties throughout, except the card border `0 3px 3px 0`, which Elementor emitted physically on /en/ too.
 * Per-request column counts and backgrounds come from area `catalog` as inline CSS (Catalog\Assets).
 */

/* ---------------------------------------------------------------- contract grids: columns per device */
.avs-grid--c1 ul.products { --woocommerce-grid-columns: 1; }
.avs-grid--c2 ul.products { --woocommerce-grid-columns: 2; }
.avs-grid--c3 ul.products { --woocommerce-grid-columns: 3; }
.avs-grid--c4 ul.products { --woocommerce-grid-columns: 4; }
.avs-grid--c5 ul.products { --woocommerce-grid-columns: 5; }
.avs-grid--c6 ul.products { --woocommerce-grid-columns: 6; }
.avs-grid--c7 ul.products { --woocommerce-grid-columns: 7; }
.avs-grid--c8 ul.products { --woocommerce-grid-columns: 8; }
@media (max-width: 1024px) {
	.avs-grid--t1 ul.products { --woocommerce-grid-columns: 1; }
	.avs-grid--t2 ul.products { --woocommerce-grid-columns: 2; }
	.avs-grid--t3 ul.products { --woocommerce-grid-columns: 3; }
	.avs-grid--t4 ul.products { --woocommerce-grid-columns: 4; }
	.avs-grid--t5 ul.products { --woocommerce-grid-columns: 5; }
	.avs-grid--t6 ul.products { --woocommerce-grid-columns: 6; }
	.avs-grid--t7 ul.products { --woocommerce-grid-columns: 7; }
	.avs-grid--t8 ul.products { --woocommerce-grid-columns: 8; }
}
@media (max-width: 767px) {
	.avs-grid--m1 ul.products { --woocommerce-grid-columns: 1; }
	.avs-grid--m2 ul.products { --woocommerce-grid-columns: 2; }
	.avs-grid--m3 ul.products { --woocommerce-grid-columns: 3; }
	.avs-grid--m4 ul.products { --woocommerce-grid-columns: 4; }
}

/* ---------------------------------------------------------------- N7 card (catalog_skin) */
body.avs-skin ul.products { --woocommerce-products-gutter: 10px; }
body.avs-skin ul.products li.product .rey-productInner {
	border-style: solid;
	border-color: #E5E5E5;
	border-width: 0 3px 3px 0; /* physical on purpose: A's Elementor output, the same on /en/ */
	border-radius: 10px;
	padding: 0 0 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.09);
	background-color: #FFFFFF;
}
body.avs-skin ul.products li.product .rey-productInner:hover { border-color: #000000; }
body.avs-skin .rey-wc-skin--proto .rey-loopDetails { background-color: #FFFFFF; }
body.avs-skin ul.products li.product .add_to_cart_button { color: #FFFFFF; background-color: #000000; }
@media (max-width: 767px) {
	body.avs-skin ul.products { --woocommerce-products-gutter: 8px; }
}

/* 0.2.1 CA-8: the card state per context, for the shop grid, the home rows (.avs-prow) and the PDP related row,
 * whether or not body.avs-skin is printed (home.css / pdp.css can drop their own button rules). A's f94121e button
 * colours at every width. From 1025 px, the heart and the «جديد» badge stay hidden until the card is hovered (or
 * holds the keyboard focus), as Rey's proto skin does on A in every context. The button opacity is left to Rey on
 * purpose: in the before shots the same markup reads #A5A5A5 on / and #4E4E4E on /en/ (a capture of Rey's fade,
 * not a rule), see notes/fix-0.2.1-catalog.md. */
body.avs-shop ul.products li.product .add_to_cart_button,
.avs-prow ul.products li.product .add_to_cart_button,
.avs-pdp-related ul.products li.product .add_to_cart_button { color: #FFFFFF; background-color: #000000; }
@media (min-width: 1025px) {
	body.avs-shop ul.products li.product .rey-wishlistBtn,
	.avs-prow ul.products li.product .rey-wishlistBtn,
	.avs-pdp-related ul.products li.product .rey-wishlistBtn,
	body.avs-shop ul.products li.product .rey-new-badge,
	.avs-prow ul.products li.product .rey-new-badge,
	.avs-pdp-related ul.products li.product .rey-new-badge { opacity: 0; }
	body.avs-shop ul.products li.product:is(:hover, :focus-within) .rey-wishlistBtn,
	.avs-prow ul.products li.product:is(:hover, :focus-within) .rey-wishlistBtn,
	.avs-pdp-related ul.products li.product:is(:hover, :focus-within) .rey-wishlistBtn,
	body.avs-shop ul.products li.product:is(:hover, :focus-within) .rey-new-badge,
	.avs-prow ul.products li.product:is(:hover, :focus-within) .rey-new-badge,
	.avs-pdp-related ul.products li.product:is(:hover, :focus-within) .rey-new-badge { opacity: 1; }
}

/* offers cards (519 grid 748b9e2): no box, red price, no discount badge */
.avs-grid--offers ul.products { --woocommerce-products-gutter: 15px; }
.avs-grid--offers ul.products li.product { --link-color: #000000; }
.avs-grid--offers ul.products li.product .rey-productThumbnail { --woocomerce-thpos-distance: 15px; }
.avs-grid--offers ul.products li.product .rey-productInner,
body.avs-skin .avs-grid--offers ul.products li.product .rey-productInner {
	border-width: 0;
	border-radius: 0;
	padding: 0 0 20px;
	box-shadow: none;
	background-color: transparent;
}
.avs-grid--offers ul.products li.product .price {
	color: #D70000;
	font-size: 13px;
	line-height: 10px;
	letter-spacing: 1.5px;
	word-spacing: 0;
}
.avs-grid--offers ul.products li.product .rey-new-badge { font-size: 10px; }
.avs-grid--offers .rey-discount { display: none !important; }
.avs-grid--offers .woocommerce-loop-product__title a { line-height: 1.6em; }
@media (max-width: 767px) {
	.avs-grid--offers ul.products li.product .price { font-size: 15px; line-height: 0.8em; word-spacing: 0.3em; }
	.avs-grid--offers ul.products li.product .rey-productThumbnail { --woocomerce-thpos-distance: 5px; }
	.avs-grid--offers .woocommerce-loop-product__title a { font-size: 20px; line-height: 1.5em; letter-spacing: 0.7px; }
}

/* ---------------------------------------------------------------- boxed archive content (0.2.1 CA-1, CA-4)
 * A boxed the shop and the category to 1250 px inside a full-width page (rey-cwidth--full): content x 110–1330 at
 * 1440. Phones: A's cards start 10 px from the screen edge (Rey's container gives 14). */
@media (min-width: 768px) {
	body.avs-shop .rey-siteContainer,
	body.avs-category .rey-siteContainer {
		box-sizing: border-box;
		max-width: 1250px;
		margin-inline: auto;
		padding-inline: 15px;
	}
	body.avs-shop .rey-siteRow,
	body.avs-category .rey-siteRow { margin-inline: 0; }
}
@media (min-width: 1026px) {
	body.avs-shop { --woocommerce-sidebar-size: 23%; } /* A's filter box ≈ 282 px of the 1220 px row; Rey's 16% gave 195 */
}
@media (max-width: 767px) {
	body.avs-shop .rey-siteContainer,
	body.avs-category .rey-siteContainer { padding-inline: 10px; }
}

/* ---------------------------------------------------------------- shop head (surface shop) */
.avs-shop-head { width: 100%; }
.avs-shop-head__inner {
	box-sizing: border-box;
	max-width: 1240px; /* A's 1250 box minus its 10 px gutters: 1220 px of content */
	margin-inline: auto;
	padding-inline: 10px;
}
.avs-shop-head__band { background-color: #000000; padding-block: 40px; }
.avs-shop-head__title { margin: 0; color: #FFFFFF; font-family: var(--avs-din, "DINNextLTArabic", sans-serif); font-weight: 700; line-height: 1; }
.avs-shop-head__title--plain { color: #000000; padding-block-start: 25px; }
.avs-shop-head__products { margin-block-start: 10px; padding-block-start: 25px; }
.avs-shop-head__subtitle { margin: 0; color: #000000; font-family: var(--avs-din, "DINNextLTArabic", sans-serif); font-weight: 600; line-height: 1; }
/* A: heading → 20 px widget gap → 10 px row margin → grid (30); load-more 30 px under the cards (Rey's nav: 70) */
body.avs-shop .rey-siteContainer { padding-block: 30px 47px; }
body.avs-shop .rey-ajaxLoadMore { margin-block-start: 24px; }
body.avs-shop--nohead .woocommerce-products-header { display: none; }
body.avs-shop .shop-sidebar .__checkbox { margin-inline-end: 8px !important; }
@media (min-width: 1026px) {
	body.avs-shop .shop-sidebar .rey-ecommSidebar,
	body.avs-lp-page .avs-lp__sidebar .rey-ecommSidebar {
		box-sizing: border-box;
		padding: 20px;
		border: 1px solid #DBDBDB;
		border-radius: 5px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
		background-color: #FFFFFF;
	}
}
@media (max-width: 1024px) {
	body.avs-shop .rey-siteContainer { padding-block-end: 27px; }
}
@media (max-width: 767px) {
	body.avs-shop .rey-siteMain ul.products { margin-block-start: 25px; } /* A's grid widget margin ≤767 */
}

/* loop header modes (A: none on shop, an empty one on category and search) */
body.avs-shop--lh-hidden .rey-loopHeader,
body.avs-category--lh-hidden .rey-loopHeader,
body.avs-search--lh-hidden .rey-loopHeader,
body.avs-shop--lh-hidden .woocommerce-result-count,
body.avs-shop--lh-hidden .woocommerce-ordering,
body.avs-category--lh-hidden .woocommerce-result-count,
body.avs-category--lh-hidden .woocommerce-ordering,
body.avs-search--lh-hidden .woocommerce-result-count,
body.avs-search--lh-hidden .woocommerce-ordering { display: none; }
body.avs-shop--lh-filter_button .rey-loopHeader > :not(.rey-filterBtn),
body.avs-shop--lh-filter_button .woocommerce-result-count,
body.avs-shop--lh-filter_button .woocommerce-ordering,
body.avs-category--lh-filter_button .rey-loopHeader > :not(.rey-filterBtn),
body.avs-search--lh-filter_button .rey-loopHeader > :not(.rey-filterBtn) { display: none; }
@media (min-width: 1026px) {
	body.avs-shop--lh-filter_button .rey-loopHeader,
	body.avs-category--lh-filter_button .rey-loopHeader,
	body.avs-search--lh-filter_button .rey-loopHeader { display: none; }
}

/* ---------------------------------------------------------------- crumbs strip (category, 11609/11644) */
.avs-crumbs { display: block; }
.avs-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.avs-crumbs__item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-family: "RB", sans-serif; /* A's h4 headings 6ab4ce9 / 81a245a: RB is not loaded, so the fallback, bold */
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}
.avs-crumbs__item--current { color: #000000; font-family: var(--avs-din, "DINNextLTArabic", sans-serif); font-weight: 700; }
.avs-crumbs__home {
	display: block;
	width: 32px;
	height: auto;
	margin-block-start: -3px;
	margin-inline-end: 5px;
}
.avs-crumbs__sep {
	display: inline-flex;
	margin-inline: 5px;
	margin-block-end: -4px;
	color: #69727D; /* Elementor's default icon colour (A's 3ae5266 / fc6bb88 set none) */
	font-size: 12px;
}
.avs-crumbs__sep .avs-ico { width: 7.5px; height: 12px; } /* Font Awesome 5 solid chevron-left at 12 px (320 × 512) */
.avs-crumbs__link { color: inherit; text-decoration: none; }
.avs-crumbs__link:hover { text-decoration: underline; }
/* The crumbs chevron is not mirrored on /en/: A prints fa-chevron-left in both languages. */
html:not([dir="rtl"]) .avs-carousel__btn .avs-ico { transform: scaleX(-1); }

body.avs-category .avs-crumbs { padding-block-start: 35px; }
body.avs-category .woocommerce-products-header__title {
	margin-block-start: 20px;
	color: #000000;
	font-family: var(--avs-din, "DINNextLTArabic", sans-serif);
	font-weight: 700;
	line-height: 1; /* Elementor's heading line box */
}
/* A: H1 → 20 px widget gap → 50 px grid margin (+ the empty loop header on phones): ink to card 59 px / 78.5 css */
body.avs-category ul.products { margin-block-start: 70px; }
body.avs-category .rey-siteContainer { padding-block: 0 100px; }
@media (max-width: 767px) {
	body.avs-category ul.products { margin-block-start: 86px; }
}

/* ---------------------------------------------------------------- listing pages (pages:listings) */
.avs-lp__inner {
	box-sizing: border-box;
	max-width: 1250px;
	margin-inline: auto;
}
.avs-lp__title { margin: 0; color: #000000; font-weight: 700; }
.avs-lp__text { margin-block: 20px 0; }

/* 0.2.1 CA-11: post-519.css paints body.elementor-page-519 #FFFFFF; the seed leaves page_bg empty (Rey's #F7F7F7).
   An owner colour still wins: Assets prints body.avs-lp-page{background-color:…} inline, after this file. */
body.avs-lp-page--special-offers { background-color: #FFFFFF; }
.avs-lp--offers .avs-lp__head { padding-block: 20px 50px; }
.avs-lp--offers .avs-lp__title { color: #E30000; line-height: 1.4em; }
.avs-lp--offers .rey-breadcrumbs { margin-block-end: 20px; }
.avs-lp--cards-offers .avs-lp__body { padding-block-end: 80px; }
.avs-lp--cards-offers .avs-lp__grid > .woocommerce { margin-block-start: 27px; }
.avs-lp--cards-offers .avs-lp__body a { color: #070202; }
.avs-lp--cards-offers .avs-lp__body a:hover { color: #000000; }

.avs-lp--plain .avs-lp__head { padding-block-start: 35px; }
.avs-lp--plain .avs-lp__title { margin-block-start: 10px; }
.avs-lp--plain .avs-lp__body { padding-block-end: 100px; }
.avs-lp--plain .avs-crumbs__home { margin-block-start: -9px; }

.avs-lp__cols { display: flex; gap: 20px; margin-block-start: 25px; }
.avs-lp__sidebar { flex: 0 0 calc(25% - 10px); min-width: 0; }
.avs-lp__main { flex: 1 1 auto; min-width: 0; }
.avs-lp__sidebar .__checkbox { margin-inline-end: 8px !important; }

.avs-lp__band { background-color: var(--avs-band, #FAC86F); padding: 50px 10px 60px; }
.avs-lp--band .avs-lp__body { padding: 50px 10px 80px; }
.avs-lp__buttons-wrap { position: relative; margin-block-start: -25px; padding-inline: 10px; }
.avs-lp__buttons {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.avs-lp__btn-item { margin: 0; }
.avs-lp__btn {
	display: block;
	padding: 12px 24px;
	border-radius: 50px;
	background-color: #FFFFFF;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.28);
	color: #000000;
	font-size: 18px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}
.avs-lp__btn:hover { color: #000000; }

@media (max-width: 1024px) {
	.avs-lp--plain .avs-lp__head { padding-inline: 10px; }
	.avs-lp--plain .avs-lp__body { padding: 0 10px 80px; }
	body.avs-lp-page .avs-lp__sidebar .rey-ecommSidebar { padding: 20px 10px; }
}
@media (max-width: 767px) {
	.avs-lp__cols { display: block; }
	.avs-lp__band { padding: 30px 10px 50px; }
	.avs-lp__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.avs-lp--cards-offers .avs-lp__grid > .woocommerce { margin-block-start: 28px; }
}

/* load-more */
.avs-more { display: flex; justify-content: center; margin-block-start: 40px; }
.avs-more__btn {
	position: relative;
	padding: 6px 2px;
	border: 0;
	border-block-end: 2px solid currentColor;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.avs-more__btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.avs-more__btn[hidden] { display: none; }
.avs-lp--cards-offers .avs-more { margin-block-start: 57px; }
.avs-lp--cards-offers .avs-more__btn { color: #000000; border-radius: 0; font-size: 19px; }
@media (max-width: 767px) {
	.avs-lp--cards-offers .avs-more__btn { word-spacing: 0.1em; }
}

/* ---------------------------------------------------------------- carousels (strips, snap rows) */
.avs-strip__inner {
	box-sizing: border-box;
	max-width: 1240px;
	margin-inline: auto;
	margin-block-start: 10px;
	padding: 25px 10px;
}
.avs-strip__title { margin: 0 0 20px; color: #000000; font-family: var(--avs-din, "DINNextLTArabic", sans-serif); font-weight: 600; line-height: 1; }
.avs-strip__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--avs-h, 80px);
	padding: 20px 10px;
	border: 1px solid #E7E7E7;
	border-radius: 5px;
	background-color: #FFFFFF;
}
.avs-strip__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.avs-carousel { --avs-gap: 20px; position: relative; }
.avs-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.avs-carousel__viewport::-webkit-scrollbar { display: none; }
.avs-carousel__list {
	display: flex;
	gap: var(--avs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.avs-carousel__item,
.avs-row--snap ul.products > li.product {
	flex: 0 0 calc((100% - (var(--avs-per, 5) - 1) * var(--avs-gap)) / var(--avs-per, 5));
	min-width: 0;
	scroll-snap-align: start;
}
.avs-row--snap { --avs-gap: 10px; }
.avs-row--snap ul.products {
	display: flex !important;
	flex-wrap: nowrap;
	gap: var(--avs-gap);
	margin: 0;
	padding: 0;
}
.avs-row--snap ul.products::before,
.avs-row--snap ul.products::after { display: none !important; }
.avs-row--snap ul.products > li.product { float: none !important; width: auto !important; margin: 0 !important; }
.avs-carousel__btn {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000000;
	cursor: pointer;
	transform: translateY(-50%);
}
.avs-carousel__btn[hidden] { display: none; }
/* 4 px + the 6 px button padding = A's Swiper arrows 10 px inside the end boxes (glyph at x 126 / 1314 at 1440) */
.avs-carousel__btn--prev { inset-inline-start: 4px; }
.avs-carousel__btn--next { inset-inline-end: 4px; }
.avs-carousel__btn .avs-ico { width: 20px; height: 20px; }
.avs-carousel.is-rotating .avs-carousel__viewport { overflow: hidden; }

@media (max-width: 1024px) {
	.avs-carousel { --avs-gap: 10px; }
	.avs-carousel__item,
	.avs-row--snap ul.products > li.product { flex-basis: calc((100% - (var(--avs-per-t, 3) - 1) * var(--avs-gap)) / var(--avs-per-t, 3)); }
}
@media (max-width: 767px) {
	.avs-carousel__item,
	.avs-row--snap ul.products > li.product { flex-basis: calc((100% - (var(--avs-per-m, 2) - 1) * var(--avs-gap)) / var(--avs-per-m, 2)); }
	/* 0.2.1 CA-10: A's 13 px black chevrons, 10 px inside the end boxes, heavier than the 20 px desktop glyph */
	.avs-carousel__btn { width: 25px; height: 25px; }
	.avs-carousel__btn .avs-ico { width: 13px; height: 13px; }
	.avs-carousel__btn .avs-ico path { stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; }
}

/* ---------------------------------------------------------------- focus (keyboard only, decision 12) */
.avs-crumbs a:focus-visible,
.avs-strip a:focus-visible,
.avs-lp a:focus-visible,
.avs-more__btn:focus-visible,
.avs-carousel__btn:focus-visible,
.avs-carousel__viewport:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.avs-carousel__viewport { scroll-behavior: auto; }
}