/*!
 * FOUKA bestsellers band overrides - Elementor template 6160, section b801526
 * Front page only (enqueued by mu-plugins/fouka-bestsellers-tweaks.php).
 *
 * Visual language copied from the front-page #fkpromo / .fkpromo block
 * ("Είσαι για πακέτο;"): bright yellow 90deg wash, mint translucent panels
 * (#BFFCF399) with a soft backdrop blur, square corners, dark square CTAs
 * and bold dark type. No background photo on this band.
 *
 * The Elementor HTML widget keeps its own inline <style>/<script>; everything
 * here overrides it with !important + higher specificity. Nothing in the
 * Elementor template or the database is edited, so deleting the mu-plugin
 * files restores the previous marquee exactly.
 */

/* -------------------------------------------------------------------------
   1. Band background: the same yellow-to-cream wash as .fkpromo, without the
      photo. The mint glass lives on the product cards (section 4a).
   ---------------------------------------------------------------------- */
html body .elementor-element.elementor-element-b801526.elementor-element-b801526 {
	background-color: #FDF7F2 !important;
	background-image: linear-gradient(90deg, #FFFB76 0%, rgba(255, 251, 118, 0.62) 55%, rgba(255, 251, 118, 0.30) 100%) !important;
	background-size: auto !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: clamp(40px, 4.5vw, 64px) 0 !important;
	color: #2f2a28 !important;
}

/* 1a. Full-width band: break out of the theme's 90%-width homepage wrapper
   and span the viewport edge to edge. The inner .elementor-container keeps
   the 1400px / 22px content cap, so the product grid stays aligned while the
   yellow wash runs full width. The Elementor parent (.elementor-6024) clips
   overflow, so it is opened up here. */
html body .elementor-6024,
html body .rh-fullbrowser {
	overflow: visible !important;
}

html body .elementor-element.elementor-element-b801526.elementor-element-b801526 {
	position: relative !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

html body .elementor-element.elementor-element-b801526.elementor-element-b801526 > .elementor-container {
	max-width: 1400px !important;
	width: 100% !important;
	padding-left: 22px !important;
	padding-right: 22px !important;
	box-sizing: border-box !important;
}

/* 1b. Heading: fkpromo's bold, tight, dark title instead of the soft
   light-green theme heading. */
html body .elementor-element-b801526 .elementor-widget-heading {
	margin-bottom: 26px !important;
}

html body .elementor-element-b801526 .elementor-widget-heading .elementor-heading-title {
	font-weight: 400 !important; /* keep the theme's normal heading weight, not the fkpromo display weight */
	letter-spacing: 0 !important;
	text-align: center !important;
}

/* -------------------------------------------------------------------------
   2. Scroll viewport: horizontal, snap based, no visible scrollbar.
      Replaces the old overflow:hidden marquee viewport.
   ---------------------------------------------------------------------- */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport.fouka-bs-viewport {
	position: relative;
	width: 100%;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory !important;
	scroll-padding-inline: 0;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
	padding: 0 !important;
	margin: 0 !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport.fouka-bs-viewport::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}

/* -------------------------------------------------------------------------
   3. Track: kill the CSS marquee animation and lay the cards out in a single
      row with a real gap. The inline widget's --fouka-bs-cardw variable is
      ignored on purpose; widths are set below.
   ---------------------------------------------------------------------- */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 24px !important;
	column-gap: 24px !important;
	grid-template-columns: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	animation: none !important;
	transform: none !important;
	will-change: auto !important;
}

/* keep the shortcode's float clearfixes out of the flex row */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > .clearfix {
	display: none !important;
}

/* -------------------------------------------------------------------------
   4. Cards: 4 visible on desktop, gap 24px. Two classes repeat b801526 on
      purpose: it beats the inline widget rule for --fouka-bs-cardw.
   ---------------------------------------------------------------------- */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product {
	float: none !important;
	clear: none !important;
	flex: 0 0 calc((100% - 72px) / 4) !important; /* (4 - 1) * 24px */
	width: calc((100% - 72px) / 4) !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	scroll-snap-align: start !important;
	scroll-snap-stop: always !important;
}

/* 4a. Mint glass card surface: the .fkpromo-copy / .fkpromo-stage treatment
   (#BFFCF399 + backdrop blur), square corners and no shadow. Text gets 18px
   side breathing room; the product image stays inside a narrow mint frame. */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product {
	background-color: rgba(191, 252, 243, 0.60) !important;
	background-color: #BFFCF399 !important;
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 0 96px !important; /* extra bottom room for the absolute price/button bar */
}

/* image stage: leave a visible mint frame around the white product photo */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > figure {
	margin: 12px 10px 14px !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > .cat_for_grid,
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > h3,
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > .rh_woo_star {
	padding-left: 18px !important;
	padding-right: 18px !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > .cat_for_grid {
	margin-top: 2px !important;
	font-size: 10px !important;
	line-height: 1.35 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #5c4f49 !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > .cat_for_grid a {
	color: #5c4f49 !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > h3 {
	margin: 6px 0 10px !important;
	font-family: Averta, arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #2f2a28 !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > h3 a {
	color: #2f2a28 !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > .rh_woo_star {
	margin: 0 0 10px !important;
	color: #2f2a28 !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > .rh_woo_star .rhwoostar {
	color: #2f2a28 !important;
}

/* 4b. Price/button bar: dark square CTA, same language as .fkpromo-cta. */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product > .border-top.abposbot {
	padding-left: 18px !important;
	padding-right: 18px !important;
	border-top-color: rgba(47, 42, 40, 0.12) !important;
	background: transparent !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .price_for_grid,
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .price_for_grid .woocommerce-Price-amount {
	color: #2f2a28 !important;
	font-weight: 800 !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .add_to_cart_button {
	background: #2f2a28 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 10px 14px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	transition: background-color 0.18s ease;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .add_to_cart_button:hover,
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .add_to_cart_button:focus {
	background: #c4506d !important;
	color: #fff !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .add_to_cart_button svg {
	width: 14px !important;
	height: 14px !important;
	margin-right: 6px !important;
	fill: #fff !important;
}

/* 4c. "Best seller" badge: the theme's corner ribbon is hidden by the
   site-wide inline rule `.re-ribbon-badge.badge_2 span{display:none}`, which
   leaves only its 100x100 outer box visible. Rebuild it as a small dark label
   instead of showing that box. */
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .re-ribbon-badge.badge_2 {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	background: #2f2a28 !important;
	color: #fff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 4px 7px !important;
	z-index: 3 !important;
	pointer-events: none !important;
	text-align: center !important;
	transform: none !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .re-ribbon-badge.badge_2 > span {
	display: block !important;
	position: static !important;
	top: auto !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	font-family: Averta, arial, sans-serif !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.08em !important;
	text-align: center !important;
	text-transform: uppercase !important;
	transform: none !important;
}

html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .re-ribbon-badge.badge_2 > span::before,
html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product .re-ribbon-badge.badge_2 > span::after {
	content: none !important;
	display: none !important;
}

/* tablet: 3 visible, gap 20px */
@media (max-width: 1023px) {
	html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track {
		gap: 20px !important;
		column-gap: 20px !important;
	}

	html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product {
		flex: 0 0 calc((100% - 40px) / 3) !important; /* (3 - 1) * 20px */
		width: calc((100% - 40px) / 3) !important;
	}
}

/* small tablet / large phone: 2 visible, gap 16px */
@media (max-width: 767px) {
	html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track {
		gap: 16px !important;
		column-gap: 16px !important;
	}

	html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product {
		flex: 0 0 calc((100% - 16px) / 2) !important; /* (2 - 1) * 16px */
		width: calc((100% - 16px) / 2) !important;
	}
}

/* phone: 1 visible, gap 16px */
@media (max-width: 519px) {
	html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track > div.col_item.product.type-product {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
}

/* -------------------------------------------------------------------------
   5. Reduced motion: no marquee, no animation. The JS also refuses to
      auto-advance; the band stays manually scrollable/snappable.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html body .elementor-element-b801526 .fouka-bestsellers .fouka-bs-viewport > .grid_woo.fouka-bs-track {
		animation: none !important;
		transform: none !important;
	}
}