/**
 * Shared product-card system — the ONE authoritative card style for
 * anywhere WooCommerce's classic product loop renders (content-product.php,
 * unmodified — no template override exists for it, confirmed against the
 * plugin's own template file). That currently means: the homepage
 * "New Arrivals" / "Featured Products" sections (rendered via the
 * [recent_products] / [featured_products] shortcodes, see
 * inc/patterns/block-patterns.php) and related/cross-sell products.
 * Phase 2 will bring the Shop/category archive grid onto this same
 * system; do not create a second product-card component when that happens.
 *
 * Markup is 100% WooCommerce's own stock output — confirmed hook order
 * (content-product.php):
 *   woocommerce_before_shop_loop_item        -> <a> opens
 *   woocommerce_before_shop_loop_item_title  -> sale badge, image
 *   woocommerce_shop_loop_item_title         -> category label (ours, @5) -> title (@10)
 *   woocommerce_after_shop_loop_item_title   -> rating (removed) -> price
 *   woocommerce_after_shop_loop_item         -> </a> closes -> CTA button
 * See inc/woocommerce/woocommerce-template-hooks.php for the category-label
 * hook and the rating-removal. Visible order: image -> category -> title
 * -> price -> CTA — exactly the DOM order above, no CSS reordering.
 *
 * Also contains the homepage category-card component
 * (.myshop-category-grid / .myshop-category-card), used by the
 * [myshop_category_cards] shortcode — see
 * inc/woocommerce/homepage-category-cards.php. Deliberately a visually
 * distinct system from the product card (no price/CTA/category-label
 * slots) so category cards don't read as product cards.
 *
 * Loaded on shop-context pages AND the homepage — see inc/enqueue/styles.php.
 */

/* ======================================================================
   PRODUCT CARD — outer card
   ====================================================================== */

/*
 * float/clear/width/margin/min-width carry !important because WooCommerce's
 * own plugin stylesheet (assets/css/woocommerce-layout.css, which this
 * theme cannot edit) sets float:left + a percentage width + margin on
 * this exact selector with no !important of its own — confirmed by
 * reading that file directly, not assumed. Grid items ignore `float` per
 * the CSS Display spec regardless, but width/margin still need to be
 * beaten explicitly since WooCommerce's percentage width is a real,
 * competing, non-!important declaration on the same property.
 */
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0 !important;
}

/* WooCommerce's own anchor (woocommerce_template_loop_product_link_open())
   wraps image/category/title/price — not the CTA button, which is a
   sibling <li> child added after this anchor closes. Growing THIS is
   what pushes the button to the same Y position across a row regardless
   of a one- vs two-line title, without a fixed card height or absolute
   positioning. */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

/* ======================================================================
   Image — identical geometry on every card
   ====================================================================== */

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: clamp(18px, 2vw, 28px);
	box-sizing: border-box;
	background-color: var(--color-surface-alt);
	border-radius: 8px;
	transition: transform 250ms ease;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover img {
	transform: scale(1.02);
}

/* ======================================================================
   Category label — AFTER the image, BEFORE the title (see hook doc
   above). Consistent slot height so a short vs. long category name
   never shifts the title's own start position.
   ====================================================================== */

.myshop-product-card__category {
	display: block;
	min-height: 1.2em;
	margin-block: 18px 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-secondary);
	text-align: left;
}

/* ======================================================================
   Title — 2-line reserved slot, identical height whether the title is
   short or long.
   ====================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	min-height: 2.7em;
	max-height: 2.7em;
	font-size: clamp(1rem, 0.95vw, 1.125rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--color-heading);
	text-align: left;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
	color: var(--color-primary);
}

/* ======================================================================
   Price
   ====================================================================== */

.woocommerce ul.products li.product .price {
	display: block;
	min-height: 2.7em;
	margin-top: 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-text);
	text-align: left;
}

.woocommerce ul.products li.product .price del {
	margin-inline-end: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-muted);
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
}

/* ======================================================================
   CTA button — identical external width/height on every card regardless
   of label length ("Προσθήκη στο καλάθι" vs. "Επιλογές"). Left-aligned
   via align-self, sits at the bottom of the card because the sibling
   anchor above it is the flex-grow element, not this button.
   ====================================================================== */

.woocommerce ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: min(100%, 220px);
	min-height: 46px;
	margin-top: 20px;
	padding-inline: 20px;
	border: 0;
	border-radius: 6px;
	background-color: var(--color-primary);
	color: var(--color-background);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 180ms ease;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-background);
}

.woocommerce ul.products li.product .button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ======================================================================
   Sale badge — WooCommerce's own templates/loop/sale-flash.php output;
   text changed to Greek via the woocommerce_sale_flash filter (see
   inc/woocommerce/woocommerce-template-hooks.php), restyled here.
   ====================================================================== */

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	min-width: 0;
	margin: 0;
	padding: 6px 10px;
	background-color: var(--color-accent);
	color: var(--color-background);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 4px;
}

/* ======================================================================
   HOMEPAGE CATEGORY CARD — [myshop_category_cards] shortcode output,
   see inc/woocommerce/homepage-category-cards.php. Deliberately distinct
   from the product card above: image + title + text link only, no
   price/CTA-button/category-label slots, so it never reads as a product
   card.
   ====================================================================== */

.myshop-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 2.2vw, 36px);
	row-gap: clamp(36px, 3vw, 52px);
}

@media (max-width: 74.94rem) {
	.myshop-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 43.69rem) {
	.myshop-category-grid {
		grid-template-columns: 1fr;
	}
}

.myshop-category-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.myshop-category-card__image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--color-surface-alt);
	border-radius: 8px;
}

.myshop-category-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}

.myshop-category-card:hover .myshop-category-card__image img {
	transform: scale(1.02);
}

.myshop-category-card__body {
	display: block;
	margin-top: 18px;
	text-align: left;
}

.myshop-category-card__title {
	display: block;
	margin: 0;
	font-size: clamp(19px, 1.2vw, 23px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-heading);
	transition: color 180ms ease;
}

.myshop-category-card:hover .myshop-category-card__title {
	color: var(--color-primary);
}

.myshop-category-card__cta {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-accent);
	transition: transform 180ms ease;
}

.myshop-category-card:hover .myshop-category-card__cta {
	transform: translateX(2px);
}