/* ---- Πλαίσιο εικόνας 4:5, zoom στο προϊόν (cover) ---- */
:root {
	--spitokeri-frame: 4 / 5;
	--spitokeri-frame-bg: #f3ebd9; /* κρεμ, ίδιο με το site */
}

/* Κάρτες καταλόγου (block «Product Image») */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--spitokeri-frame);
	background: var(--spitokeri-frame-bg);
	border-radius: 6px;
}
.wc-block-components-product-image > a,
.wp-block-woocommerce-product-image > a {
	display: block;
	width: 100%;
	height: 100%;
}
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
}

/* Σελίδα προϊόντος: κύρια εικόνα ίδιο πλαίσιο 4:5, zoom στο προϊόν */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image > a {
	display: block;
	aspect-ratio: var(--spitokeri-frame);
	height: auto !important;
	background: var(--spitokeri-frame-bg);
	border-radius: 8px;
	overflow: hidden;
}
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
}

/* Το κουμπί ζουμ της φωτό προϊόντος. Ο πραγματικός επιλογέας του core CSS
   είναι `.woocommerce div.product div.images .woocommerce-product-gallery__trigger`
   (4 κλάσεις + 2 στοιχεία) — το εικονίδιο ΔΕΝ είναι το κρυμμένο 🔍 emoji
   (screen-reader-only span, clip-path 1px), είναι κύκλος+χεράκι ζωγραφισμένο
   με ::before/::after ΠΑΝΩ στο ίδιο το κουμπί. Δύο προβλήματα:
   1. z-index: 99 του core είναι πάνω από το sticky header μας (z-index 45,
      theme.json §header). Το κουμπί είναι position:absolute μέσα στο πλαίσιο
      της φωτό, όχι fixed — όταν η φωτό σκρολάρει κάτω από την κεφαλίδα, το
      κουμπί περνάει ΠΑΝΩ της αντί να κρύβεται πίσω, λόγω του υψηλού z-index.
   2. Ο απλός κύκλος+χεράκι μπερδεύεται εύκολα με αναζήτηση. Μπαίνει δικό μας
      SVG με «+» μέσα στον φακό (ζουμ, όχι αναζήτηση), σαν background-image.
   Λύση και στα δύο: ίδιο μήκος επιλογέα με το core + μία επιπλέον κλάση
   (ίδιο μοτίβο με HANDOFF §6α), όχι !important. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger {
	z-index: 2;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323282b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='10' y1='7' x2='10' y2='13'/%3E%3Cline x1='7' y1='10' x2='13' y2='10'/%3E%3Cline x1='15' y1='15' x2='20' y2='20'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger::before,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger::after {
	display: none;
}

/* ---- Hover flip στις κάρτες ---- */
.spitokeri-hover-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.wc-block-product:hover .spitokeri-hover-img,
li.product:hover .spitokeri-hover-img {
	opacity: 1;
}

/* ---- Woo variation swatches: κουμπιά με ετικέτα κειμένου (π.χ. pa_aroma) ----
   Το πλαίσιο του πρόσθετου έχει σταθερό ύψος (--wvs-single-product-item-height, 30px).
   Όταν η ετικέτα είναι μακριά και σπάει σε 2-3 γραμμές, ξεχειλίζει πάνω στη σειρά
   από πάνω. Το κάνουμε auto-ύψος ώστε να μεγαλώνει με το περιεχόμενο. */
.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item {
	height: auto;
	min-height: var(--wvs-single-product-item-height, 30px);
	padding: 6px 10px;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item .variable-item-contents {
	height: auto;
	min-height: 100%;
}