/**
 * WooCommerce product card — OnOff design (RTL-first).
 */

.woocommerce {
	--onoff-card-width: 255px;
	--onoff-card-height: 472px;
	--onoff-card-radius: 24px;
	--onoff-card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--onoff-card-image-size: 255px;
	--onoff-card-badge-bg: #f2fb04;
	--onoff-card-badge-text: #262415;
	--onoff-card-title: #262415;
	--onoff-card-price-muted: #7c6f5f;
	--onoff-card-btn-bg: #262415;
	--onoff-card-btn-hover: #3a3528;
}

/* Toolbar above grid — result count + sort (also in woocommerce.css) */
.woocommerce .onoff-shop-loop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	width: 100%;
	margin-block: 0 var(--onoff-gap-md, 1rem);
	clear: both;
}

.woocommerce .onoff-shop-loop-toolbar .woocommerce-result-count,
.woocommerce .onoff-shop-loop-toolbar .woocommerce-ordering,
.woocommerce .onoff-shop-loop-toolbar .onoff-shop-per-page {
	float: none;
	margin: 0;
}

.woocommerce .onoff-shop-loop-toolbar .onoff-shop-per-page {
	margin-inline-start: auto;
}

.woocommerce .onoff-shop-loop-toolbar .onoff-shop-per-page__select,
.woocommerce .onoff-shop-loop-toolbar .woocommerce-ordering select {
	min-width: min(100%, 220px);
	padding: 10px 36px 10px 14px;
	border: 1px solid #e5e5e0;
	border-radius: 999px;
	font-family: var(--onoff-font-family, 'Cairo', sans-serif);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Grid — fixed card width; column count drops when the container is narrower */
.woocommerce ul.products {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fit, var(--onoff-card-width));
	align-items: stretch;
	justify-content: center;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	clear: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

@media (min-width: 1200px) {
	.woocommerce ul.products {
		gap: 32px 24px;
	}
}

.woocommerce ul.products li.product,
.woocommerce ul.products li.custom-product-card {
	box-sizing: content-box;
	width: var(--onoff-card-width) !important;
	max-width: var(--onoff-card-width);
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding-bottom: 15px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.woocommerce .custom-product-card {
	display: flex;
	flex-direction: column;
	width: var(--onoff-card-width);
	max-width: var(--onoff-card-width);
	height: var(--onoff-card-height);
	overflow: hidden;
	padding: 0;
	list-style: none;
}

.woocommerce .custom-product-card::before {
	display: none;
}

/* Card */
.woocommerce .product-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: var(--onoff-card-width);
	max-width: var(--onoff-card-width);
	min-height: var(--onoff-card-height);
	height: 100%;
	overflow: hidden;
	border-radius: var(--onoff-card-radius);
	background: #fff;
	box-shadow: var(--onoff-card-shadow);
}

/* Image */
.woocommerce .product-card__image-link {
	position: relative;
	display: block;
	flex: 0 0 auto;
	flex-shrink: 0;
	color: inherit;
	text-decoration: none;
}

.woocommerce .product-card__image-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: var(--onoff-card-image-size);
	min-height: var(--onoff-card-image-size);
	margin-inline: auto;
	background-color: #f8f8f5;
	border-start-start-radius: var(--onoff-card-radius);
	border-start-end-radius: var(--onoff-card-radius);
}

.woocommerce .product-card__image-wrap img,
.woocommerce .product-card__image-wrap .woocommerce-placeholder,
.woocommerce .product-card__image-wrap picture,
.woocommerce .product-card__image-wrap .product-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	object-fit: cover;
	object-position: center center;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 250ms ease;
}

/* Badge chip — Figma: 60.64×36, top-right 16px, #F2FB04 pill */
.woocommerce .product-card__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	left: auto;
	z-index: 1;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 60.64px;
	height: 36px;
	padding: 0 16px;
	border-radius: 9999px;
	background: #f2fb04;
	color: #262415;
	font-family: var(--onoff-font-family, 'Cairo', sans-serif);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	white-space: nowrap;
	box-shadow: none;
	pointer-events: none;
}

.woocommerce .product-card:hover .product-card__image-wrap img,
.woocommerce .product-card:focus-within .product-card__image-wrap img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce .product-card__image-wrap img,
	.woocommerce .product-card__image {
		transition: none;
	}

	.woocommerce .product-card:hover .product-card__image-wrap img,
	.woocommerce .product-card:focus-within .product-card__image-wrap img {
		transform: none;
	}
}

/* Content */
.woocommerce .product-card__body,
.woocommerce .product-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	padding: 24px;
	text-align: center;
}

.woocommerce .product-card__title {
	margin: 0;
	min-height: 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--onoff-font-family);
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: var(--onoff-card-title);
}

.woocommerce .product-card__title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.woocommerce .product-card__title a:hover,
.woocommerce .product-card__title a:focus-visible {
	color: #7c6f5f;
}

/* Price — one row: current left, old right, 16px gap; padding 12px 0 16px */
.woocommerce .product-card__price {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: center;
	align-self: stretch;
	width: 100%;
	margin: 0;
	padding: 12px 0 16px;
	min-height: 64.8px;
	box-sizing: border-box;
	font-family: var(--onoff-font-family, 'Cairo', sans-serif);
	line-height: 1.2;
	text-align: center;
}

.woocommerce .product-card__price .price {
	display: inline-flex !important;
	flex-flow: row nowrap !important;
	align-items: flex-end;
	justify-content: flex-start;
	column-gap: 0;
	gap: 0;
	width: auto;
	max-width: 100%;
	min-height: 36.8px;
	margin: 0;
	padding: 0;
	direction: ltr;
	unicode-bidi: isolate;
	font-size: inherit;
	color: #262415;
	white-space: nowrap;
}

.woocommerce .product-card__price .price::before,
.woocommerce .product-card__price .price::after {
	display: none;
}

/* Old price — right */
.woocommerce .product-card__price del {
	display: inline-flex !important;
	flex: none;
	order: 1;
	align-items: flex-end;
	margin: 0;
	padding: 0;
	padding-block-start: 8.8px;
	opacity: 1;
	white-space: nowrap;
	text-decoration: none;
}

.woocommerce .product-card__price .price bdi,
.woocommerce .product-card__price .price .woocommerce-Price-amount {
	white-space: nowrap;
}

.woocommerce .product-card__price .woocommerce-Price-amount.amount {
	margin-left: 16px;
}

.woocommerce .product-card__price .woocommerce-Price-amount.amount,
.woocommerce .product-card__price .woocommerce-Price-amount.amount bdi {
	color: #f2fb04 !important;
}

.woocommerce .product-card__price ins .woocommerce-Price-amount.amount,
.woocommerce .product-card__price ins .woocommerce-Price-amount.amount bdi,
.woocommerce .product-card__price > .woocommerce-Price-amount.amount,
.woocommerce .product-card__price > .woocommerce-Price-amount.amount bdi {
	margin-left: 0;
}

.woocommerce .product-card__price del .amount,
.woocommerce .product-card__price del bdi,
.woocommerce .product-card__price del .woocommerce-Price-amount {
	font-family: var(--onoff-font-family, 'Cairo', sans-serif);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	text-decoration-line: line-through;
}

/* Current price — left */
.woocommerce .product-card__price ins {
	display: inline-flex !important;
	flex: none;
	order: 0;
	align-items: flex-end;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	text-decoration: none;
	background: transparent;
}

.woocommerce .product-card__price ins .amount,
.woocommerce .product-card__price ins bdi,
.woocommerce .product-card__price ins .woocommerce-Price-amount {
	font-family: var(--onoff-font-family, 'Cairo', sans-serif);
	font-size: 30px;
	font-style: normal;
	font-weight: 900;
	line-height: 36px;
	letter-spacing: -0.02em;
}

/* Regular price (no sale) */
.woocommerce .product-card__price > .amount,
.woocommerce .product-card__price > .amount bdi,
.woocommerce .product-card__price > .woocommerce-Price-amount {
	font-family: var(--onoff-font-family, 'Cairo', sans-serif);
	font-size: 30px;
	font-style: normal;
	font-weight: 900;
	line-height: 36px;
}

/* Button */
.woocommerce .product-card__actions {
	width: 100%;
	margin-block-start: auto;
	padding-block-start: 4px;
}

.woocommerce .product-card__actions .button,
.woocommerce .product-card__actions .add_to_cart_button,
.woocommerce .product-card__actions a.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--onoff-card-btn-bg) !important;
	color: #fff !important;
	font-family: var(--onoff-font-family) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

.woocommerce .product-card__actions .button:hover,
.woocommerce .product-card__actions .button:focus-visible,
.woocommerce .product-card__actions .add_to_cart_button:hover,
.woocommerce .product-card__actions .add_to_cart_button:focus-visible,
.woocommerce .product-card__actions a.button:hover,
.woocommerce .product-card__actions a.button:focus-visible {
	background: var(--onoff-card-btn-hover) !important;
	color: #fff !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(242, 251, 4, 0.45) !important;
}

.woocommerce .product-card__actions .added_to_cart {
	display: block;
	margin-block-start: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--onoff-card-title);
	text-align: center;
	text-decoration: none;
}

/* Out-of-stock products: muted CTA on the loop card */
.woocommerce li.product.outofstock .product-card__actions .button,
.woocommerce li.product.outofstock .product-card__actions a.button {
	background: rgba(38, 36, 21, 0.55) !important;
}

.woocommerce li.product.outofstock .product-card__actions .button:hover,
.woocommerce li.product.outofstock .product-card__actions .button:focus-visible,
.woocommerce li.product.outofstock .product-card__actions a.button:hover,
.woocommerce li.product.outofstock .product-card__actions a.button:focus-visible {
	background: rgba(38, 36, 21, 0.7) !important;
}

/* Mobile — 33% smaller cards, 2-column product grids */
@media (max-width: 899px) {
	.woocommerce,
	.onoff-brand-archive {
		--onoff-card-width: 171px;
		--onoff-card-height: 316px;
		--onoff-card-radius: 16px;
		--onoff-card-image-size: 171px;
	}

	.woocommerce ul.products,
	body.onoff-shop-filter-archive .onoff-shop-archive__content ul.products,
	.home-product-section__grid ul.products,
	.onoff-cart-suggestions ul.products,
	.onoff-brand-archive .brand-products-grid ul.products,
	.onoff-product-details-wrap .related.products ul.products,
	.onoff-product-details-wrap .upsells.products ul.products,
	.onoff-product-details-wrap .onoff-brand-related.products ul.products {
		display: grid !important;
		overflow-x: visible;
		scroll-snap-type: none;
		grid-template-columns: repeat(2, var(--onoff-card-width)) !important;
		gap: 11px;
		justify-content: center;
	}

	.onoff-product-details-wrap .related.products ul.products li.product,
	.onoff-product-details-wrap .upsells.products ul.products li.product,
	.onoff-product-details-wrap .onoff-brand-related.products ul.products li.product {
		flex: unset;
		width: var(--onoff-card-width) !important;
		max-width: var(--onoff-card-width) !important;
		scroll-snap-align: unset;
	}

	.woocommerce ul.products li.product,
	.woocommerce ul.products li.custom-product-card {
		padding-bottom: 10px !important;
		padding-left: 7px !important;
		padding-right: 7px !important;
	}

	.woocommerce .product-card__body,
	.woocommerce .product-card__content {
		padding: 16px;
	}

	.woocommerce .product-card__title {
		min-height: 38px;
		font-size: 12px;
		line-height: 19px;
	}

	.woocommerce .product-card__badge {
		top: 11px;
		right: 11px;
		min-width: 41px;
		height: 24px;
		padding: 0 11px;
		font-size: 10px;
		line-height: 14px;
	}

	.woocommerce .product-card__price {
		padding: 8px 0 11px;
		min-height: 43px;
	}

	.woocommerce .product-card__price .woocommerce-Price-amount.amount {
		margin-left: 11px;
	}

	.woocommerce .product-card__price del .amount,
	.woocommerce .product-card__price del bdi,
	.woocommerce .product-card__price del .woocommerce-Price-amount {
		font-size: 12px;
		line-height: 19px;
	}

	.woocommerce .product-card__price ins .amount,
	.woocommerce .product-card__price ins bdi,
	.woocommerce .product-card__price ins .woocommerce-Price-amount,
	.woocommerce .product-card__price > .amount,
	.woocommerce .product-card__price > .amount bdi,
	.woocommerce .product-card__price > .woocommerce-Price-amount {
		font-size: 20px;
		line-height: 24px;
	}

	.woocommerce .product-card__actions {
		padding-block-start: 3px;
	}

	.woocommerce .product-card__actions .button,
	.woocommerce .product-card__actions .add_to_cart_button,
	.woocommerce .product-card__actions a.button {
		min-height: 32px !important;
		padding: 8px 13px !important;
		font-size: 11px !important;
		line-height: 16px !important;
	}

	.woocommerce .product-card__actions .added_to_cart {
		margin-block-start: 7px;
		font-size: 0.75rem;
	}
}