/**
 * Dear List — Προτάσεις αξεσουάρ.
 * Ακολουθεί την παλέτα του Blocksy, όπως και η μπάρα μεταφορικών.
 */

.dl-cs {
	--dl-cs-coral: var( --theme-palette-color-1, #ff7171 );
	--dl-cs-amber: var( --theme-palette-color-2, #fcb424 );
	--dl-cs-muted: var( --theme-palette-color-3, #504e4a );
	--dl-cs-ink: var( --theme-palette-color-4, #0a0500 );
	--dl-cs-line: var( --theme-palette-color-5, #edeff2 );
	--dl-cs-soft: var( --theme-palette-color-6, #f9fafb );

	margin: 50px 0;
}

.dl-cs__inner {
	box-sizing: border-box;
	padding: 26px 26px 24px;
	border: 1px solid var( --dl-cs-line );
	border-radius: 18px;
	background: #fff;
}

.dl-cs__title {
	margin: 0 0 4px;
	font-size: 21px;
	line-height: 1.25;
	color: var( --dl-cs-ink );
}

.dl-cs__subtitle {
	margin: 0 0 18px;
	font-size: 14px;
	color: var( --dl-cs-muted );
}

/* ---------- Γραμμές προϊόντων ---------- */

.dl-cs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-cs__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var( --dl-cs-line );
}

.dl-cs__row:last-child {
	border-bottom: 0;
}

.dl-cs__check {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
	accent-color: var( --dl-cs-coral );
	cursor: pointer;
}

.dl-cs__label {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	cursor: pointer;
	min-width: 0;
}

.dl-cs__thumb {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: var( --dl-cs-soft );
}

.dl-cs__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 10px;
}

.dl-cs__name {
	font-size: 14.5px;
	line-height: 1.35;
	color: var( --dl-cs-ink );
	min-width: 0;
}

.dl-cs__flag {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --dl-cs-coral );
	margin-bottom: 3px;
}

.dl-cs__price {
	font-size: 15px;
	font-weight: 600;
	color: var( --dl-cs-ink );
	white-space: nowrap;
}

.dl-cs__price del {
	display: none;
}

.dl-cs__peek {
	font-size: 12.5px;
	color: var( --dl-cs-muted );
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.dl-cs__peek:hover,
.dl-cs__peek:focus-visible {
	color: var( --dl-cs-coral );
}

/* Ξεθωριάζουμε ελαφρά ό,τι δεν είναι τσεκαρισμένο, χωρίς να το κρύβουμε. */
.dl-cs__row.is-off .dl-cs__thumb,
.dl-cs__row.is-off .dl-cs__name,
.dl-cs__row.is-off .dl-cs__price {
	opacity: 0.45;
}

/* ---------- Σύνολο και κουμπί ---------- */

.dl-cs__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var( --dl-cs-line );
}

.dl-cs__total {
	margin: 0;
	line-height: 1.25;
}

.dl-cs__total-label {
	display: block;
	font-size: 12.5px;
	color: var( --dl-cs-muted );
	margin-bottom: 2px;
}

.dl-cs__total-value {
	font-size: 25px;
	font-weight: 700;
	color: var( --dl-cs-ink );
}

.dl-cs__total-value del {
	display: none;
}

.dl-cs__button {
	flex: none;
}

.dl-cs__button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Σπρώξιμο για τα μεταφορικά ---------- */

.dl-cs__nudge {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 16px 0 0;
	padding: 11px 14px;
	border-radius: 12px;
	background: rgba( 252, 180, 36, 0.14 );
	font-size: 13.5px;
	color: var( --dl-cs-ink );
}

.dl-cs__nudge::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: var( --dl-cs-amber );
	border-radius: 50%;
	box-shadow: inset 0 0 0 4px rgba( 255, 255, 255, 0.85 );
}

.dl-cs__feedback {
	margin: 14px 0 0;
	padding: 11px 14px;
	border-radius: 12px;
	background: rgba( 255, 113, 113, 0.12 );
	font-size: 13.5px;
	color: var( --dl-cs-ink );
}

.dl-cs__feedback a {
	color: var( --dl-cs-coral );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dl-cs__feedback.is-error {
	background: rgba( 255, 113, 113, 0.2 );
}

@media ( max-width: 600px ) {
	.dl-cs__inner {
		padding: 20px 16px;
		border-radius: 14px;
	}

	.dl-cs__label {
		grid-template-columns: 54px 1fr;
		gap: 12px;
	}

	.dl-cs__thumb,
	.dl-cs__thumb img {
		width: 54px;
		height: 54px;
	}

	.dl-cs__price {
		grid-column: 2;
		font-size: 14px;
	}

	.dl-cs__peek {
		display: none;
	}

	.dl-cs__button {
		width: 100%;
	}
}

/* ================================================================== */
/* Προτάσεις μέσα στη μπάρα μεταφορικών                                */
/* ================================================================== */

.dl-fsb__suggest {
	grid-column: 1 / -1;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var( --dl-fsb-track, #efecea );
}

.dl-fsb__suggest-head {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --dl-fsb-muted, #504e4a );
}

.dl-fsb__suggest-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
}

.dl-fsb__pick {
	display: block;
	width: 100%;
	padding: 0 0 8px;
	border: 1px solid var( --dl-fsb-track, #efecea );
	border-radius: 12px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
	font-family: inherit;
}

.dl-fsb__pick:hover,
.dl-fsb__pick:focus-visible {
	border-color: var( --dl-fsb-coral, #ff7171 );
	transform: translateY( -2px );
}

.dl-fsb__pick[disabled] {
	opacity: 0.55;
	cursor: wait;
	transform: none;
}

.dl-fsb__pick img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 0 6px;
}

.dl-fsb__pick-price {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var( --dl-fsb-ink, #0a0500 );
}

.dl-fsb__pick-add {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --dl-fsb-coral, #ff7171 );
	margin-top: 1px;
}

@media ( prefers-reduced-motion: reduce ) {
	.dl-fsb__pick {
		transition: none;
	}
}

/* ================================================================== */
/* Καθάρισμα στη σελίδα του καλαθιού                                   */
/* ================================================================== */

/*
 * Μετά την προσθήκη, η WooCommerce βγάζει κάτω από το κουμπί έναν σύνδεσμο
 * «Καλάθι». Σε άλλη σελίδα βοηθάει, στη σελίδα του καλαθιού στέλνει τον πελάτη
 * εκεί που είναι ήδη και απλώς σπρώχνει τη σειρά των προϊόντων προς τα κάτω.
 *
 * Ο πρώτος κανόνας κρύβει τον σύνδεσμο παντού. Ο δεύτερος κρύβει και το span
 * που τον περιέχει, ώστε να μην αφήνει κενή γραμμή.
 */
.woocommerce-cart .wc-block-components-product-button .added_to_cart {
	display: none;
}

.woocommerce-cart .wc-block-components-product-button > span:has( > .added_to_cart ) {
	display: none;
}

/*
 * Οι προτάσεις είναι υποσημείωση κάτω από το καλάθι, όχι δεύτερος κατάλογος.
 * Η WooCommerce δίνει στις στήλες `1fr`, οπότε οι φωτογραφίες φτάνουν τα 280px
 * και πάνω, τη στιγμή που η μικρογραφία της γραμμής του καλαθιού είναι 50px.
 *
 * Τα !important παρακάτω δεν είναι τεμπελιά. Οι τίτλοι φοράνε την κλάση
 * has-medium-font-size και οι τιμές την has-small-font-size, που το WordPress
 * τις γράφει το ίδιο με !important, ενώ ο τίτλος έχει και inline style για
 * line-height και margin. Χωρίς αυτά τα μεγέθη αγνοούνται σιωπηλά.
 */
/* Η κλάση γράφεται δύο φορές επίτηδες: η WooCommerce ορίζει τις στήλες με
   `.wc-block-product-template__responsive.columns-4`, δηλαδή δύο κλάσεις, και
   χρειαζόμαστε μεγαλύτερη βαρύτητα για να περάσει το δικό μας πλάτος. */
ul.dl-cs-cart-picks.dl-cs-cart-picks {
	grid-template-columns: repeat( auto-fill, minmax( 110px, 150px ) );
	justify-content: start;
	gap: 22px;
}

/*
 * Κοινό ύψος καρτών χωρίς κόλπα με flex.
 *
 * Η πρώτη προσπάθεια έσπρωχνε την τιμή με margin-top: auto. Αυτό στοιχίζει τα
 * κουμπιά μόνο όταν όλες οι κάρτες βγουν ήδη ακριβώς ίδιου ύψους, και μόλις μία
 * διαφέρει έστω λίγο, το ελεύθερο κενό μαζεύεται πάνω από την τιμή της και το
 * κουμπί της πέφτει χαμηλότερα από τα υπόλοιπα.
 *
 * Τώρα τα δύο μεταβλητά κομμάτια είναι κλειδωμένα: η φωτογραφία είναι πάντα
 * τετράγωνη και ο τίτλος πιάνει πάντα δύο σειρές, κομμένος αν χρειαστεί. Έτσι
 * κάθε κάρτα έχει εξ ορισμού το ίδιο ύψος και δεν χρειάζεται καμία στοίχιση.
 */
.dl-cs-cart-picks .wc-block-components-product-image img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
}

/*
 * Το ύψος του τίτλου είναι σταθερό στις δύο σειρές, ό,τι κι αν γράφει μέσα.
 * Το overflow στο h2 το εγγυάται από μόνο του, ακόμα κι αν κάποιο πρόγραμμα
 * περιήγησης αγνοήσει το line-clamp παρακάτω.
 */
.dl-cs-cart-picks .wp-block-post-title {
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.35 !important;
	height: 2.7em;
	margin-bottom: 6px !important;
	overflow: hidden;
}

/*
 * Το κόψιμο μπαίνει στον σύνδεσμο και όχι στον τίτλο επειδή το WordPress ορίζει
 * `.wp-block-post-title :where(a) { display: inline-block }`. Ένα inline-block
 * παιδί μετράει ως ένα ενιαίο κομμάτι, οπότε το line-clamp πάνω στο h2 δεν
 * έκοβε ποτέ τίποτα: ο τίτλος έβγαινε τρεις σειρές και η κάρτα ψήλωνε.
 *
 * Ο επιλογέας του WordPress έχει βαρύτητα (0,1,0), γιατί το :where() δεν μετράει,
 * οπότε ο δικός μας περνάει χωρίς !important.
 */
.dl-cs-cart-picks .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dl-cs-cart-picks .wp-block-woocommerce-product-price {
	margin-bottom: 8px !important;
}

.dl-cs-cart-picks .wc-block-components-product-price {
	font-size: 12.5px !important;
}

.dl-cs-cart-picks .wc-block-components-product-button__button {
	width: 100%;
	padding: 8px 10px;
	font-size: 12px !important;
	line-height: 1.3;
}

@media ( max-width: 600px ) {
	ul.dl-cs-cart-picks.dl-cs-cart-picks {
		grid-template-columns: repeat( auto-fill, minmax( 100px, 140px ) );
		gap: 14px;
	}
}