/* ==========================================================================
   Oasis Dry Fruits design system (child theme)
   Source: oasis-mockups-phase2.html
   Phase 1: tokens + ONE global product card
   Every WooCommerce loop is forced to the same Ecomus card layout in
   inc/product-card.php, so these rules hit identical markup everywhere:
   homepage, bestsellers, hampers, shop, categories, search, filters,
   related, upsells, cross-sells, header search suggestions.
   Font: keeps the site's existing DM Sans (Ecomus Customizer).
   ========================================================================== */

:root {
	--odf-brown: #3C2315;
	--odf-brown-dk: #2A180E;
	--odf-green: #4AB151;
	--odf-green-dk: #2F7D36;
	--odf-ivory: #F8F5EF;
	--odf-text: #29231F;
	--odf-muted: #6B625B;
	--odf-border: #E7E1D9;
	--odf-star: #E3A008;
	--odf-star-empty: #DDD5CB;
	--odf-white: #FFFFFF;

	--odf-radius: 14px;
	--odf-radius-sm: 8px;
	--odf-shadow-hover: 0 8px 24px rgba(60, 35, 21, .10);

	--odf-card-pad: 14px;
	--odf-card-gap: 6px;
	--odf-title-size: 15.5px;
	--odf-title-lh: 1.3;
	--odf-rating-h: 18px;
}

/* --------------------------------------------------------------------------
   Grid: cards in a row stretch to the same height (also inside carousels)
   -------------------------------------------------------------------------- */

ul.products {
	align-items: stretch;
}

ul.products li.product.type-product {
	display: flex;
	height: auto;
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */

ul.products li.product.type-product .product-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	background: var(--odf-white);
	border: 1px solid var(--odf-border);
	border-radius: var(--odf-radius);
	overflow: hidden;
	transition: box-shadow .2s ease;
}

ul.products li.product.type-product .product-inner:hover {
	box-shadow: var(--odf-shadow-hover);
}

/* 1. Square image, edge to edge, ivory backdrop */
ul.products li.product.type-product .product-thumbnail {
	position: relative;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	background: var(--odf-ivory);
	border-radius: 0;
	overflow: hidden;
}

ul.products li.product.type-product .product-thumbnail > a,
ul.products li.product.type-product .product-thumbnail .woocommerce-loop-product__link {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

ul.products li.product.type-product .product-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

/* 2. Wishlist: always visible, round white button, top-right.
   Compare and quick view are not part of the reference card, so they are
   hidden on cards only (both still work on the product page). */
ul.products li.product.type-product .product-featured-icons--primary {
	top: 10px;
	right: 10px;
	left: auto;
	bottom: auto;
	width: auto;
	justify-content: flex-start;
	gap: 0;
	z-index: 3;
}

ul.products li.product.type-product .product-featured-icons .wcboost-products-compare-button,
ul.products li.product.type-product .product-featured-icons .ecomus-quickview-button,
ul.products li.product.type-product .product-featured-icons .yith-wcwl-add-to-wishlist,
ul.products li.product.type-product .product-featured-icons .compare {
	display: none !important;
}

ul.products li.product.type-product .product-featured-icons .product-loop-button.wcboost-wishlist-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--odf-white);
	color: var(--odf-brown);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	--em-button-height: 34px;
	--em-button-width: 34px;
}

ul.products li.product.type-product .product-featured-icons .product-loop-button.wcboost-wishlist-button:hover,
ul.products li.product.type-product .product-featured-icons .product-loop-button.wcboost-wishlist-button.added {
	background: var(--odf-brown);
	color: var(--odf-white);
}

/* Tooltip text inside the icon button stays for screen readers only */
ul.products li.product.type-product .wcboost-wishlist-button .wcboost-wishlist-button__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Card body: fixed order and fixed slot heights so every card lines up
   rating (fixed row) > title (min 2 lines, never cut) > price > button
   -------------------------------------------------------------------------- */

ul.products li.product.type-product .product-summary {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--odf-card-gap);
	flex: 1 1 auto;
	padding: var(--odf-card-pad) var(--odf-card-pad) 16px;
	margin: 0;
	text-align: left;
}

/* 3. Rating row: same height whether or not the product has reviews.
   !important because the homepage Elementor product widgets have a
   "hide rating" switch that would otherwise remove real reviews there. */
ul.products li.product.type-product .odf-card-rating {
	display: flex !important;
	align-items: center;
	gap: 6px;
	height: var(--odf-rating-h);
	min-height: var(--odf-rating-h);
	margin: 0;
	font-size: 12.5px;
	line-height: 1;
	color: var(--odf-muted);
}

ul.products li.product.type-product .odf-card-rating .star-rating {
	margin: 0;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--odf-star);
}

ul.products li.product.type-product .odf-card-rating .max-rating {
	color: var(--odf-star-empty);
}

ul.products li.product.type-product .odf-card-rating .user-rating {
	color: var(--odf-star);
}

/* Reference: "5.0 (6)" is one quiet grey run of text, same weight as the count */
ul.products li.product.type-product .odf-rating-num,
ul.products li.product.type-product .odf-rating-count {
	font-weight: 400;
	color: var(--odf-muted);
}

ul.products li.product.type-product .odf-rating-num {
	margin-right: -2px;
}

/* 4. Title: full WooCommerce name, never truncated. Reserves two lines so
   short names keep the same layout; longer names simply wrap. */
ul.products li.product.type-product .woocommerce-loop-product__title {
	display: block;
	margin: 0;
	font-size: var(--odf-title-size);
	font-weight: 600;
	line-height: var(--odf-title-lh);
	min-height: calc(2em * 1.3);
	max-height: none;
	overflow: visible;
	color: var(--odf-text);
	text-transform: none;
	letter-spacing: 0;
	-webkit-line-clamp: unset;
	--em-line-clamp-count: none;
}

ul.products li.product.type-product .woocommerce-loop-product__title a {
	display: block;
	max-height: none;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	word-break: normal;
	overflow-wrap: anywhere;
	-webkit-line-clamp: unset;
	-webkit-box-orient: initial;
	color: inherit;
}

ul.products li.product.type-product .woocommerce-loop-product__title a:hover {
	color: var(--odf-green-dk);
}

/* 5. Price row: pinned just above the button so price rows line up across
   a row even when one title wraps to an extra line */
ul.products li.product.type-product .price,
ul.products li.product.type-product .odf-card-price__visual {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0 6px;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--odf-muted);
}

ul.products li.product.type-product .price {
	margin: auto 0 8px;
	padding-top: 2px;
}

ul.products li.product.type-product .odf-card-price__visual {
	margin: 0;
}

ul.products li.product.type-product .price .amount,
ul.products li.product.type-product .price ins .amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--odf-brown);
}

ul.products li.product.type-product .price ins {
	text-decoration: none;
	background: none;
}

ul.products li.product.type-product .price del,
ul.products li.product.type-product .price del .amount {
	font-size: 13px;
	font-weight: 400;
	color: var(--odf-muted);
	opacity: 1;
}

ul.products li.product.type-product .odf-from,
ul.products li.product.type-product .odf-sizes {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--odf-muted);
}

/* 6. Button: full width, brown, always the last thing in the card */
ul.products li.product.type-product .odf-card-btn {
	position: static !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--odf-radius-sm);
	background: var(--odf-brown);
	color: var(--odf-white);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	transition: background-color .2s ease;
}

ul.products li.product.type-product .odf-card-btn:hover,
ul.products li.product.type-product .odf-card-btn:focus {
	background: var(--odf-brown-dk);
	color: var(--odf-white);
}

ul.products li.product.type-product .odf-card-btn:focus-visible {
	outline: 2px solid var(--odf-brown);
	outline-offset: 2px;
}

/* WooCommerce AJAX states for simple products */
ul.products li.product.type-product .odf-card-btn.loading {
	opacity: .75;
}

ul.products li.product.type-product .added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: var(--odf-brown);
	text-decoration: underline;
}

/* Sold out: same card, muted image and button */
ul.products li.product.type-product.outofstock .product-thumbnail img {
	filter: grayscale(.6);
	opacity: .65;
}

ul.products li.product.type-product .odf-card-btn--soldout,
ul.products li.product.type-product .odf-card-btn--soldout:hover {
	background: #EEE9E3;
	color: var(--odf-muted);
}

/* --------------------------------------------------------------------------
   Badges (sale / sold out): small label top-left, never covering the photo
   -------------------------------------------------------------------------- */
ul.products li.product.type-product .woocommerce-badges {
	top: 10px;
	left: 10px;
	right: auto;
	bottom: auto;
	transform: none;
	z-index: 2;
}

ul.products li.product.type-product .woocommerce-badges .onsale,
ul.products li.product.type-product .woocommerce-badges .woocommerce-badge {
	display: inline-block;
	width: auto;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 4px 8px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .03em;
}

ul.products li.product.type-product .woocommerce-badges .onsale {
	background: var(--odf-green);
	color: var(--odf-brown);
}

ul.products li.product.type-product.outofstock .woocommerce-badges.sold-out,
ul.products li.product.type-product.outofstock .sold-out--center {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	bottom: auto;
	width: auto;
	height: auto;
	transform: none;
	background: none;
}

ul.products li.product.type-product.outofstock .woocommerce-badges .stock-badge {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
}

ul.products li.product.type-product.outofstock .woocommerce-badges .sold-out.woocommerce-badge {
	background: var(--odf-muted);
	color: var(--odf-white);
}

/* --------------------------------------------------------------------------
   Homepage Gift Hampers (Elementor widget 11cde39): three cards sit in a
   static grid from tablet up (Additional CSS section 12), so carousel arrows
   only cover the photos there. Phones keep the swipe carousel.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.elementor-element-11cde39 .swiper-button,
	.elementor-element-11cde39 .elementor-swiper-button-prev,
	.elementor-element-11cde39 .elementor-swiper-button-next {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Lock the card against per-widget styling.
   Elementor product widgets (homepage Bestsellers, Gift Hampers) carry their
   own title/price/button style controls with higher specificity. These few
   properties are forced so the card is identical in every grid. To restyle the
   card, edit the tokens at the top of this file, not the widget controls.
   -------------------------------------------------------------------------- */
ul.products li.product.type-product .product-summary .woocommerce-loop-product__title {
	margin: 0 !important;
	font-family: inherit !important;
	font-size: var(--odf-title-size) !important;
	font-weight: 600 !important;
	line-height: var(--odf-title-lh) !important;
}

ul.products li.product.type-product .product-summary .woocommerce-loop-product__title a {
	color: var(--odf-text) !important;
}

ul.products li.product.type-product .product-summary .woocommerce-loop-product__title a:hover {
	color: var(--odf-green-dk) !important;
}

ul.products li.product.type-product .product-summary .price {
	margin: auto 0 8px !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	color: var(--odf-muted) !important;
}

ul.products li.product.type-product .product-summary .price .amount,
ul.products li.product.type-product .product-summary .price ins .amount {
	font-size: var(--odf-price-size, 18px) !important;
	font-weight: 700 !important;
	color: var(--odf-brown) !important;
}

ul.products li.product.type-product .product-summary .price del,
ul.products li.product.type-product .product-summary .price del .amount {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--odf-muted) !important;
}

ul.products li.product.type-product .product-summary {
	padding: var(--odf-card-pad) var(--odf-card-pad) var(--odf-card-pad-b, 16px) !important;
}

ul.products li.product.type-product .product-summary .odf-card-btn {
	min-height: var(--odf-btn-h, 40px) !important;
	border-radius: var(--odf-radius-sm) !important;
	font-size: var(--odf-btn-size, 14px) !important;
	font-weight: 600 !important;
}

/* Flash-sale widget extras that are not part of the card */
ul.products li.product.type-product .deal-progress,
ul.products li.product.type-product .deal-sold,
ul.products li.product.type-product .em-product-countdown,
ul.products li.product.type-product .em-button-add-to-cart-mobile:not(.odf-card-btn) {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Mobile and small tablet
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	:root {
		--odf-card-pad: 10px;
		--odf-card-pad-b: 12px;
		--odf-card-gap: 4px;
		--odf-title-size: 14px;
		--odf-price-size: 16px;
		--odf-btn-h: 38px;
		--odf-btn-size: 13px;
	}

	ul.products li.product.type-product .product-summary {
		padding-bottom: 12px;
	}

	ul.products li.product.type-product .price .amount,
	ul.products li.product.type-product .price ins .amount {
		font-size: 16px;
	}

	ul.products li.product.type-product .odf-card-btn {
		min-height: 38px;
		padding: 9px 8px;
		font-size: 13px;
	}

	ul.products li.product.type-product .product-featured-icons--primary {
		top: 8px;
		right: 8px;
		left: auto;
		bottom: auto;
	}

	/* Ecomus hides the wishlist on mobile cards via a Customizer switch;
	   the reference card shows it everywhere. Same specificity, loads later. */
	ul.products li.product.type-product .product-featured-icons .product-loop-button.wcboost-wishlist-button {
		display: inline-flex;
		width: 30px;
		height: 30px;
		min-width: 30px;
		--em-button-height: 30px;
		--em-button-width: 30px;
	}

	/* Same card width on phones everywhere: two per row (the header search
	   suggestions were set to one per row). */
	ul.products.mobile-col-1 li.product.type-product {
		width: 50%;
		max-width: 50%;
		flex: 0 0 50%;
	}
}

@media (max-width: 380px) {
	ul.products li.product.type-product .odf-sizes {
		flex-basis: 100%;
	}
}