/* WooCommerce product grids styled like the homepage "Τα πιο αγαπημένα" cards:
   white 32px-radius card, square rounded image, pink/blue tag pill, bold
   name, pink price, full-width pill button (blue for αγόρι).
   Enqueued by novamira-sandbox/nvm-product-grids.php */

ul.products {
	gap: 24px !important;
}

ul.products li.product.nvm-card {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	padding: 17.6px !important;
	margin: 0 !important;
	background: #FFFFFF !important;
	border: 0 !important;
	border-radius: 32px !important;
	box-shadow: 0 1px 2px rgba(36, 29, 34, .14), 0 14px 34px -24px rgba(36, 29, 34, .35) !important;
	overflow: visible;
	transition: transform .25s ease, box-shadow .25s ease;
}

ul.products li.product.nvm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(36, 29, 34, .14), 0 22px 40px -22px rgba(198, 61, 113, .45) !important;
}

ul.products li.product.nvm-card--boy:hover {
	box-shadow: 0 1px 2px rgba(36, 29, 34, .14), 0 22px 40px -22px rgba(74, 134, 216, .5) !important;
}

/* Image */
ul.products li.nvm-card .woocommerce-loop-image-link {
	position: relative;
	display: block;
	margin: 0 !important;
	border-radius: 16px;
	overflow: hidden;
	background: #FFFFFF;
}

ul.products li.nvm-card .woocommerce-loop-image-link img {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 16px;
	margin: 0 !important;
}

html body .woocommerce ul.products li.product.nvm-card .onsale,
html body ul.products li.product.nvm-card .onsale {
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	padding: 6px 12px !important;
	border-radius: 999px !important;
	background: #E8548C !important;
	color: #FFFFFF !important;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1 !important;
	min-height: 0 !important;
}

/* Details */
ul.products li.nvm-card .product-details {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 0 !important;
	background: transparent !important;
}

ul.products li.nvm-card .product-excerpt,
ul.products li.nvm-card .star-rating-wrap {
	display: none !important;
}

.nvm-card-tag {
	display: block;
	padding: 8.8px 17.6px;
	border-radius: 999px;
	background: #FFDBE8;
	color: #841C44;
	font-size: 13px;
	line-height: 1.2;
}

.nvm-card-tag--boy {
	background: #D9E8FF;
	color: #1F4C8F;
}

ul.products li.nvm-card .woocommerce-loop-product__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Figtree', 'IBM Plex Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #241D22;
}

ul.products li.nvm-card .woocommerce-loop-product__title a {
	color: inherit !important;
	text-decoration: none;
}

ul.products li.nvm-card .price {
	display: flex !important;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto 0 0 !important;
	padding: 4px 10px 0 !important;
	font-family: 'Figtree', 'IBM Plex Sans', sans-serif;
	font-size: 19px !important;
	font-weight: 700;
	color: #AF2A5E !important;
}

ul.products li.nvm-card--boy .price {
	color: #2A569B !important;
}

ul.products li.nvm-card .price del {
	order: -1;
	font-size: 14px;
	font-weight: 400;
	color: #AB96A2 !important;
	opacity: 1;
}

ul.products li.nvm-card .price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* Button */
ul.products li.nvm-card .product-action-wrap {
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

ul.products li.nvm-card .nvm-card-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 13.2px 26.4px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #E8548C !important;
	color: #FFFFFF !important;
	font-family: 'Figtree', 'IBM Plex Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba(36, 29, 34, .14);
	transition: background-color .2s ease, transform .2s ease;
}

ul.products li.nvm-card .nvm-card-btn--boy,
.woocommerce ul.products li.product.nvm-card a.button.nvm-card-btn--boy {
	background: #4A86D8 !important;
}

ul.products li.nvm-card .nvm-card-btn:hover,
ul.products li.nvm-card .nvm-card-btn:focus-visible {
	background: #C63D71 !important;
	transform: translateY(-1px);
}

ul.products li.nvm-card .nvm-card-btn--boy:hover,
ul.products li.nvm-card .nvm-card-btn--boy:focus-visible,
.woocommerce ul.products li.product.nvm-card a.button.nvm-card-btn--boy:hover,
.woocommerce ul.products li.product.nvm-card a.button.nvm-card-btn--boy:focus-visible {
	background: #2A569B !important;
}

@media (max-width: 767px) {
	ul.products { gap: 14px !important; }
	ul.products li.product.nvm-card { padding: 11px !important; border-radius: 22px !important; gap: 8px; }
	ul.products li.nvm-card .woocommerce-loop-image-link,
	ul.products li.nvm-card .woocommerce-loop-image-link img { border-radius: 14px; }
	.nvm-card-tag { padding: 6px 12px; font-size: 12px; }
	ul.products li.nvm-card .woocommerce-loop-product__title { font-size: 14px !important; }
	ul.products li.nvm-card .price { font-size: 17px !important; padding: 2px 4px 0 !important; }
	ul.products li.nvm-card .nvm-card-btn { min-height: 42px; padding: 10px 12px !important; font-size: 13.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
	ul.products li.product.nvm-card,
	ul.products li.nvm-card .nvm-card-btn { transition: none; }
	ul.products li.product.nvm-card:hover { transform: none; }
}

/* Smaller cards (user request 2026-09-23): more cards per row.
   Shop/category grids 3 -> 4, homepage Elementor cards 4 -> 5,
   tablet 2 -> 3, phones 1 -> 2 on the homepage. */
@media (min-width: 1025px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

.elementor .card-product.grid-item-4 { width: 18%; }

@media (max-width: 1024px) {
	.elementor .card-product.grid-item-4 { width: 30%; }
}

/* Phones: 2 per row. The grid's gap is 17.6px (Elementor gap-lg), so the
   old calc(50% - 7px) was too wide and every card wrapped onto its own row.
   Set the gap and width together so they always fit. */
@media (max-width: 767px) {
	.elementor .e-con:has(> .card-product.grid-item-4) {
		gap: 12px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elementor .card-product.grid-item-4 {
		width: calc(50% - 6px) !important;
		flex: 0 0 calc(50% - 6px) !important;
		min-width: 0 !important;
		padding: 8px !important;
		border-radius: 18px !important;
	}

	.elementor .card-product.grid-item-4 img { border-radius: 12px !important; }

	.elementor .card-product.grid-item-4 :is(.tag-accent, .tag-accent-2) {
		align-self: flex-start;
		width: auto !important;
		padding: 4px 10px !important;
		font-size: 11.5px !important;
	}

	.elementor .card-product.grid-item-4 :is(h2, h3, h4, .e-heading-base) {
		font-size: 13.5px !important;
		line-height: 1.3 !important;
		overflow-wrap: anywhere;
	}

	.elementor .card-product.grid-item-4 :is(a, button)[class*="btn"] {
		min-height: 38px;
		padding: 8px 8px !important;
		font-size: 12.5px !important;
		line-height: 1.15 !important;
		white-space: normal !important;
		text-align: center;
	}
}