/* =============================================================================
   Planet Emporiki - Main Stylesheet
   Matches the existing Woodmart-based design: navy/blue/white color scheme
   ============================================================================= */

/* === CSS Variables === */
:root {
	--pe-primary: #1e3a5f;
	--pe-primary-dark: #162d4a;
	--pe-primary-light: #2a4f7f;
	--pe-accent: #2563eb;
	--pe-accent-hover: #1d4ed8;
	--pe-accent-light: #3b82f6;
	--pe-orange: #f59e0b;
	--pe-green: #16a34a;
	--pe-green-light: #dcfce7;
	--pe-red: #ef4444;
	--pe-white: #ffffff;
	--pe-bg: #f8fafc;
	--pe-bg-alt: #f1f5f9;
	--pe-border: #e2e8f0;
	--pe-border-hover: #cbd5e1;
	--pe-text: #1e293b;
	--pe-text-light: #475569;     /* WCAG AA on white: 7.5:1 */
	--pe-text-muted: #64748b;     /* WCAG AA on white: 4.66:1 (was #94a3b8 = 2.92:1, failed) */
	--pe-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
	--pe-shadow:    0 1px 3px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05);
	--pe-shadow-md: 0 1px 3px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.07);
	--pe-shadow-lg: 0 1px 3px rgba(15,23,42,.04), 0 14px 36px rgba(15,23,42,.10);
	--pe-radius: 10px;
	--pe-radius-lg: 14px;
	--pe-radius-xl: 18px;
	--pe-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--pe-font-heading: 'Poppins', 'Roboto', sans-serif;
	--pe-container: 1320px;
	--pe-transition: .15s ease;
	--pe-transition-md: .18s cubic-bezier(.22,1,.36,1);
}

/* Smooth-scroll + offscreen-skip rendering for long shop pages */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.pe-features,
.pe-cats,
.pe-brands,
.pe-flyer-section,
.pe-stats-section,
.pe-carousel-section,
.related.products {
	content-visibility: auto;
	contain-intrinsic-size: 1px 480px;
}

/* Focus-visible: keyboard-only outline so mouse users don't see it */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid #234bab;
	outline-offset: 2px;
	border-radius: 4px;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--pe-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--pe-text);
	background: var(--pe-white);
	-webkit-font-smoothing: antialiased;
}

/* Kill the page-level horizontal scrollbar caused by full-bleed
   `width:100vw` breakouts (home banner, shop carousel). 100vw includes
   the vertical scrollbar width while the body content area does not, so
   those elements stick out by ~17px on Windows. `overflow-x: clip` blocks
   the overflow without creating a new scroll container — keeps any
   `position: sticky` ancestor behavior intact (unlike `hidden`). */
.pe-page-wrapper { overflow-x: clip; }

/* Homepage banner abuts the nav strip — no white gap between them.
   Force the main + homepage wrappers (and the banner section itself)
   to zero top spacing on the front page only. */
.home .pe-main,
.page-template-front-page .pe-main { padding-top: 0; margin-top: 0; }
.pe-homepage { margin: 0; }
.pe-home-banner-wrap { margin-top: 0; }
.pe-home-banner-wrap > .pe-hero-wrap { margin-top: 0 !important; }

a { color: var(--pe-accent); text-decoration: none; transition: color var(--pe-transition); }
a:hover { color: var(--pe-accent-hover); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pe-font-heading);
	font-weight: 700;
	margin: 0 0 .5em;
	color: var(--pe-text);
}

/* === Container === */
.pe-container {
	max-width: var(--pe-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* === Buttons === */
.pe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--pe-radius);
	font: 600 14px/1 var(--pe-font);
	cursor: pointer;
	transition: all var(--pe-transition);
	border: 2px solid transparent;
	text-decoration: none;
}

.pe-btn-primary {
	background: var(--pe-accent);
	color: var(--pe-white);
	border-color: var(--pe-accent);
}
.pe-btn-primary:hover {
	background: var(--pe-accent-hover);
	border-color: var(--pe-accent-hover);
	color: var(--pe-white);
}

.pe-btn-outline {
	background: var(--pe-white);
	color: var(--pe-text);
	border-color: var(--pe-border);
}
.pe-btn-outline:hover {
	border-color: var(--pe-accent);
	color: var(--pe-accent);
}

/* ================================================================
   HEADER
   ================================================================ */

.pe-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15,23,42,.06);
	font-family: var(--pe-font);
}

/* Checkout: hide theme header — planet-emporiki-checkout plugin renders its own topbar (.pmsc-topbar) */
body.woocommerce-checkout:not(.woocommerce-order-received) .pe-header { display: none; }
body.woocommerce-checkout:not(.woocommerce-order-received) .pe-breadcrumb,
body.woocommerce-checkout:not(.woocommerce-order-received) nav.woocommerce-breadcrumb { display: none; }

/* Category carousel — shared between shop page and front page */
.pe-cat-carousel-wrap { position: relative; display: flex; align-items: center; gap: 6px; }
.pe-cat-carousel { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px; scroll-behavior: smooth; }
.pe-cat-carousel::-webkit-scrollbar { display: none; }
.pe-cat-card { flex: 0 0 calc((100% - 20px) / 3); min-width: 180px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #fff; border: 1px solid #eef2f7; border-radius: 12px; text-decoration: none; color: #0f172a; scroll-snap-align: start; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05); transition: box-shadow .18s ease; min-height: 64px; overflow: hidden; }
.pe-cat-card:hover { transform: none; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.07); border-color: #eef2f7; color: #0f172a; }
.pe-cat-card-name { flex: 1; font: 700 13px/1.25 var(--pe-font-heading,inherit); letter-spacing: .01em; }
.pe-cat-card-img { flex: 0 0 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.pe-cat-card-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.pe-cat-card:hover .pe-cat-card-img img { transform: scale(1.08); }
/* ============================================================
   Unified arrow / nav button — site-wide.
   White rounded-square with layered shadow + dark icon.
   Matches Woodmart .wd-arrow-inner styling for visual consistency.
   ============================================================ */
.pe-cat-nav,
.pe-promo-nav,
.pe-carousel-arrow {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 0;
	background: #ffffff;
	color: #111827;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: none;
	transition: transform .15s ease, background .15s ease, color .15s ease, opacity .2s ease;
}
.pe-cat-nav:hover,
.pe-promo-nav:hover,
.pe-carousel-arrow:hover {
	transform: translateY(-1px);
	background: #ffffff;
	color: #111827;
}
.pe-cat-nav:active,
.pe-promo-nav:active,
.pe-carousel-arrow:active {
	transform: translateY(0);
}
.pe-cat-nav svg,
.pe-promo-nav svg,
.pe-carousel-arrow svg {
	width: 16px;
	height: 16px;
	display: block;
}
.pe-cat-nav[disabled],
.pe-cat-nav:disabled,
.pe-promo-nav:disabled,
.pe-carousel-arrow:disabled,
.pe-carousel-arrow[hidden] {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Woodmart carousel/slider arrows — match the same design.
   Outer .wd-arrow is a hit-target wrapper; the visible chip is .wd-arrow-inner. */
.wd-arrow {
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
}
.wd-arrow-inner {
	width: 44px !important;
	height: 44px !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	border: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	cursor: pointer;
}
.wd-arrow-inner svg {
	width: 16px !important;
	height: 16px !important;
	fill: #111827 !important;
}
.wd-arrow-inner i {
	font-size: 16px !important;
	color: #111827 !important;
}
@media (max-width: 1024px) { .pe-cat-card { flex: 0 0 calc((100% - 14px) / 2); } }
@media (max-width: 768px)  { .pe-cat-card { flex: 0 0 80%; min-width: 0; } }
@media (max-width: 480px)  { .pe-cat-card { flex: 0 0 88%; } }

/* Shop page category carousel — compact back card + same-size category cards */
.pe-catnav-carousel-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 8px 0 16px;
}
.pe-catnav-back-card {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	color: var(--pe-text);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: border-color .15s, transform .15s;
	min-height: 64px;
}
.pe-catnav-back-card:hover { border-color: #eef2f7; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.07); transform: none; }
.pe-catnav-back-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: #eef2ff;
	color: #1e3a8a;
	border-radius: 50%;
}
.pe-catnav-back-ico svg { width: 14px; height: 14px; }
.pe-catnav-back-text { display: flex; flex-direction: column; line-height: 1.1; }
.pe-catnav-back-text strong { font: 800 12px/1.2 var(--pe-font); color: var(--pe-text); }
.pe-catnav-back-text span   { font: 500 10px/1.2 var(--pe-font); color: var(--pe-text-light); }
.pe-cat-carousel-wrap--shop { flex: 1; min-width: 0; }
.pe-cat-card--shop.is-active {
    background: #fff !important;
    border-color: #2563eb !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 1px #2563eb, 0 1px 3px rgba(15, 23, 42, .05), 0 6px 16px rgba(37, 99, 235, .14) !important;
}
.pe-cat-card--shop.is-active .pe-cat-card-name { color: #1e3a8a; }

/* Shop page category strip — compact pill-card variant. The default
   .pe-cat-card is a 1/3-width tile used on the homepage; on the shop layout
   (which now spans ~100vw) a 1/3 split makes each card huge. Override here. */
.pe-cat-card.pe-cat-card--shop {
	flex: 0 0 220px !important;
	min-width: 130px !important;
	max-width: 170px !important;
	min-height: 60px !important;
	padding: 8px 14px !important;
	gap: 10px !important;
	border-radius: 10px !important;
}
.pe-cat-card.pe-cat-card--shop .pe-cat-card-name {
	font-size: 12.5px !important;
	font-weight: 700 !important;
}
.pe-cat-card.pe-cat-card--shop .pe-cat-card-img {
	flex: 0 0 36px !important;
	height: 36px !important;
}
@media (max-width: 768px) {
	/* Mobile shop strip: drop arrows + image, let chips flow as compact pills.
	   Multiple chips peek at once so the user knows there's more to swipe. */
	.pe-cat-carousel-wrap--shop .pe-cat-nav { display: none !important; }
	.pe-cat-carousel-wrap--shop .pe-cat-carousel { gap: 8px; padding: 4px 0; }
	.pe-cat-card.pe-cat-card--shop {
		flex: 0 0 auto !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		padding: 9px 14px !important;
		border-radius: 999px !important;
		gap: 0 !important;
		background: #fff;
		border-color: #e2e8f0 !important;
	}
	.pe-cat-card.pe-cat-card--shop .pe-cat-card-name {
		font-size: 13px !important;
		font-weight: 700 !important;
		white-space: nowrap;
	}
	.pe-cat-card.pe-cat-card--shop .pe-cat-card-img { display: none !important; }
	.pe-cat-card.pe-cat-card--shop.is-active {
		background: #1e3a8a !important;
		border-color: #1e3a8a !important;
	}
	.pe-cat-card.pe-cat-card--shop.is-active .pe-cat-card-name { color: #fff !important; }
	.pe-catnav-carousel-row { gap: 6px; margin: 4px 0 12px; }
	.pe-catnav-back-card { min-height: 0; padding: 8px 10px; }
}

/* ─── Header — sticky with auto-hide on scroll-down, reveal on scroll-up.
   IMPORTANT: avoid `will-change: transform` and avoid applying `transform`
   here — both create a containing block that traps any `position: fixed`
   descendant (like the [side_menu_categories] .bo-panel) inside the header,
   collapsing its `height: 100%` to the header's height. We slide via `top`
   instead, which doesn't create a containing block. ─── */
.pe-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	transition: top .25s ease;
}
.pe-header.pe-header-hidden { top: -200px; }
.pe-header.pe-header-scrolled { box-shadow: 0 2px 12px rgba(15,23,42,.08); }

/* ─── Top Bar (white) ─── */
.pe-header-top {
	padding: 5px 0;
	background: #fff;
}
/* Header gets a slightly wider container than page content (1480 vs 1320) so
   the logo + search shift left and the actions shift right on wide screens —
   but still NOT full-bleed (user has rejected edge-to-edge headers). */
.pe-header .pe-container {
	max-width: 1380px;
}
.pe-header-top-inner {
	display: flex;
	align-items: center;
	gap: 44px;
}

/* Logo — more breathing room, primary brand mark */
.pe-header-logo { flex-shrink: 0; display: flex; align-items: center; max-width: 340px; padding-right: 8px; overflow: hidden; }
.pe-logo-link   { display: inline-flex; align-items: center; text-decoration: none; max-height: 64px; }
.pe-logo-img,
.pe-logo-svg    { height: 60px !important; width: auto !important; max-height: 60px !important; max-width: 300px !important; display: block !important; object-fit: contain; }

/* Search bar — refined pill with leading magnifier icon + blue submit.
   flex:1 + no max-width = fills all space between the logo and the actions
   block (which is anchored to the right via margin-left:auto). */
.pe-header-search {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 12px;
	margin-right: 16px;
	position: relative;
}
.pe-search-input-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 52px;
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 999px;
	padding: 0 6px 0 22px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	transition: border-color .2s, box-shadow .2s, transform .15s;
}
.pe-search-input-wrap:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 14px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
}
.pe-search-input-wrap:focus-within {
	border-color: #234bab;
	box-shadow: 0 0 0 4px rgba(35,75,171,.12), 0 4px 14px rgba(35,75,171,.08);
}
.pe-search-leading-icon {
	flex-shrink: 0;
	color: #94a3b8;
	pointer-events: none;
	transition: color .2s;
}
.pe-search-input-wrap:focus-within .pe-search-leading-icon { color: #234bab; }
.pe-search-input {
	flex: 1;
	border: 0;
	background: transparent;
	font: 500 15px/1 var(--pe-font);
	color: #0f172a;
	outline: none;
	min-width: 0;
	letter-spacing: .005em;
}
.pe-search-input::placeholder { color: #64748b; font-weight: 400; }  /* AA contrast 4.66:1 */

/* Hide ANY barcode-scanner button injected by smart-ai-search or any
   plugin to avoid the duplicate icon the user reported. */
.pe-search-input-wrap .pe-barcode-btn,
.pe-search-input-wrap [class*="barcode"]:not(.pe-search-leading-icon),
.pe-search-input-wrap button[title*="Barcode" i],
.pe-search-input-wrap button[aria-label*="Barcode" i],
.pe-search-input-wrap button[title*="Σαρωτής" i] { display: none !important; }

.pe-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	background: linear-gradient(135deg, #234bab 0%, #1e3a8a 100%);
	color: #fff;
	cursor: pointer;
	border-radius: 999px;
	margin-left: auto;
	box-shadow: 0 2px 6px rgba(35,75,171,.32);
	transition: background .2s, transform .1s, box-shadow .2s;
}
.pe-search-btn:hover {
	background: linear-gradient(135deg, #2a59c4 0%, #234bab 100%);
	box-shadow: 0 4px 12px rgba(35,75,171,.42);
}
.pe-search-btn:active { transform: scale(.96); }
.pe-search-btn svg { stroke: #fff; }

/* =============================================================================
   Header right-side actions
   Single typographic scale: var(--pe-font), 14px / 600 — applied to every
   action so contact button, account, cart, and nav read as one system.
   ============================================================================= */
.pe-header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
	margin-left: auto;
	font: 600 16px/1.2 var(--pe-header-font);
	color: #0f172a;
}

/* Shared brand color tokens for header chrome.
   --pe-header-font matches the side-menu plugin's "Μενού" trigger so every
   piece of header text reads as one type system. */
:root {
	--pe-header-blue: #234bab;
	--pe-header-blue-dark: #1e3a8a;
	--pe-header-icon-size: 36px;
	--pe-header-font: "Roboto Condensed", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Apply the unified header font to every text-bearing element in the header.
   Sizes/weights still vary for hierarchy, but family is identical to Μενού. */
.pe-header,
.pe-header a,
.pe-header button,
.pe-header input,
.pe-header span { font-family: var(--pe-header-font); }

/* Επικοινωνία button — white pill, brand blue border */
.pe-contact-btn,
.pe-contact-btn-wrap > a,
.pe-contact-btn-wrap > button {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	background: #fff;
	border: 1.5px solid var(--pe-header-blue-dark);
	border-radius: 999px;
	color: var(--pe-header-blue-dark) !important;
	font: 600 14px/1 var(--pe-header-font);
	letter-spacing: .01em;
	text-decoration: none;
	transition: background .2s, color .2s, transform .1s;
}
.pe-contact-btn:hover,
.pe-contact-btn-wrap > a:hover,
.pe-contact-btn-wrap > button:hover {
	background: var(--pe-header-blue-dark);
	color: #fff !important;
}
.pe-contact-btn:hover svg,
.pe-contact-btn-wrap > a:hover svg,
.pe-contact-btn-wrap > button:hover svg { fill: #fff; stroke: #fff; }

/* ─── Account & Cart — identical icon button system ─── */
.pe-account-wrap { position: relative; }

.pe-account-link,
.pe-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #0f172a;
	text-decoration: none;
	font: 600 16px/1.15 var(--pe-header-font);
	padding: 2px 10px 2px 2px;
	border-radius: 999px;
	transition: background .15s, color .15s;
	position: relative;
}
.pe-account-link:hover,
.pe-cart-link:hover {
	background: #eef2fb;
	color: var(--pe-header-blue-dark);
}

/* Solid-blue circle by default — no hover needed to surface the color.
   Goes a shade darker on hover so there's still feedback. */
.pe-account-icon,
.pe-cart-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pe-header-icon-size);
	height: var(--pe-header-icon-size);
	border-radius: 50%;
	background: var(--pe-header-blue);
	color: #fff;
	flex-shrink: 0;
	transition: background .18s;
	position: relative;
}
.pe-account-link:hover .pe-account-icon,
.pe-cart-link:hover .pe-cart-icon-wrap {
	background: var(--pe-header-blue-dark);
}
.pe-account-icon svg { width: 18px; height: 18px; color: #fff; }
.pe-cart-icon-wrap svg { width: 18px; height: 18px; color: #fff; flex-shrink: 0; }

/* Account + cart label share the SAME two-line typographic scale so they
   read as one system. Top line: light/gray hint. Bottom line: bold dark. */
.pe-account-text,
.pe-cart-label {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	white-space: nowrap;
	line-height: 1.15;
}
.pe-account-line-top,
.pe-cart-line-top {
	font: 500 14px/1.2 var(--pe-header-font);
	color: #64748b;
	letter-spacing: .01em;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.pe-account-line-bot,
.pe-cart-line-bot {
	font: 700 16px/1.2 var(--pe-header-font);
	color: #0f172a;
	letter-spacing: .005em;
}
/* Account label runs lighter than the cart label so the user's name
   doesn't shout louder than the action items beside it. */
.pe-account-line-top { font-size: 12px; }
.pe-account-line-bot { font-size: 14px; }
.pe-account-emoji  { font-size: 14px; line-height: 1; }
.pe-cart-sep       { color: #cbd5e1; }
.pe-cart-items     { font-weight: 700; color: #475569; }

/* Logged-in greeting: choreographed ONE-SHOT entrance + always-on hover.
   functions.php (pe_login_anim_body_class) adds `body.pe-just-logged-in`
   on the FIRST page render after wp_login and clears the flag immediately
   — so the entrance choreography below plays exactly once per sign-in,
   not on every page navigation. The hover interactions stay scoped to
   `body.logged-in` so they remain available on every subsequent page.

   Entrance timeline (only when body has both .logged-in AND .pe-just-logged-in):
     T=0.00s  whole label container fades + tilts in (.45s)
     T=0.05s  avatar SVG spirals in from a small rotated state (.55s)
     T=0.15s  avatar circle ring pulse expands outward + soft outer glow (1.1s)
     T=0.20s  greeting top line ("Καλό βράδυ") rises 6px up into place (.45s)
     T=0.30s  emoji bounces in with overshoot (.65s)
     T=0.40s  customer name rises into place (.5s)
     T=0.55s  light sheen sweeps across the name (1.3s)

   Hover (always available for logged-in users):
     - whole pill lifts -1px
     - avatar circle scales 1.06× and the emoji does a 5-keyframe wave

   The sheen uses background-clip:text with the dark base colour BAKED INTO
   the gradient at both ends (no-repeat, 300% wide), so the name reads solid
   #0f172a during the one-shot reveal. After the entrance, the gradient/fill
   override is gone (selector no longer matches), so the name renders with
   its baseline `color: #0f172a` rule from .pe-account-line-bot above.
   Reduced-motion users get the static label. */

@keyframes pe-account-fade-in {
	from { opacity: 0; transform: translateX(10px); filter: blur(3px); }
	to   { opacity: 1; transform: translateX(0);    filter: blur(0); }
}
@keyframes pe-account-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes pe-account-shine {
	0%   { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}
@keyframes pe-account-emoji-pop {
	0%   { transform: scale(0)    rotate(-45deg); opacity: 0; }
	55%  { transform: scale(1.4)  rotate(15deg);  opacity: 1; }
	78%  { transform: scale(0.9)  rotate(-6deg); }
	100% { transform: scale(1)    rotate(0); }
}
@keyframes pe-account-emoji-wave {
	0%, 100% { transform: rotate(0)            scale(1); }
	20%      { transform: rotate(-15deg)       scale(1.12); }
	40%      { transform: rotate(15deg)        scale(1.12); }
	60%      { transform: rotate(-10deg)       scale(1.06); }
	80%      { transform: rotate(5deg)         scale(1.03); }
}
@keyframes pe-account-icon-reveal {
	0%   { transform: scale(.4)  rotate(-120deg); opacity: 0; }
	60%  { transform: scale(1.12) rotate(12deg);  opacity: 1; }
	100% { transform: scale(1)   rotate(0);       opacity: 1; }
}
@keyframes pe-account-icon-pulse {
	0%   { box-shadow: 0 0 0 0  rgba(35,75,171,.6),  0 0 0 0  rgba(35,75,171,0); }
	50%  { box-shadow: 0 0 0 9px rgba(35,75,171,.16), 0 0 18px 3px rgba(35,75,171,.4); }
	100% { box-shadow: 0 0 0 18px rgba(35,75,171,0), 0 0 0 0  rgba(35,75,171,0); }
}

/* === Entrance — ONE-SHOT, only on the first render after wp_login === */
body.pe-just-logged-in .pe-account-text {
	animation: pe-account-fade-in .45s cubic-bezier(.22,1,.36,1) both;
}
body.pe-just-logged-in .pe-account-line-top {
	animation: pe-account-rise .45s cubic-bezier(.22,1,.36,1) .2s both;
}
body.pe-just-logged-in .pe-account-line-bot {
	background-image: linear-gradient(
		110deg,
		#0f172a  0%,
		#0f172a 32%,
		#3a62c4 46%,
		#bcd0ff 50%,
		#3a62c4 54%,
		#0f172a 68%,
		#0f172a 100%
	);
	background-size: 300% 100%;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation:
		pe-account-rise  .5s cubic-bezier(.22,1,.36,1) .4s both,
		pe-account-shine 1.3s cubic-bezier(.4,0,.2,1) .55s 1 both;
}
body.pe-just-logged-in .pe-account-emoji {
	display: inline-block;
	transform-origin: 50% 60%;
	animation: pe-account-emoji-pop .65s cubic-bezier(.34,1.56,.64,1) .3s both;
}
body.pe-just-logged-in .pe-account-link .pe-account-icon {
	animation:
		pe-account-icon-reveal .55s cubic-bezier(.34,1.56,.64,1) .05s both,
		pe-account-icon-pulse  1.1s cubic-bezier(.4,0,.2,1) .15s 1 both;
}

/* === Hover micro-interactions — ALWAYS-ON for logged-in users === */
body.logged-in .pe-account-link {
	transition:
		transform .25s cubic-bezier(.22,1,.36,1),
		background .15s ease,
		color      .15s ease;
}
body.logged-in .pe-account-link:hover { transform: translateY(-1px); }
body.logged-in .pe-account-link:hover .pe-account-icon {
	transform: scale(1.06);
	transition: transform .25s cubic-bezier(.22,1,.36,1), background .18s ease;
}
body.logged-in .pe-account-link:hover .pe-account-emoji {
	animation: pe-account-emoji-wave .65s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	body.pe-just-logged-in .pe-account-text,
	body.pe-just-logged-in .pe-account-line-top,
	body.pe-just-logged-in .pe-account-line-bot,
	body.pe-just-logged-in .pe-account-emoji,
	body.pe-just-logged-in .pe-account-link .pe-account-icon,
	body.logged-in .pe-account-link,
	body.logged-in .pe-account-link .pe-account-icon {
		animation: none !important;
		transition: none !important;
	}
	body.logged-in .pe-account-link:hover { transform: none; }
	body.logged-in .pe-account-link:hover .pe-account-icon { transform: none; }
	body.pe-just-logged-in .pe-account-line-bot {
		background: none;
		-webkit-text-fill-color: currentColor;
		color: #0f172a;
	}
}

/* Header cart label: top line shows live item count + "προϊόντα", bottom
   line shows subtotal. Count is tinted in brand blue so the number reads
   first; the word stays in the muted top-line gray. */
.pe-cart-items-count { font-weight: 700; color: var(--pe-header-blue); }
.pe-cart-items-word  { color: #64748b; }

/* Guest account pill (non-logged-in): single-line "Είσοδος / Εγγραφή"
   with a slightly larger circle icon — matches the requested mock. WP adds
   `.logged-in` to <body> for authenticated users, so `:not(.logged-in)`
   targets guests only. */
.pe-account-line-single {
	font: 600 13px/1.2 var(--pe-header-font);
	color: #0f172a;
	letter-spacing: .005em;
	white-space: nowrap;
}
body:not(.logged-in) .pe-account-icon { width: 42px; height: 42px; }
body:not(.logged-in) .pe-account-icon svg { width: 22px; height: 22px; }

/* Guest header: cap the search bar slightly so the actions block
   (Επικοινωνία + Είσοδος / Εγγραφή pill) reads as a separate cluster
   on the right edge, with a clear gap between them. Logged-in users keep
   the uncapped search since the actions block is heavier (cart + name). */
body:not(.logged-in) .pe-header-search { flex: 1 1 auto; max-width: 640px; }

/* Account hover dropdown menu (existing behaviour) */
.pe-account-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 14px 40px -8px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	z-index: 1100;
	font-family: var(--pe-font);
}
.pe-account-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}
.pe-account-wrap:hover .pe-account-menu,
.pe-account-wrap:focus-within .pe-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.pe-account-menu-item {
	display: block;
	padding: 9px 14px;
	font: 600 13px/1.2 var(--pe-font);
	color: #334155;
	text-decoration: none;
	border-radius: 8px;
	transition: background .12s, color .12s;
}
.pe-account-menu-item:hover {
	background: #f1f5f9;
	color: var(--pe-header-blue);
}
.pe-account-menu-item:last-child {
	border-top: 1px solid #e2e8f0;
	margin-top: 4px;
	padding-top: 11px;
	color: #b91c1c;
}
.pe-account-menu-item:last-child:hover { background: #fef2f2; color: #b91c1c; }

/* Count badge — red dot top-right, hidden when 0 */
.pe-cart-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -5px;
    right: -15px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #1264ff;
    color: #fff;
    font: 700 10.5px / 1 var(--pe-font);
    border: 2px solid #fff;
    border-radius: 999px;
    pointer-events: none;
}
.pe-cart-count[data-zero] { display: none !important; }
.pe-cart-link:hover .pe-cart-line-bot { color: var(--pe-header-blue-dark); }

/* ─── Navigation Bar — slim, single typographic scale, active = hover ─── */
.pe-header-nav {
	background: #234bab;
}
.pe-nav-inner {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
}

/* Μενού toggle — same font weight + size + height as the nav links */
.pe-menu-toggle-wrap { padding: 5px 0; }
.pe-menu-toggle-wrap > button,
.pe-menu-toggle-wrap > a,
.pe-menu-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding: 0 16px 0 12px;
	background: transparent;
	border: 0;
	color: #fff !important;
	font: 600 16px/1 var(--pe-header-font);
	letter-spacing: .02em;
	cursor: pointer;
	text-decoration: none;
	border-radius: 999px;
	transition: background .18s;
}
.pe-menu-toggle-wrap > button:hover,
.pe-menu-toggle-wrap > a:hover,
.pe-menu-toggle:hover { background: rgba(255,255,255,.16); }

/* The side-menu plugin's "Μενού" trigger text is inside .bo-trigger-text —
   force it to inherit our header type system so it can't drift away from the
   rest of the header. */
.pe-menu-toggle-wrap .bo-trigger-text {
	font-family: var(--pe-header-font) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

/* Nav links list — scoped under .pe-header-nav so the bare `.pe-nav-item`
   rules in pe-my-account-plugin (which uses the same class for its sidebar
   items) can't bleed into the header on /my-account/. */
.pe-header-nav .pe-nav-links {
	list-style: none;
	margin: 0;
	padding: 5px 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.pe-header-nav .pe-nav-item {
	/* Defensive reset — the plugin's `.pe-nav-item` rules add transform,
	   background, padding, etc. None of that should apply in the header. */
	background: transparent !important;
	transform: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	display: inline-flex;
}
.pe-header-nav .pe-nav-item > a {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 19px;
	color: #fff;
	font: 600 15px/1 var(--pe-header-font);
	text-decoration: none;
	border-radius: 999px;
	transition: background .18s;
	background: transparent;
	transform: none;
}
.pe-header-nav .pe-nav-item > a:hover,
.pe-header-nav .pe-nav-highlight > a,
.pe-header-nav .pe-nav-item.current-menu-item > a {
	background: rgba(255,255,255,.16);
	color: #fff;
	box-shadow: none;
	transform: none;
}

/* ================================================================
   BREADCRUMBS — single-line, chevron separators, home icon.
   Markup is rendered by woocommerce/global/breadcrumb.php override.
   ================================================================ */
.pe-breadcrumb {
	padding: 14px 0;
	font: 500 13px/1.4 var(--pe-font, inherit);
	color: var(--pe-text-light);
}
.pe-breadcrumb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.pe-breadcrumb-list::-webkit-scrollbar { display: none; }
.pe-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}
.pe-breadcrumb-item a,
.pe-breadcrumb-item a:link,
.pe-breadcrumb-item a:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #64748b;
	text-decoration: none;
	transition: color .15s ease;
}
.pe-breadcrumb-item a:hover,
.pe-breadcrumb-item a:focus {
	color: #1e293b;
}
.pe-breadcrumb-item--home a {
	padding: 4px;
	margin: -4px;
	border-radius: 6px;
}
.pe-breadcrumb-item--home a:hover { background: rgba(15,23,42,.05); }
.pe-breadcrumb-home { display: block; flex-shrink: 0; }
.pe-breadcrumb-item--current,
.pe-breadcrumb-item--current .pe-breadcrumb-text {
	color: #0f172a;
	font-weight: 500;
}
.pe-breadcrumb-text {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 360px;
}
.pe-breadcrumb-sep-wrap {
	display: inline-flex;
	align-items: center;
	color: #cbd5e1;
	flex-shrink: 0;
}
.pe-breadcrumb-sep { display: inline-flex; align-items: center; }
.pe-breadcrumb-sep svg { display: block; }

/* Legacy WC breadcrumb fallback — kept for any plugin-rendered breadcrumbs
   that bypass our template override. */
nav.woocommerce-breadcrumb {
	padding: 14px 0;
	font-size: 13px;
	color: var(--pe-text-light);
}
nav.woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a:link,
nav.woocommerce-breadcrumb a:visited { color: #64748b; }
nav.woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:focus { color: #1e293b; }

/* ================================================================
   SUBCATEGORY NAVIGATION
   ================================================================ */
.pe-subcat-nav {
	padding: 16px 0;
	overflow: hidden;
}

.pe-subcat-nav-scroll {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.pe-subcat-nav-scroll::-webkit-scrollbar { display: none; }

.pe-subcat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 90px;
	padding: 12px;
	border: 2px solid var(--pe-border);
	border-radius: var(--pe-radius-lg);
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--pe-text);
	transition: all var(--pe-transition);
	cursor: pointer;
	text-decoration: none;
	flex-shrink: 0;
}
.pe-subcat-item:hover {
	border-color: var(--pe-accent);
	color: var(--pe-accent);
}
.pe-subcat-item.active {
	border-color: var(--pe-accent);
	background: #eff6ff;
	color: var(--pe-accent);
}

.pe-subcat-thumb {
	width: 60px;
	height: 60px;
	object-fit: contain;
	border-radius: 8px;
}

.pe-subcat-back {
	background: var(--pe-bg-alt);
	border-color: transparent;
}
.pe-subcat-back small {
	font-size: 10px;
	color: var(--pe-text-muted);
}

/* ================================================================
   SHOP LAYOUT
   ================================================================ */
/* Shop layout — filter sits at the far left of the viewport, products take
   the remaining width. We break out of .pe-container by using a 100vw width
   trick so the layout is wider than the rest of the site. */
.pe-shop-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 36px;
	padding: 24px 0 60px;
	align-items: start;
	/* Narrower than full viewport so cards don't sprawl. Tighter than before
	   to make individual product cards feel more compact (per design feedback). */
	width: calc(100vw - 200px);
	max-width: calc(100vw - 200px);
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: calc(-50vw + 100px);
	margin-right: calc(-50vw + 100px);
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.pe-shop-sidebar {
	position: sticky;
	top: 130px;
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	scrollbar-width: thin;
}

.pe-widget { margin-bottom: 24px; }
.pe-widget-title {
	font: 700 15px/1.3 var(--pe-font-heading);
	margin-bottom: 12px;
	color: var(--pe-text);
}

/* ===== Sidebar filter blocks ===== */
.pe-sidebar-wrap { display: flex; flex-direction: column; gap: 22px; }

.pe-filter {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 18px 16px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.pe-filter-title {
	margin: 0 0 12px;
	font: 800 15px/1.2 var(--pe-font);
	color: #0f172a;
	letter-spacing: .01em;
}

.pe-filter-search {
	position: relative;
	margin-bottom: 12px;
}
.pe-filter-search-input {
	width: 100%;
	height: 38px;
	padding: 0 36px 0 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	font: 400 13px/1 var(--pe-font);
	color: #0f172a;
	outline: none;
	transition: border-color .15s, background .15s;
}
.pe-filter-search-input:focus { border-color: #1e3a8a; background: #fff; }
.pe-filter-search svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	pointer-events: none;
}

.pe-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pe-filter-item { margin: 0; }
.pe-filter-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	color: #0f172a;
	text-decoration: none;
	font: 600 13px/1.2 var(--pe-font);
	transition: border-color .15s, background .15s, transform .1s;
}
.pe-filter-link:hover {
	border-color: #1e3a8a;
	background: #f1f5f9;
}
.pe-filter-item.is-active .pe-filter-link {
	border-color: #1e3a8a;
	background: rgba(30,58,138,.06);
	color: #1e3a8a;
}
.pe-filter-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}
.pe-filter-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/* Brand rows — generous, card-like layout so wide logos (e.g. Coca-Cola ~3:1)
   read clearly and brand names like "Monster Energy" don't get truncated.
   When a brand has no logo image set, the thumb shows a styled monogram of
   the first letter so the row keeps a uniform height. */
.pe-filter-brand-list .pe-filter-link {
	gap: 10px;
	padding: 8px 10px;
	min-height: 56px;
}
.pe-filter-brand-list .pe-filter-thumb {
	width: 60px;
	height: 40px;
	padding: 3px 5px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pe-filter-brand-list .pe-filter-link:hover .pe-filter-thumb {
	border-color: #cbd5e1;
	box-shadow: 0 2px 6px rgba(15,23,42,.08);
}
.pe-filter-brand-list .pe-filter-item.is-active .pe-filter-thumb {
	border-color: #1e3a8a;
	box-shadow: 0 0 0 2px rgba(30,58,138,.12);
}
.pe-filter-brand-list .pe-filter-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Monogram fallback when no brand image is set — soft blue gradient + initial. */
.pe-filter-brand-list .pe-filter-thumb-mono {
	padding: 0;
	background: linear-gradient(135deg, #eef4ff 0%, #dbe5ff 100%);
	border-color: #dbe5ff;
}
.pe-filter-brand-list .pe-filter-mono-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #1e3a8a;
	font: 800 16px/1 var(--pe-font, inherit);
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.pe-filter-brand-list .pe-filter-item.is-active .pe-filter-thumb-mono {
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}
.pe-filter-brand-list .pe-filter-item.is-active .pe-filter-mono-letter { color: #fff; }
/* Brand name allowed to wrap to 2 lines — full name beats a clean ellipsis here.
   The trailing !important defends against any later .pe-filter-name rule
   that re-applies white-space:nowrap (specificity equal would lose). */
.pe-filter-brand-list .pe-filter-name {
	white-space: normal !important;
	overflow: hidden;
	text-overflow: clip;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.3;
	font-size: 13.5px;
	word-break: break-word;
}
.pe-filter-brand-list .pe-filter-count {
	min-width: 24px;
	height: 20px;
	padding: 0 7px;
	font-size: 10.5px;
	background: #eef2f7;
}
.pe-filter-thumb-flag {
	border-radius: 50%;
	background: #f8fafc;
}
.pe-filter-thumb-flag img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.pe-filter-name {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #475569;
	font-weight: 600;
}
.pe-filter-item.is-active .pe-filter-name { color: #1e3a8a; font-weight: 700; }
.pe-filter-count {
	flex-shrink: 0;
	min-width: 28px;
	height: 22px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	border-radius: 999px;
	font: 700 11px/1 var(--pe-font);
	color: #64748b;
}
.pe-filter-item.is-active .pe-filter-count { background: #1e3a8a; color: #fff; }

/* Brand list scrolls if many brands */
.pe-filter-brand-list {
	max-height: 280px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
}

/* Promo list — checkbox style */
.pe-filter-item-checkbox .pe-filter-link { padding-left: 8px; }
.pe-filter-checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 1.5px solid #cbd5e1;
	border-radius: 4px;
	background: #fff;
	color: #fff;
	transition: background .15s, border-color .15s;
}
.pe-filter-item.is-active .pe-filter-checkbox {
	background: #1e3a8a;
	border-color: #1e3a8a;
}

/* Highlighted Υπερχονδρικής row — sits at top of promo filter, gold accent */
.pe-filter-item-yperx .pe-filter-link {
	background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
	border-color: #f59e0b;
}
.pe-filter-item-yperx .pe-filter-link:hover {
	background: linear-gradient(135deg, #fef3c7 0%, #fff8e1 100%);
	border-color: #d97706;
}
.pe-filter-item-yperx .pe-filter-name { color: #b45309; font-weight: 800; }
.pe-filter-item-yperx .pe-filter-count { background: #f59e0b; color: #fff; }
.pe-filter-item-yperx.is-active .pe-filter-link {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	border-color: #d97706;
}
.pe-filter-item-yperx.is-active .pe-filter-name { color: #fff; }
.pe-filter-item-yperx.is-active .pe-filter-count { background: #fff; color: #b45309; }
.pe-filter-item-yperx.is-active .pe-filter-checkbox {
	background: #fff;
	border-color: #fff;
	color: #d97706;
}

/* Active filters bar — chips with × + Clear all button */
.pe-active-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 14px;
	margin-bottom: 14px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.pe-active-filters__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 700 12px/1 var(--pe-font);
	color: #0f172a;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-right: 4px;
}
.pe-active-filters__label svg { color: #234bab; }
.pe-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 12px;
	background: #eef4ff;
	color: #1e3a8a;
	border: 1px solid #c7d2fe;
	border-radius: 999px;
	font: 600 12px/1 var(--pe-font);
	text-decoration: none;
	transition: background .15s, border-color .15s, transform .1s;
}
.pe-filter-chip:hover {
	background: #dbe7ff;
	border-color: #1e3a8a;
	color: #1e3a8a;
	transform: translateY(-1px);
}
.pe-filter-chip__group { color: #475569; font-weight: 500; }
.pe-filter-chip__name  { font-weight: 800; }
.pe-filter-chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: #1e3a8a;
	color: #fff;
	font: 700 14px/1 var(--pe-font);
	border-radius: 50%;
	margin-left: 2px;
	transition: background .12s;
}
.pe-filter-chip:hover .pe-filter-chip__x { background: #b91c1c; }
.pe-filters-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 5px 12px;
	background: #fff;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-radius: 999px;
	font: 700 12px/1 var(--pe-font);
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.pe-filters-clear:hover {
	background: #b91c1c;
	color: #fff;
	border-color: #b91c1c;
}

/* Toolbar */
.pe-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--pe-border);
	flex-wrap: wrap;
	gap: 12px;
}

.pe-shop-toolbar-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pe-per-page {
	font-size: 13px;
	color: var(--pe-text-light);
}
.pe-per-page a {
	color: var(--pe-text-light);
	padding: 2px 4px;
}
.pe-per-page a.active,
.pe-per-page a:hover {
	color: var(--pe-accent);
	font-weight: 700;
}

/* ================================================================
   PRODUCT CARDS — shop archive grid (4-up desktop, 3-up large-tablet,
   2-up tablet, 1-up phone). Carousels override below.
   ================================================================ */
.products:not(.pe-carousel-track):not(.related),
ul.products:not(.pe-carousel-track):not(.related),
.products.columns-1:not(.pe-carousel-track),
.products.columns-2:not(.pe-carousel-track),
.products.columns-3:not(.pe-carousel-track),
.products.columns-4:not(.pe-carousel-track),
.products.columns-5:not(.pe-carousel-track),
.products.columns-6:not(.pe-carousel-track) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 22px !important;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
/* Belt-and-braces: ensure the first product card always lands in column 1.
   Some plugins inject hidden helper <li>s that previously left the first cell
   blank and pushed real products into columns 2 and 3. */
.products:not(.pe-carousel-track):not(.related) > li:first-child,
ul.products:not(.pe-carousel-track):not(.related) > li:first-child { grid-column-start: 1 !important; }
.products:not(.pe-carousel-track):not(.related) > li:not(.product),
ul.products:not(.pe-carousel-track):not(.related) > li:not(.product) { display: none !important; }

/* Step down to 3 cols on smaller desktops, 2 on tablets, 1 on phones. */
@media (max-width: 1380px) {
	.products:not(.pe-carousel-track):not(.related),
	ul.products:not(.pe-carousel-track):not(.related) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1180px) {
	.products:not(.pe-carousel-track):not(.related),
	ul.products:not(.pe-carousel-track):not(.related) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
	.products:not(.pe-carousel-track):not(.related),
	ul.products:not(.pe-carousel-track):not(.related) { grid-template-columns: 1fr !important; }
}

/* Carousel tracks must stay flex so cards scroll horizontally */
.pe-carousel-track {
	display: flex !important;
	grid-template-columns: none !important;
}

/* ==========================================================================
   Cookie consent banner (CookieYes / CLI plugin) — modern floating card
   ========================================================================== */
#cookie-law-info-bar {
	position: fixed !important;
	left: 50% !important;
	bottom: 20px !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: calc(100% - 32px) !important;
	max-width: 760px !important;
	padding: 18px 22px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px -12px rgba(15,23,42,.30), 0 8px 22px rgba(15,23,42,.10) !important;
	font: 400 13px/1.55 var(--pe-font, sans-serif) !important;
	text-align: left !important;
	z-index: 99999 !important;
}
#cookie-law-info-bar .cli-bar-container {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 14px !important;
	max-width: 100% !important;
	padding: 0 !important;
}
#cookie-law-info-bar .cli-bar-message {
	flex: 1 1 320px !important;
	min-width: 0 !important;
	color: #475569 !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}
#cookie-law-info-bar .cli-bar-message strong { color: #0f172a; font-weight: 700; }
#cookie-law-info-bar .cli-bar-btn_container {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin-left: auto !important;
}
/* All consent buttons share a consistent base style */
#cookie-law-info-bar .cli-plugin-button,
#cookie-law-info-bar .cli_action_button,
#cookie-law-info-bar .cli-style-v2 .cli_action_button,
#cookie-law-info-bar .wt-cli-element {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 36px !important;
	padding: 0 16px !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	font: 600 13px/1 var(--pe-font, sans-serif) !important;
	letter-spacing: .01em !important;
	cursor: pointer !important;
	transition: background .15s, color .15s, border-color .15s !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
/* Accept (primary) */
#cookie-law-info-bar .cli_action_button[data-cli_action="accept_all"],
#cookie-law-info-bar .cli_action_button[data-cli_action="accept"],
#cookie-law-info-bar #cookie_action_close_header,
#cookie-law-info-bar .wt-cli-accept-all-btn,
#cookie-law-info-bar .wt-cli-accept-btn {
	background: #234bab !important;
	color: #fff !important;
	border-color: #234bab !important;
}
#cookie-law-info-bar .cli_action_button[data-cli_action="accept_all"]:hover,
#cookie-law-info-bar #cookie_action_close_header:hover,
#cookie-law-info-bar .wt-cli-accept-all-btn:hover,
#cookie-law-info-bar .wt-cli-accept-btn:hover { background: #1e3f99 !important; border-color: #1e3f99 !important; }
/* Reject (secondary outline) */
#cookie-law-info-bar .cli_action_button[data-cli_action="reject"],
#cookie-law-info-bar .wt-cli-reject-btn,
#cookie-law-info-bar #cookie_action_close_header_reject {
	background: #fff !important;
	color: #475569 !important;
	border-color: #cbd5e1 !important;
}
#cookie-law-info-bar .cli_action_button[data-cli_action="reject"]:hover,
#cookie-law-info-bar .wt-cli-reject-btn:hover,
#cookie-law-info-bar #cookie_action_close_header_reject:hover { background: #f1f5f9 !important; color: #0f172a !important; }
/* Settings (text link) */
#cookie-law-info-bar .cli_settings_button,
#cookie-law-info-bar #cookie_action_settings,
#cookie-law-info-bar .cli_show_settings,
#cookie-law-info-bar .cookie_action_close_header_reject ~ .cli_settings_button {
	background: transparent !important;
	color: #234bab !important;
	border-color: transparent !important;
	padding: 0 8px !important;
}
#cookie-law-info-bar .cli_settings_button:hover,
#cookie-law-info-bar .cli_show_settings:hover { color: #1e3f99 !important; text-decoration: underline !important; }

/* Mobile: stack buttons */
@media (max-width: 640px) {
	#cookie-law-info-bar { bottom: 12px !important; padding: 14px 16px !important; }
	#cookie-law-info-bar .cli-bar-container { flex-direction: column; align-items: stretch !important; }
	#cookie-law-info-bar .cli-bar-btn_container { flex-direction: column; width: 100%; margin-left: 0 !important; }
	#cookie-law-info-bar .cli-plugin-button,
	#cookie-law-info-bar .cli_action_button,
	#cookie-law-info-bar .wt-cli-element { width: 100% !important; }
}

/* ==========================================================================
   Cookie consent — Custom Cookies modal (#cliSettingsPopup)
   Modernised version of the GDPR / WebToffee settings dialog.
   ========================================================================== */

/* Backdrop overlay — site-wide dark scrim */
body.cli-modal-open { overflow: hidden !important; }
body.cli-modal-open::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,.55);
	z-index: 99998;
	pointer-events: none;
	animation: peCliFade .2s ease-out;
}
@keyframes peCliFade { from { opacity: 0; } to { opacity: 1; } }

/* Modal shell — center the dialog over the scrim.
   Default-hide #cliSettingsPopup so it can't FOUC-flash before the plugin's
   JS adds .cli-show on user click. The previous selector matched .cli-modal
   (which is permanent on the element), so the modal painted on every page
   load until JS hid it. */
#cliSettingsPopup:not(.cli-show) { display: none !important; }
#cliSettingsPopup.cli-show,
.cli-modal.cli-show {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	background: transparent !important;
}
.cli-modal .cli-modal-dialog {
	width: 100% !important;
	max-width: 620px !important;
	margin: 0 !important;
}

/* The card itself — replaces the default blue/dialog look */
.cli-modal .cli-modal-content,
.cli-modal-content.cli-bar-popup {
	position: relative !important;
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 60px -12px rgba(15,23,42,.40), 0 8px 22px rgba(15,23,42,.12) !important;
	color: #0f172a !important;
	font: 400 14px/1.55 var(--pe-font, sans-serif) !important;
	max-height: calc(100vh - 40px) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	outline: 0 !important;
}

/* Close × button — top-right round soft button */
.cli-modal .cli-modal-close,
#cliModalClose {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 32px !important;
	height: 32px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #f1f5f9 !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: #475569 !important;
	cursor: pointer !important;
	font-size: 0 !important;
	z-index: 2 !important;
	transition: background .15s, color .15s !important;
	padding: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.cli-modal .cli-modal-close::before,
#cliModalClose::before {
	content: '×';
	font: 700 22px/1 var(--pe-font, sans-serif);
	color: inherit;
}
.cli-modal .cli-modal-close span,
#cliModalClose span { display: none !important; }
.cli-modal .cli-modal-close:hover,
#cliModalClose:hover { background: #e2e8f0 !important; color: #0f172a !important; }

/* Body — scrollable area inside the card */
.cli-modal .cli-modal-body {
	padding: 28px 28px 16px !important;
	overflow-y: auto !important;
	flex: 1 1 auto !important;
	color: #475569 !important;
}

/* Privacy overview — opening section with title + intro paragraph */
.cli-modal .cli-privacy-overview { padding: 0 0 18px !important; }
.cli-modal .cli-privacy-overview h4 {
	margin: 0 0 10px !important;
	font: 800 19px/1.25 var(--pe-font-heading, var(--pe-font)) !important;
	color: #0f172a !important;
}
.cli-modal .cli-privacy-content,
.cli-modal .cli-privacy-overview .cli-privacy-content-text,
.cli-modal .cli-privacy-content-text {
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin: 0 !important;
}
.cli-modal .cli-privacy-readmore {
	display: inline-block !important;
	margin-top: 8px !important;
	color: #234bab !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-size: 13px !important;
}
.cli-modal .cli-privacy-readmore:hover { text-decoration: underline !important; }

/* Layout helpers from the plugin's grid */
.cli-modal .cli-container-fluid,
.cli-modal .cli-tab-container { padding: 0 !important; }
.cli-modal .cli-row { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.cli-modal .cli-col-12 { padding: 0 !important; flex: 1 1 100% !important; }

/* Each cookie category — card with header + collapsible body */
.cli-modal .cli-tab-section {
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	margin: 0 !important;
	overflow: hidden !important;
	transition: border-color .15s, box-shadow .15s !important;
}
.cli-modal .cli-tab-section + .cli-tab-section { margin-top: 6px !important; }
.cli-modal .cli-tab-section:hover { border-color: #cbd5e1 !important; }

.cli-modal .cli-tab-header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	cursor: pointer !important;
	background: #fff !important;
	border: 0 !important;
	color: #0f172a !important;
}
.cli-modal .cli-tab-header .cli-nav-link {
	flex: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #0f172a !important;
	font: 700 14px/1.2 var(--pe-font) !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.cli-modal .cli-tab-header .cli-nav-link::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #94a3b8;
	border-bottom: 2px solid #94a3b8;
	transform: rotate(-45deg);
	transition: transform .2s ease;
	margin-right: 2px;
}
.cli-modal .cli-tab-section.cli-tab-active .cli-tab-header .cli-nav-link::before,
.cli-modal .cli-tab-section.active .cli-tab-header .cli-nav-link::before { transform: rotate(45deg); }

/* Status pill (Always Enabled / Enabled / Disabled) */
.cli-modal .cli-status,
.cli-modal .wt-cli-cookie-description ~ .cli-status {
	font: 600 11px/1 var(--pe-font) !important;
	letter-spacing: .03em !important;
	text-transform: uppercase !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	background: #f1f5f9 !important;
	color: #64748b !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}
.cli-modal .cli-status.cli-status-enabled,
.cli-modal .cli-tab-section.cli-tab-active .cli-status,
.cli-modal .cli-status:not(.cli-status-disabled):not(.cli-always-enabled) { background: #dcfce7 !important; color: #15803d !important; }
.cli-modal .cli-always-enabled,
.cli-modal .cli-status.cli-always-enabled { background: #e0e7ff !important; color: #3730a3 !important; }

/* Toggle switch — on/off slider */
.cli-modal .cli-switch,
.cli-modal .wt-cli-switch {
	position: relative !important;
	display: inline-block !important;
	width: 40px !important;
	height: 22px !important;
	flex-shrink: 0 !important;
}
.cli-modal .cli-switch input,
.cli-modal .wt-cli-switch input {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}
.cli-modal .cli-slider,
.cli-modal .wt-cli-slider {
	position: absolute !important;
	cursor: pointer !important;
	inset: 0 !important;
	background: #cbd5e1 !important;
	border-radius: 999px !important;
	transition: background .2s !important;
}
.cli-modal .cli-slider::before,
.cli-modal .wt-cli-slider::before {
	content: '' !important;
	position: absolute !important;
	height: 16px !important;
	width: 16px !important;
	left: 3px !important;
	top: 3px !important;
	background: #fff !important;
	border-radius: 50% !important;
	transition: transform .2s !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.2) !important;
}
.cli-modal .cli-switch input:checked + .cli-slider,
.cli-modal .wt-cli-switch input:checked + .wt-cli-slider { background: #16a34a !important; }
.cli-modal .cli-switch input:checked + .cli-slider::before,
.cli-modal .wt-cli-switch input:checked + .wt-cli-slider::before { transform: translateX(18px) !important; }
.cli-modal .cli-switch input:disabled + .cli-slider,
.cli-modal .wt-cli-switch input:disabled + .wt-cli-slider {
	background: #94a3b8 !important;
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* Tab body — collapsed description */
.cli-modal .cli-tab-content,
.cli-modal .cli-tab-pane {
	padding: 0 14px 14px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #64748b !important;
	background: #fff !important;
}

/* Footer — Save & Accept */
.cli-modal .cli-modal-footer,
.cli-modal-content > .wt-cli-element-container,
.cli-modal-content .cli-modal-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	padding: 14px 24px !important;
	border-top: 1px solid #e2e8f0 !important;
	background: #f8fafc !important;
	flex-shrink: 0 !important;
}
.cli-modal .cli_settings_button_save,
.cli-modal #wt-cli-accept-btn,
.cli-modal .wt-cli-element[data-cli_action="accept_all"],
.cli-modal .wt-cli-privacy-btn-container .wt-cli-element,
.cli-modal button[data-cli_action="accept"],
.cli-modal button[data-cli_action="accept_all"],
.cli-modal .cli_setting_save_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 42px !important;
	padding: 0 24px !important;
	background: #16a34a !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font: 700 13px/1 var(--pe-font) !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 0 6px 16px rgba(22,163,74,.25) !important;
	transition: background .15s, transform .1s !important;
	text-decoration: none !important;
}
.cli-modal .cli_settings_button_save:hover,
.cli-modal #wt-cli-accept-btn:hover,
.cli-modal button[data-cli_action="accept"]:hover,
.cli-modal button[data-cli_action="accept_all"]:hover,
.cli-modal .cli_setting_save_button:hover { background: #15803d !important; }
.cli-modal .cli_settings_button_save:active,
.cli-modal #wt-cli-accept-btn:active,
.cli-modal .cli_setting_save_button:active { transform: scale(.98) !important; }

/* Mobile tweaks */
@media (max-width: 540px) {
	.cli-modal .cli-modal-dialog { max-width: 100% !important; }
	.cli-modal .cli-modal-body { padding: 22px 18px 12px !important; }
	.cli-modal .cli-modal-footer { padding: 12px 18px !important; }
	.cli-modal .cli-tab-header { padding: 12px !important; }
}

/* Reopen-cookie-bar floating button (#cookie-law-info-again) */
#cookie-law-info-again {
	bottom: 20px !important;
	right: 20px !important;
	background: #fff !important;
	color: #234bab !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	font: 600 12px/1 var(--pe-font, sans-serif) !important;
	box-shadow: 0 8px 20px rgba(15,23,42,.10) !important;
}

/* ================================================================
   FRONT-PAGE FEATURES STRIP — three blue-tile icons (b2b / orders / truck)
   Mirrors the live-site [planet_features] visual: 64×64 rounded blue tile
   with a white-filtered icon image, title + description on the right.
   ================================================================ */
.pe-features { padding: 32px 0 16px; }
.pe-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}
/* Each feature is its own white card now (the unified strip background is gone) */
.pe-feature {
	padding: 24px 26px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.05);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pe-feature:hover {
	transform: translateY(-2px);
	border-color: #dbe2f1;
	box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 10px 26px rgba(15,23,42,.08);
}
/* Icon tile — soft blue chip, native PNG colour preserved (no white-invert) */
.pe-feature-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, #eef2ff, #dbeafe);
	color: #1e40af;
	flex-shrink: 0;
}
.pe-feature-ico img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	display: block;
}
.pe-feature-body { flex: 1; min-width: 0; }
.pe-feature-body h3,
.pe-feature-body .pe-feature-title {
	margin: 0 0 4px;
	font: 800 15px/1.25 var(--pe-font);
	color: #0f172a;
}
.pe-feature-body p {
	margin: 0;
	font: 400 13px/1.5 var(--pe-font);
	color: #64748b;
}
@media (max-width: 768px) {
	.pe-features-grid { grid-template-columns: 1fr; gap: 12px; }
	.pe-feature { padding: 20px 22px; }
}

/* Override the [planet_fylladio] flyer banner — full width, lower profile.
   The shortcode prints its own #pbm-fly-N selectors with high specificity,
   so we use [id^="pbm-fly-"] to apply to every instance the shortcode emits. */
[id^="pbm-fly-"],
.pbm-flyer { width: 100% !important; max-width: 100% !important; }
[id^="pbm-fly-"] .pbm-fly-inner,
.pbm-flyer .pbm-fly-inner {
	max-width: 1320px !important;
	margin: 0 auto !important;
	padding: 28px 48px !important;
	gap: 28px !important;
	min-height: 0 !important;
	align-items: center !important;
}
[id^="pbm-fly-"] .pbm-fly-gradient,
.pbm-flyer .pbm-fly-gradient { inset: 0 !important; }
[id^="pbm-fly-"] .pbm-fly-img,
.pbm-flyer .pbm-fly-img { width: 120px !important; max-height: 170px !important; flex: 0 0 120px !important; }
[id^="pbm-fly-"] .pbm-fly-img img,
.pbm-flyer .pbm-fly-img img { max-height: 170px !important; width: auto !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; }
[id^="pbm-fly-"] .pbm-fly-title,
.pbm-flyer .pbm-fly-title { font-size: 22px !important; margin-bottom: 4px !important; }
[id^="pbm-fly-"] .pbm-fly-desc,
.pbm-flyer .pbm-fly-desc { max-width: 720px !important; margin-bottom: 12px !important; }
[id^="pbm-fly-"] .pbm-fly-btn,
.pbm-flyer .pbm-fly-btn { padding: 10px 22px !important; font-size: 13px !important; }
@media (max-width: 768px) {
	[id^="pbm-fly-"] .pbm-fly-inner,
	.pbm-flyer .pbm-fly-inner { padding: 32px 22px !important; gap: 18px !important; }
	[id^="pbm-fly-"] .pbm-fly-img,
	.pbm-flyer .pbm-fly-img { width: 100px !important; }
}

/* Shop page background tint — light slate so the white product cards stand out */
body.woocommerce-shop,
body.archive.woocommerce,
body.tax-product_cat,
body.tax-product_tag,
body.tax-pa_brand,
body.post-type-archive-product {
	background-color: #f4f6fb;
}

.pe-product-card {
	background: var(--pe-white);
	border: 1px solid #eef2f7;
	border-radius: var(--pe-radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05);
	transition: box-shadow .18s ease;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
}
/* No hover lift, no border-color change, no shadow change — only the image scales */
.pe-product-card:hover {
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.07);
	border-color: #eef2f7;
	transform: none;
}

.pe-product-card-inner {
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 540px;
	position: relative;
	gap: 0;
}

/* Badges — country flag + promo labels overlaid on the card */
.pe-product-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 5;
	pointer-events: none;
}
.pe-product-badges > * { pointer-events: auto; }

.pe-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}
.pe-badge img {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px;
	max-height: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--pe-white);
	box-shadow: 0 1px 5px rgba(15,23,42,.15);
	background: #fff;
	object-fit: cover;
}
.pe-badge-origin {
	width: 40px;
	height: 40px;
}
.pe-badge-origin img {
	width: 40px !important;
	height: 40px !important;
	max-width: 40px;
	max-height: 40px;
	border-width: 1px;
	box-shadow: 0 2px 7px rgba(15,23,42,.20);
}
.pe-badge-promo {
	width: 30px;
	height: 30px;
}
.pe-badge-promo img {
	width: 30px !important;
	height: 30px !important;
	max-width: 30px;
	max-height: 30px;
	border-radius: 7px;
	object-fit: contain;
}
.pe-badge-sale {
	background: var(--pe-red);
	color: var(--pe-white);
	font: 700 10px/1 var(--pe-font);
	padding: 5px 8px;
	border-radius: 6px;
	width: auto;
	height: auto;
	letter-spacing: .04em;
}
/* "Νέα Παραλαβή" — text badge, blue pill with white text. Stamped onto a
   product when it's published or restocked in the last PE_NEW_ARRIVAL_DAYS
   days (see inc/new-arrival.php). */
.pe-badge-new {
	background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
	color: #fff;
	font: 700 10px/1 var(--pe-font);
	padding: 5px 9px;
	border-radius: 999px;
	width: auto;
	height: auto;
	letter-spacing: .03em;
	box-shadow: 0 2px 6px rgba(30, 58, 138, .26);
	white-space: nowrap;
}

/* Backorder delivery pill — "● Παράδοση 4-9 ημέρες".
   Inline notice rendered under the title (loop card) and under the price (PDP)
   for products with stock_status = onbackorder. */
.pe-backorder-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 6px;
	padding: 3px 9px 3px 8px;
	background: #fff7ed;
	border-radius: 999px;
	font: 600 11px/1.2 var(--pe-font);
	color: #9a3412;
	white-space: nowrap;
}
.pe-backorder-pill[hidden] { display: none !important; }
.pe-backorder-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #f59e0b;
	box-shadow: 0 0 0 2px rgba(245, 158, 11, .18);
	flex: 0 0 auto;
}
/* Green sibling shown for in-stock variations of mixed (backorder + in-stock)
   variable products. Sits in the same slot as .pe-backorder-pill — JS swaps
   between the two depending on the active variation. */
.pe-backorder-pill--in-stock {
	background: #ecfdf5;
	color: #166534;
}
.pe-backorder-pill--in-stock .pe-backorder-dot {
	background: #16a34a;
	box-shadow: 0 0 0 2px rgba(22, 163, 74, .18);
}
.pe-single-product .pe-backorder-pill {
	margin: 8px 0 12px;
	font-size: 12px;
	padding: 5px 12px 5px 10px;
}

/* Product Image — fixed-height slot with predictable visual scale.
   Cap the image to a generous max area inside the slot so a tiny native image
   never gets blown up to fill the slot (which is what makes some products
   look "very zoomed in" compared to others). */
.pe-product-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 320px;
	padding: 10px;
	margin-bottom: 16px;
	overflow: hidden;
	background: #fff;
	border-radius: var(--pe-radius);
}
.pe-product-image,
.pe-product-image-link img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	mix-blend-mode: multiply;          /* removes white halos around product PNGs */
	transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.pe-product-card:hover .pe-product-image,
.pe-product-card:hover .pe-product-image-link img {
	transform: scale(1.05) !important;
}

/* Product Info */
.pe-product-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.pe-product-title-link {
	text-decoration: none;
	color: var(--pe-text);
	display: block;
	/* Reserve a 2-line tall slot whether the title actually wraps or not, so
	   every card in the same row aligns its price box at the same Y. */
	min-height: 2.8em;
	margin-bottom: 10px;
}
.pe-product-title {
	font: 600 14px/1.4 var(--pe-font-heading, var(--pe-font));
	color: #0f172a;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
	word-break: break-word;
	text-transform: none !important;
	letter-spacing: -.005em;
}

/* Packaging Info */
.pe-product-packaging {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--pe-border);
	font-size: 11px;
	color: var(--pe-text-light);
}
.pe-pkg-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* VAT Badge */
.pe-product-vat {
	margin-top: 6px;
	font-size: 11px;
	color: var(--pe-text-muted);
}
.pe-vat-badge {
	display: inline-block;
	padding: 1px 6px;
	background: var(--pe-bg-alt);
	border-radius: 4px;
	font-weight: 600;
	font-size: 11px;
	margin-left: 4px;
}

/* Price block (fallback when IVC isn't available) */
.pe-product-price {
	margin: 8px 0 10px;
	padding: 10px 12px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font: 800 18px/1.15 var(--pe-font);
	color: #0f172a;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}
.pe-product-price ins { text-decoration: none; color: #1e40af; font-weight: 800; }
.pe-product-price del { color: #94a3b8; font-size: 13px; font-weight: 600; }
.pe-product-price .woocommerce-Price-currencySymbol { color: #1e40af; }

/* Loop add-to-cart fallback button */
.pe-loop-atc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	margin-top: 10px;
	margin-bottom: 16px;          /* space between ATC and the packaging/meta block underneath */
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: #234bab;
	color: #fff !important;
	text-decoration: none;
	font: 600 14px/1 inherit;
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: 0 2px 8px rgba(35,75,171,.22);
	transition: background .15s, box-shadow .15s;
}
/* Space between WC stepper / IVC widget / Packaging meta block — all renderers
   end up as direct children of .pe-product-info, so a uniform top-margin on
   anything that follows the ATC keeps spacing consistent. */
.pe-product-info > .pe-meta-wrap,
.pe-product-info > .pe-product-packaging,
.pe-product-info > .pe-product-vat,
.pe-product-info > .pe-pkg,
.pe-product-info > .pe-pkg-row,
.pe-product-info > .pcsbox,
.pe-product-info > .ivc-widget {
	margin-top: 14px;
}

/* Cross-card alignment: pin the IVC ATC widget (and any meta below it) to the
   bottom of the card so the title slot, price box, and ΠΡΟΣΘΗΚΗ button line up
   across the row even when the price-box content varies (3-line variants
   without "/ Τμχ" pill vs 4-line variants with it). */
.pe-product-card .pe-product-info > .ivc,
.pe-product-card .pe-product-info > .pe-loop-atc,
.pe-product-card .pe-product-info > .pe-login-btn {
	margin-top: auto;
}
/* Restore the standard 14px gap for anything rendered after the ATC (packaging
   snippet, VAT badge, etc.) so the auto-margin above doesn't collapse it. */
.pe-product-card .pe-product-info > .ivc ~ .pe-meta-wrap,
.pe-product-card .pe-product-info > .ivc ~ .pe-product-packaging,
.pe-product-card .pe-product-info > .ivc ~ .pe-product-vat,
.pe-product-card .pe-product-info > .ivc ~ .pe-pkg,
.pe-product-card .pe-product-info > .ivc ~ .pe-pkg-row,
.pe-product-card .pe-product-info > .ivc ~ .pcsbox {
	margin-top: 14px;
}

/* Stabilize the IVC variation price box height so single-variant cards
   ("Τεμάχιο" with no per-unit pill) don't render shorter than multi-line cards
   ("Κιβώτιο" + "/ Τμχ" pill). The value covers the tallest 4-line layout. */
.pe-product-card .loop-variation-price-box {
	min-height: 160px;
}

/* Shop-loop packaging cards: scaled-down version of the title-on-top design
   (label on top, icon + qty row below). Scoped to .pe-product-card so the
   PDP keeps the full-size layout. */
.pe-product-card .pe-packboard { gap: 8px; }
.pe-product-card .pe-pack {
	padding: 7px 10px;
	border-radius: 10px;
	gap: 4px;
}
.pe-product-card .pe-pack-title { font-size: 11px; }
.pe-product-card .pe-pack-row { gap: 8px; }
.pe-product-card .pe-pack-ic {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: 6px;
}
.pe-product-card .pe-pack-num { font-size: 14px; }
.pe-product-card .pe-pack-unit { font-size: 10px; }

/* Lock meta-wrap height so the ΠΡΟΣΘΗΚΗ / IVC stepper aligns across cards
   regardless of whether packaging data is present. New title-on-top layout
   is taller than the old grid: ~58px card + ~22px vat-row + 6px gap. */
.pe-product-card .pe-meta-wrap {
	min-height: 86px;
	box-sizing: border-box;
}
@media (max-width: 520px) {
	.pe-product-card .pe-pack { padding: 6px 8px; gap: 3px; }
	.pe-product-card .pe-pack-title { font-size: 10px; }
	.pe-product-card .pe-pack-ic { width: 20px; height: 20px; flex: 0 0 20px; }
	.pe-product-card .pe-pack-num { font-size: 13px; }
	.pe-product-card .pe-pack-unit { font-size: 9px; }
	.pe-product-card .pe-meta-wrap { min-height: 80px; }
}
@media (max-width: 380px) {
	.pe-product-card .pe-pack-ic { width: 18px; height: 18px; flex: 0 0 18px; }
	.pe-product-card .pe-pack-num { font-size: 12px; }
}
.pe-loop-atc:hover {
	background: #3a62c4;
	box-shadow: 0 4px 16px rgba(58,98,196,.3);
	transform: translateY(-1px);
}
.pe-loop-atc.added,
.pe-loop-atc.loading { opacity: .7; pointer-events: none; }
.pe-loop-atc-select { background: #fff; color: var(--pe-text) !important; border: 1.5px solid var(--pe-border); }
.pe-loop-atc-select:hover { border-color: #2c4ea0; color: #2c4ea0 !important; }

/* ================================================================
   FAQ accordion (used in syxnes-erwtiseis page)
   ================================================================ */
.pe-faq {
	border: 1px solid var(--pe-border);
	border-radius: 12px;
	margin: 0 0 12px;
	background: #fff;
	overflow: hidden;
}
.pe-faq summary {
	cursor: pointer;
	padding: 16px 20px;
	font: 700 16px/1.3 var(--pe-font);
	color: var(--pe-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	transition: background .15s;
}
.pe-faq summary::-webkit-details-marker { display: none; }
.pe-faq summary:hover { background: #f8fafc; }
.pe-faq summary::after {
	content: "+";
	font-weight: 800;
	font-size: 22px;
	color: #2c4ea0;
	transition: transform .2s;
	flex-shrink: 0;
}
.pe-faq[open] summary::after { content: "−"; }
.pe-faq[open] summary { border-bottom: 1px solid var(--pe-border); background: #f8fafc; }
.pe-faq > p {
	margin: 0;
	padding: 14px 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pe-text-light);
}

/* ================================================================
   SINGLE PRODUCT
   ================================================================ */
body.single-product,
body.single-product .pe-main,
body.single-product .pe-page-wrapper,
body.product-template-default { background-color: rgb(249,251,252) !important; }

/* Single product shortcode block wrappers */
.pe-product-expire,
.pe-product-bundle-combo,
.pe-product-bundle-builder {
	margin: 14px 0;
}
.pe-product-bundle-builder { margin-top: 18px; }

.pe-single-product { padding: 0 0 60px; }

.pe-product-nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0 10px;
	flex-wrap: wrap;
}

.pe-product-nav-arrows {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pe-nav-arrow, .pe-nav-grid {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	color: #64748b;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: background .15s, color .15s, border-color .15s;
}
.pe-nav-arrow:hover, .pe-nav-grid:hover {
	background: #234bab;
	color: #fff;
	border-color: #234bab;
}
.pe-nav-grid { color: #234bab; }
.pe-nav-arrow svg, .pe-nav-grid svg { width: 14px; height: 14px; display: block; }

.pe-product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding: 20px 0;
	align-items: start;
}

/* Gallery */
.pe-product-gallery {
	position: relative;
	background: #fff;
	border-radius: var(--pe-radius-lg);
	padding: 24px;
}
.pe-product-main-image {
	width: 100%;
	border: 0;
	border-radius: var(--pe-radius-lg);
	display: block;
}

/* Badges overlaid on the product image (country flag + promo labels).
   Container is absolute; individual badges are inline-flex so they stack
   vertically without overlapping. */
.pe-single-badges {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	z-index: 3;
	pointer-events: none;
}
.pe-single-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}
.pe-single-badge-origin {
	width: 40px;
	height: 40px;
}
.pe-single-badge-origin img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #fff;
	box-shadow: 0 2px 8px rgba(15,23,42,.20);
	object-fit: cover;
	display: block;
}
.pe-single-badge-promo {
	width: 44px;
	height: 44px;
}
.pe-single-badge-promo img {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(15,23,42,.15);
	object-fit: contain;
	background: #fff;
	display: block;
}
/* PDP variant of the "Νέα Παραλαβή" text badge — sits in the same
   .pe-single-badges stack as origin/promo badges. */
.pe-single-badge-new {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
	color: #fff;
	font: 700 10.5px/1 var(--pe-font);
	padding: 6px 11px;
	border-radius: 999px;
	letter-spacing: .03em;
	box-shadow: 0 3px 10px rgba(30, 58, 138, .28);
	white-space: nowrap;
}

.pe-gallery-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.pe-gallery-thumb {
	width: 80px;
	height: 80px;
	border: 2px solid var(--pe-border);
	border-radius: var(--pe-radius);
	overflow: hidden;
	cursor: pointer;
}
.pe-gallery-thumb:hover { border-color: var(--pe-accent); }
.pe-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Product Details — title (left) + brand (right) on the same row */
.pe-product-titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}
.pe-product-titlebar .pe-product-main-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.pe-product-titlebar .pe-product-brand {
	flex: 0 0 auto;
	margin: 0;
}

.pe-product-brand {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--pe-border);
	border-radius: 12px;
	padding: 6px 10px;
	min-width: 64px;
	min-height: 48px;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.pe-product-brand:hover { border-color: #1e3a8a; box-shadow: 0 4px 14px rgba(30,58,138,.12); }
.pe-product-brand--text { padding: 8px 14px; background: #f8fafc; }
.pe-brand-logo {
	max-width: 70px;
	max-height: 40px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
.pe-brand-name {
	font: 800 12px/1 var(--pe-font);
	color: #1e3a8a;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pe-product-main-title {
	font: 800 26px/1.25 var(--pe-font-heading, var(--pe-font));
	letter-spacing: -.015em;
	color: #0f172a;
	margin: 0 0 20px;
	text-wrap: balance;
}

@media (max-width: 540px) {
	.pe-product-titlebar { gap: 10px; }
	.pe-product-main-title { font-size: 20px; line-height: 1.25; }
	.pe-product-brand { min-width: 56px; min-height: 42px; padding: 4px 8px; }
	.pe-brand-logo { max-width: 56px; max-height: 32px; }
}

/* Hide WC's default variation-price block when our custom price boxes are
   rendering. Variable products get .variation-price-container, so this only
   removes the duplicate when our custom boxes exist. */
.pe-single-product .variation-price-container ~ .single_variation_wrap .woocommerce-variation-price,
.pe-single-product .variation-price-container ~ form .woocommerce-variation-price,
.pe-single-product .pe-product-details .woocommerce-variation-price,
body.single-product .woocommerce-variation-price { display: none !important; }

/* Variation Price Boxes — horizontal row layout:
     Left column  : Unit name + "Τιμή Χωρίς ΦΠΑ:" subtitle
     Right column : Big price + measure + per-piece chip
     Renders as a clean row instead of a centered stack. */
.variation-price-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 16px 0;
}
.variation-price-item {
	width: 100%;
	padding: 14px 18px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	text-align: left;
	transition: border-color .2s, background .2s, box-shadow .2s;
	position: relative;
	overflow: visible;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.variation-price-item:not(:only-child) { padding-top: 28px; }
.variation-price-item:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}
.variation-price-item.active {
	border-color: #4264c3;
	box-shadow: 0 0 0 1px #4264c3, 0 2px 8px rgba(66,100,195,.12);
	background: #f0f8ff;
}
.variation-price-item.active .price-main { color: #1e3a8a; }
.variation-price-item[data-slug="paleta"]:not(.active):not(:only-child)::after {
	content: '\2193  Καλύτερη Τιμή';
	position: absolute;
	top: 6px;
	left: 16px;
	transform: none;
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
	color: #fff;
	font: 700 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	z-index: 2;
	box-shadow: 0 1px 6px rgba(22,163,74,.25);
	letter-spacing: .3px;
	pointer-events: none;
}

/* LEFT side — Unit + label */
.price-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unit-label {
	font: 700 16px/1.2 var(--pe-font);
	color: #0f172a;
	margin: 0;
	display: block;
}
.price-label {
	display: block;
	font: 500 12px/1.3 var(--pe-font);
	color: #64748b;
	margin: 0;
}

/* Big price + measure on the same baseline */
.price-main-wrap {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
}

/* RIGHT side — Price stack (big price + measure + per-piece chip) */
.price-container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	margin-left: auto;
	flex-shrink: 0;
}
.price-main {
	font: 800 24px/1.1 var(--pe-font);
	color: #1e3a8a;
	letter-spacing: -.01em;
	white-space: nowrap;
}
.price-main .woocommerce-Price-currencySymbol { font-weight: 800; }
.price-measure {
	font: 500 13px/1 var(--pe-font);
	color: #64748b;
	margin-left: 4px;
}
.price-per-unit {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font: 600 12px/1 var(--pe-font);
	color: #475569;
	background: #f1f5f9;
	border: 0;
	padding: 5px 10px;
	border-radius: 999px;
	margin: 0;
}
.price-per-unit .ppu-label { color: #64748b; font-weight: 500; }

@media (max-width: 540px) {
	.variation-price-item { padding: 12px 14px; gap: 10px; }
	.unit-label { font-size: 14px; }
	.price-main { font-size: 20px; }
}

/* Short description — Greek-friendly card with accent stripe + drop-cap.
   Variables scoped to the wrapper so they don't leak into other components.
   Noto Sans Greek loaded once via inc/perf.php pe_font_preload. */
.pe-product-short-desc,
.woocommerce-product-details__short-description {
	--desc-bg: #f5f8fa;
	--desc-accent: #0052CC;
	--desc-accent-gradient: linear-gradient(180deg, #0052CC 0%, #3182CE 100%);
	--desc-text: #2d3748;
	--desc-paragraph: #4a5568;
	--desc-font: 'Noto Sans Greek', sans-serif;
	--desc-padding-v: 1.75rem;
	--desc-padding-h: 1.5rem;
	--desc-margin-vertical: 1.5rem;
	--desc-radius: 0.4rem;
	--desc-shadow: rgba(0, 0, 0, 0.04);

	position: relative;
	background-color: var(--desc-bg);
	padding: var(--desc-padding-v) var(--desc-padding-h);
	margin: var(--desc-margin-vertical) 0;
	border-radius: var(--desc-radius);
	box-shadow: 0 3px 8px var(--desc-shadow);
	font-family: var(--desc-font);
	color: var(--desc-text);
	transition: background-color 0.3s ease;
	width: 100%;
	box-sizing: border-box;
}
.pe-product-short-desc:hover,
.woocommerce-product-details__short-description:hover { background-color: #f8fbfc; }
/* Vertical accent stripe on the left edge */
.pe-product-short-desc::before,
.woocommerce-product-details__short-description::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 0.4rem;
	height: 100%;
	background: var(--desc-accent-gradient);
	border-top-left-radius: var(--desc-radius);
	border-bottom-left-radius: var(--desc-radius);
}
/* Paragraph rules */
.pe-product-short-desc p,
.woocommerce-product-details__short-description p {
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0 0 0.8rem;
	letter-spacing: 0.02em;
	color: var(--desc-paragraph);
}
.pe-product-short-desc p:last-child,
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.pe-product-short-desc p + p,
.woocommerce-product-details__short-description p + p { margin-top: 0.5rem; }
/* Drop-cap on the first paragraph */
.pe-product-short-desc p:first-of-type,
.woocommerce-product-details__short-description p:first-of-type {
	position: relative;
	padding-left: 1rem;
}
.pe-product-short-desc p:first-of-type::first-letter,
.woocommerce-product-details__short-description p:first-of-type::first-letter {
	float: left;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
	margin: 0.1em 0.1em 0 0;
	color: var(--desc-accent);
	font-family: var(--desc-font);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.pe-product-short-desc-inner > *:first-child,
.woocommerce-product-details__short-description > *:first-child { margin-top: 0; }
.pe-product-short-desc-inner > *:last-child,
.woocommerce-product-details__short-description > *:last-child  { margin-bottom: 0; }
.pe-product-short-desc-inner br + br,
.woocommerce-product-details__short-description br + br { display: none; }
.pe-product-short-desc-inner ul,
.pe-product-short-desc-inner ol,
.woocommerce-product-details__short-description ul,
.woocommerce-product-details__short-description ol { margin: 8px 0 8px 22px; padding: 0; color: var(--desc-paragraph); }
.pe-product-short-desc-inner li,
.woocommerce-product-details__short-description li { margin: 0 0 6px; }
/* Packaging-style rows: <div><strong><span class="sku"><img/></span></strong>Κιβώτιο x N Τεμάχια</div>
   The default rendering left-aligns the icon image as a separate block, with
   the text below — we want the icon INLINE next to the text on the same row,
   matching the live-site Συσκευασία card. (Excludes .pe-pkg-card which has
   its own card styling further down.) */
/* 1. Greek-capable web font (Noto Sans Greek) loaded once via inc/perf.php pe_font_preload */

/* 2. Define your color & font variables */
:root {
  --desc-bg:                #f5f8fa;
  --desc-accent:            #0052CC; /* deeper, richer blue */
  --desc-accent-gradient:   linear-gradient(180deg, #0052CC 0%, #3182CE 100%);
  --desc-text:              #2d3748;
  --desc-paragraph:         #4a5568;
  --desc-font:              'Noto Sans Greek', sans-serif;
  --desc-padding-v:         0.7rem;
  --desc-padding-h:         1.15rem;
  --desc-margin-vertical:   2.4rem;
  --desc-radius:            0.4rem;
  --desc-shadow:            rgba(0, 0, 0, 0.04);
}

/* 3. Main container styling */
.woocommerce-product-details__short-description {
  position: relative;
  background-color: var(--desc-bg);
  padding: 1.1rem var(--desc-padding-h) 1.1rem;
  margin: var(--desc-margin-vertical) 0;
  border-radius: var(--desc-radius);
  box-shadow: 0 3px 8px var(--desc-shadow);
  font-family: var(--desc-font);
  color: var(--desc-text);
  transition: background-color 0.3s ease;
}
/* Drop trailing <br>s that wpautop leaves at the end of the last paragraph,
   they add visible space below the final line. */
.pe-product-short-desc-inner br:last-child,
.woocommerce-product-details__short-description br:last-child {
  display: none;
}
.pe-product-short-desc-inner > *:last-child,
.woocommerce-product-details__short-description > *:last-child {
  margin-bottom: 0;
}
.woocommerce-product-details__short-description:hover {
  background-color: #f8fbfc;
}

/* 4. Vertical accent stripe on the left */
.woocommerce-product-details__short-description::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0.4rem;
  height: 100%;
  background: var(--desc-accent-gradient);
  border-top-left-radius: var(--desc-radius);
  border-bottom-left-radius: var(--desc-radius);
}

/* 5. Paragraph rules */
.woocommerce-product-details__short-description p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.8rem;
  letter-spacing: 0.02em;
  color: var(--desc-paragraph);
}

/* remove extra margin on the last paragraph */
.woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* extra spacing between paragraphs */
.woocommerce-product-details__short-description p + p {
  margin-top: 0.5rem;
}

/* 6. Stylish drop-cap on the first paragraph */
.woocommerce-product-details__short-description p:first-of-type {
  position: relative;
  padding-left: 1rem;
}
.woocommerce-product-details__short-description p:first-of-type::first-letter {
  float: left;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  margin: 0.1em 0.1em 0 0;
  color: var(--desc-accent);
  font-family: var(--desc-font);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}


/* Packaging card produced by pe_format_packaging_short_desc() — matches the
   live-site Woodmart layout: bold title, then one row per packaging unit
   (outline-blue icon + label). Sits inside .pe-product-short-desc which
   provides the soft tinted background and left accent stripe. */
.pe-pkg-card {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 14px;
	padding: 2px 0;
	width: 100%;
}
.pe-pkg-title {
	font: 700 16px/1.3 var(--pe-font, 'Noto Sans Greek', sans-serif);
	color: #0f172a;
	margin: 0 0 4px;
	display: block;
	width: 100%;
	letter-spacing: .005em;
}
.pe-pkg-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 16px;
	width: 100%;
}
/* Icon slot — fixed square so the row baselines line up no matter the icon. */
.pe-pkg-ico {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1e3a8a;
}
.pe-pkg-svg {
	width: 100%;
	height: 100%;
	display: block;
}
/* Fallback <img> (when text doesn't match Κιβώτιο / Παλέτα keywords). */
.pe-pkg-ico img {
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	max-height: 48px !important;
	object-fit: contain;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
	background: transparent;
}
.pe-pkg-text {
	font: 600 15px/1.35 var(--pe-font, 'Noto Sans Greek', sans-serif);
	color: #0f172a;
	letter-spacing: .005em;
}
@media (max-width: 480px) {
	.pe-pkg-card { gap: 12px; }
	.pe-pkg-row { gap: 12px; }
	.pe-pkg-ico { flex: 0 0 42px; width: 42px; height: 42px; }
	.pe-pkg-ico img { width: 42px !important; height: 42px !important; max-width: 42px !important; max-height: 42px !important; }
	.pe-pkg-text { font-size: 14px; }
	.pe-pkg-title { font-size: 15px; }
}

/* Generic image fallback for free-text content (kept for paragraphs that
   actually want centered hero-style images, not packaging rows) */
.pe-product-short-desc-inner p img,
.woocommerce-product-details__short-description p img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 8px auto;
	border-radius: 8px;
}
/* Inline icon+text rows in free-text short descriptions (e.g. an <img> followed by
   "Κιβώτιο x N Τεμάχια"). Text was rendering at the bottom of the icon; force the
   icon to inline-block + vertical-align:middle so the label sits next to its centre.
   Scoped to images NOT inside the structured .pe-pkg-card layout, which already has
   its own flex rows. The .pe-pkg-ico img / .pe-pkg-svg rules above use !important
   so this rule won't disturb them. */
.pe-product-short-desc-inner img,
.woocommerce-product-details__short-description img {
	display: inline-block;
	vertical-align: middle;
	margin: 0 12px 0 0;
	max-height: 44px;
	width: auto;
	height: auto;
	float: none;
	border-radius: 0;
}
.pe-product-short-desc-inner,
.woocommerce-product-details__short-description {
	font-size: 0.98rem;
	line-height: 1.5;
}
.pe-product-short-desc-inner a,
.woocommerce-product-details__short-description a {
	color: #1e3a8a;
	text-decoration: underline;
}
.pe-product-short-desc-inner a:hover,
.woocommerce-product-details__short-description a:hover { color: #234bab; }

/* Blurred short description for guests */
.pe-product-short-desc.pe-blurred .pe-product-short-desc-inner {
	filter: blur(5px);
	user-select: none;
	pointer-events: none;
}
.pe-blurred-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(255,255,255,.6);
	border-radius: 12px;
	font: 700 13px/1 var(--pe-font);
	color: #1e3a8a;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.pe-blurred-overlay:hover {
	background: rgba(30,58,138,.06);
	color: #1e3a8a;
}
.pe-blurred-overlay svg { color: #1e3a8a; }

/* Packaging Section */
.pe-packaging-section {
	margin: 20px 0;
	padding: 16px;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-lg);
}
.pe-packaging-title {
	font: 700 16px/1.3 var(--pe-font);
	margin: 0 0 12px;
}
.pe-packaging-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	color: var(--pe-text);
}

/* Contact */
.pe-product-contact {
	margin: 16px 0;
	font-size: 14px;
	color: var(--pe-text);
}
.pe-product-contact a { color: var(--pe-accent); font-weight: 600; }

/* Add to Cart Button */
.pe-add-to-cart-wrap .single_add_to_cart_button {
	width: 100%;
	padding: 16px 32px;
	background: var(--pe-accent);
	color: var(--pe-white);
	border: 0;
	border-radius: var(--pe-radius-lg);
	font: 700 16px/1 var(--pe-font);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background var(--pe-transition);
}
.pe-add-to-cart-wrap .single_add_to_cart_button:hover {
	background: var(--pe-accent-hover);
}

/* Mobile PDP: hide the inline add-to-cart wrap. The Liquid Glass bottom pill
   already provides ATC + qty stepper, so showing the inline row again right
   under the short description is duplicate UI on phones.
   The hidden .pe-atc-row is still server-rendered and JS-bound — the glass
   nav mirrors clicks/qty into it via findRow(). */
@media (max-width: 768px) {
	.pe-single-product .pe-add-to-cart-wrap {
		position: absolute !important;
		left: -10000px !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}
}

/* Help Banner */
.pe-help-banner {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 24px;
	padding: 20px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: var(--pe-radius-lg);
}
.pe-help-content strong { display: block; font-size: 16px; margin-bottom: 4px; }
.pe-help-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border: 2px solid var(--pe-accent);
	border-radius: 999px;
	font-weight: 700;
	color: var(--pe-accent);
	margin: 0 4px;
}
.pe-help-content small {
	display: block;
	margin-top: 8px;
	color: var(--pe-text-light);
	font-size: 12px;
}

/* ================================================================
   SIDE CART
   ================================================================ */
.pe-sidecart-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	backdrop-filter: blur(4px);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.pe-sidecart-overlay.active {
	opacity: 1;
	visibility: visible;
}

.pe-sidecart {
	position: fixed;
	top: 0;
	right: -560px;
	width: 540px;
	max-width: 95vw;
	/* Use dvh so the panel tracks the *visible* viewport on mobile browsers.
	   Plain 100vh excludes the address-bar area, so when the toolbar shows
	   the footer (Καλάθι / Παραγγελία buttons) gets pushed below the screen. */
	height: 100vh;
	height: 100dvh;
	background: var(--pe-white);
	z-index: 9999;
	transition: right .3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -4px 0 20px rgba(0,0,0,.15);
}
.pe-sidecart.active {
	right: 0;
}

.pe-sidecart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid #e2e8f0;
	background: #fff;
}
.pe-sidecart-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	color: #0f172a;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 8px;
	transition: background .15s, color .15s;
}
.pe-sidecart-back:hover { background: #f1f5f9; color: #234bab; }
.pe-sidecart-back svg { display: block; flex-shrink: 0; }
.pe-sidecart-title {
	font: 800 17px/1 var(--pe-font-heading,inherit);
	margin: 0;
	letter-spacing: -.01em;
}
.pe-remove-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 8px;
	font: 600 13px/1 var(--pe-font);
	text-decoration: none;
	transition: background .15s, color .15s;
}
.pe-remove-all:hover { background: #fef2f2; color: #b91c1c; }
.pe-remove-all svg { color: currentColor; flex-shrink: 0; }
.pe-remove-all:disabled { opacity: .5; cursor: default; }
.pe-sidecart-actions { display: none; }

.pe-sidecart-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	background: #f5f5f5;
}

.pe-sidecart-items {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #f5f5f5;
}

.pe-sidecart-item {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--pe-border);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	position: relative;
}
.pe-sidecart-item-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: #94a3b8;
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
	transition: background .15s, color .15s;
}
.pe-sidecart-item-remove:hover { color: var(--pe-red); background: #fef2f2; }
.pe-sidecart-item-remove svg { display: block; }

.pe-sidecart-item-img {
	width: 84px;
	height: 84px;
	flex-shrink: 0;
	background: #ffffff;
	border-radius: 8px;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pe-sidecart-item-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.pe-sidecart-item-info { flex: 1; min-width: 0; padding-right: 32px; }
.pe-sidecart-item-name {
	font: 700 14.5px/1.35 var(--pe-font);
	color: var(--pe-text);
	display: block;
	margin-bottom: 10px;
	text-decoration: none;
}
.pe-sidecart-item-name:hover { color: var(--pe-accent); }

/* Stepper — Woodmart-style pill: white bg, thin border, light-purple icon buttons */
.pe-sidecart-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 38px;
	padding: 4px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	margin-bottom: 8px;
	position: relative;
}
/* Inline qty error toast — sits below the stepper, fades in for 2.5s */
.pe-sc-qerr {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 4px;
	font: 600 11px/1.2 var(--pe-font);
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .15s, transform .15s;
	z-index: 5;
}
.pe-sc-qerr.is-on { opacity: 1; transform: translateY(0); }
.pe-sc-minus, .pe-sc-plus {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border: 0;
	background: #f1f0fc;
	color: #6366f1;
	font: 600 16px/1 var(--pe-font);
	cursor: pointer;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s, transform .1s;
}
.pe-sc-minus:hover, .pe-sc-plus:hover { background: #e0deff; color: #4f46e5; }
.pe-sc-minus:active, .pe-sc-plus:active { transform: scale(.94); }
.pe-sc-qty-input {
	flex: 0 0 auto;
	min-width: 44px;
	width: 48px;
	height: 100%;
	border: 0;
	background: transparent;
	text-align: center;
	font: 800 15px/1 var(--pe-font);
	color: #0f172a;
	padding: 0 4px;
	-moz-appearance: textfield;
}
.pe-sc-qty-input::-webkit-outer-spin-button,
.pe-sc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pe-sc-unit {
	font: 600 12px/1 var(--pe-font);
	color: #94a3b8;
	padding: 0 8px 0 1px;
	margin-left: -2px;
	white-space: nowrap;
}

/* ─── Cart Quantity (Side Cart) — verbatim user spec, targets legacy .cart-info markup ─── */
.cart-info div.quantity {
  --wd-form-height: 40px;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #ddd;
  overflow: hidden;
  padding: 0;
}

.cart-info .quantity input[type="number"] {
  border: none;
  width: 50px;
  text-align: center;
  font-size: 16px;
  background: white;
  outline: none;
  appearance: textfield;
  padding: 5px;
}

.cart-info .quantity input[type="number"]::-webkit-outer-spin-button,
.cart-info .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-info .quantity .btn {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
  border-radius: 0;
}

.cart-info .quantity .btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.cart-info .quantity .minus {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.cart-info .quantity .plus {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Same pill design mirrored onto the actual PE sidecart markup
   (.pe-sidecart-stepper / .pe-sc-minus / .pe-sc-plus / .pe-sc-qty-input).
   Wider block with larger, softer +/- chips for easier tapping. */
.pe-sidecart-stepper {
  height: 44px;
  min-width: 168px;
  background: #ffffff;
  border: 1px solid #d8dbe3;
  border-radius: 24px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  overflow: visible;
  gap: 2px;
}
.pe-sidecart-stepper .pe-sc-minus,
.pe-sidecart-stepper .pe-sc-plus {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background: #f4f4ff;
  color: #4f46e5;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .1s ease, box-shadow .18s ease;
}
.pe-sidecart-stepper .pe-sc-minus:hover,
.pe-sidecart-stepper .pe-sc-plus:hover {
  background: #e0deff;
  color: #4338ca;
  box-shadow: 0 1px 3px rgba(79,70,229,.18);
}
.pe-sidecart-stepper .pe-sc-minus:active,
.pe-sidecart-stepper .pe-sc-plus:active { transform: scale(.92); }
.pe-sidecart-stepper .pe-sc-minus:focus-visible,
.pe-sidecart-stepper .pe-sc-plus:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}
.pe-sidecart-stepper .pe-sc-qty-input {
  width: 56px;
  flex: 0 0 56px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  outline: none;
  padding: 0 4px;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Price line: "1 × 14,24€ / Κιβώτιο  Χωρίς ΦΠΑ" — single grey suffix */
.pe-sidecart-item-price {
	margin-top: 2px;
	font: 600 12px/1.4 var(--pe-font);
	color: var(--pe-text-light);
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
}
.pe-sc-line-qty   { color: var(--pe-accent); font-weight: 700; }
.pe-sc-line-x     { color: var(--pe-text-light); }
.pe-sc-line-price { color: var(--pe-accent); font-weight: 700; }
/* Strip any unit suffix WC / our filters may have appended INSIDE the price html */
.pe-sc-line-price .pe-unit,
.pe-sc-line-price .pe-price-unit,
.pe-sc-line-price .woocommerce-Price-suffix { display: none !important; }
.pe-sc-line-unit  { color: var(--pe-text-light); font-weight: 500; }
.pe-sc-line-vat   { color: var(--pe-text-light); font-weight: 500; opacity: .85; }

/* Κιβώτιο / Παλέτα variations: keep the qty, "×", and the per-box price
   visible, but render them in the muted grey tone (same as the unit/VAT
   text) instead of the blue accent. Τεμάχιο has no .pe-sc-price--no-amount
   class, so it continues to render in accent blue. */
.pe-sc-price--no-amount .pe-sc-line-qty,
.pe-sc-price--no-amount .pe-sc-line-price,
.pe-sc-price--no-amount .pe-sc-line-price .woocommerce-Price-amount,
.pe-sc-price--no-amount .pe-sc-line-price .woocommerce-Price-amount bdi,
.pe-sc-price--no-amount .pe-sc-line-price .amount {
	color: var(--pe-text-light) !important;
	font-weight: 500 !important;
}
.pe-sidecart-ppu {
	display: inline-block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--pe-accent);
	background: #eef2ff;
	padding: 3px 10px;
	border-radius: 999px;
}

.pe-sidecart-empty {
	padding: 60px 0;
	text-align: center;
	color: var(--pe-text-light);
}

/* Footer — sticky at the bottom of the sidecart, never scrolls.
   `max(...)` keeps the 20px design padding on desktop and adds the iOS
   home-indicator inset on iPhone X+ so the buttons sit above the swipe bar. */
.pe-sidecart-footer {
	flex: 0 0 auto;
	border-top: 1px solid var(--pe-border);
	padding: 16px 20px 20px;
	padding-bottom: max(20px, env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -4px 20px rgba(15,23,42,.06);
}

.pe-sidecart-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.pe-subtotal-label { font: 700 16px/1 var(--pe-font); }
.pe-subtotal-value { font: 800 22px/1 var(--pe-font); color: var(--pe-accent); }

/* Goal progress + pallet widget (theme fallback or pe-custom-sidecart plugin) */
.pe-cart-goal { margin: 4px 0 12px; }
.pe-goal-text { font: 600 13px/1.5 var(--pe-font); color: var(--pe-text); margin-bottom: 12px; }
.pe-goal-text .pe-chip { display: inline-block; background: var(--pe-accent); color: #fff; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin: 0 2px; }

/* Compact progress with only a thin blue fill — no visible grey track */
.pe-progress {
	position: relative;
	height: 4px;
	background: transparent;
	margin: 0 0 22px;
}
.pe-progress::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
}
.pe-progress__fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: linear-gradient(90deg,#3a62c4,#1e40af);
	border-radius: 999px;
	transition: width .4s ease;
}
.pe-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.pe-marker__dot {
	display: block;
	width: 10px; height: 10px;
	background: #fff;
	border: 2px solid #cbd5e1;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff;
}
.pe-marker.is-met .pe-marker__dot { border-color: var(--pe-accent); background: var(--pe-accent); }
.pe-marker--free .pe-marker__dot { border-color: #16a34a; }
.pe-marker.is-met.pe-marker--free .pe-marker__dot { background: #16a34a; }
.pe-marker__label {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	font: 700 10px/1 var(--pe-font);
	color: var(--pe-text-light);
	white-space: nowrap;
}
/* When goal achieved, hide the entire goal-text + progress, keep pallet card */
.pe-cart-goal--achieved .pe-goal-text,
.pe-cart-goal--achieved .pe-progress { display: none !important; }

.pe-pallet-widget {
	background: #f8fafc;
	border: 1px solid var(--pe-border);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 12px;
}
.pe-pallet-widget__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pe-pallet-widget__icon { width: 38px; height: auto; flex-shrink: 0; display: block; }
.pe-pallet-widget__title { font: 600 13px/1 var(--pe-font); color: var(--pe-text); flex: 1; }
.pe-pallet-widget__title strong { font-weight: 800; }
.pe-pallet-widget__pct { font: 800 13px/1 var(--pe-font); color: var(--pe-accent); }
.pe-pallet-widget__bar { width: 100%; height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.pe-pallet-widget__bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.pe-pallet-widget__bottom { margin-top: 6px; font: 500 11px/1.4 var(--pe-font); color: var(--pe-text-light); }
.pe-pallet-widget__bottom strong { color: var(--pe-text); font-weight: 700; }

.pe-sidecart-buttons {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 10px;
}
.pe-sidecart-buttons .pe-btn {
	width: 100%;
	padding: 14px;
	font-size: 14px;
}

/* ================================================================
   FOOTER
   ================================================================ */
.pe-footer { background: var(--pe-primary-dark); color: rgba(255,255,255,.8); }

.pe-footer-main { padding: 40px 0; }
.pe-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 30px;
}

.pe-footer-logo img { max-width: 160px; margin-bottom: 16px; }
.pe-footer-contact-info { font-size: 13px; line-height: 1.8; }
.pe-footer-contact-info a { color: var(--pe-white); }

.pe-footer-widget-title {
	color: var(--pe-white);
	font-size: 15px;
	margin-bottom: 16px;
}
.pe-footer-widget a {
	color: rgba(255,255,255,.7);
	font-size: 13px;
}
.pe-footer-widget a:hover { color: var(--pe-white); }

.pe-footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding: 16px 0;
}
.pe-footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
}
.pe-copyright { color: rgba(255,255,255,.5); margin: 0; }
.pe-footer-info-links { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.pe-footer-info-links a { color: rgba(255,255,255,.5); }

/* ================================================================
   MOBILE TOOLBAR (Bottom Bar)
   ================================================================ */
.pe-mobile-toolbar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--pe-white);
	border-top: 1px solid var(--pe-border);
	z-index: 1000;
	padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}

.pe-toolbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--pe-text-light);
	font-size: 10px;
	font-weight: 600;
	text-decoration: none;
}
.pe-toolbar-item:hover { color: var(--pe-accent); }

.pe-toolbar-cart-wrap { position: relative; display: flex; }
.pe-toolbar-cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	background: var(--pe-red);
	color: var(--pe-white);
	font-size: 9px;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	border-radius: 999px;
}

/* ================================================================
   MOBILE MENU
   ================================================================ */
.pe-mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 9996;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s;
}
.pe-mobile-menu-overlay.active { opacity: 1; visibility: visible; }

.pe-mobile-menu {
	position: fixed;
	top: 0;
	left: -320px;
	width: 300px;
	height: 100vh;
	background: var(--pe-white);
	z-index: 9997;
	overflow-y: auto;
	transition: left .3s ease;
	box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.pe-mobile-menu.active { left: 0; }

.pe-mobile-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid var(--pe-border);
}
.pe-mobile-logo img { height: 36px; }
.pe-mobile-menu-close {
	border: 0;
	background: transparent;
	font-size: 28px;
	color: var(--pe-text-light);
	cursor: pointer;
}

.pe-mobile-search { padding: 16px; }
.pe-mobile-search-wrap {
	display: flex;
	border: 2px solid var(--pe-border);
	border-radius: 999px;
	overflow: hidden;
}
.pe-mobile-search-wrap input {
	flex: 1;
	border: 0;
	padding: 10px 16px;
	font-size: 14px;
	outline: none;
}
.pe-mobile-search-wrap button {
	border: 0;
	background: var(--pe-accent);
	padding: 10px 16px;
	cursor: pointer;
	display: flex;
}

.pe-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.pe-mobile-nav a {
	display: block;
	padding: 14px 20px;
	border-bottom: 1px solid var(--pe-border);
	color: var(--pe-text);
	font-weight: 600;
}
.pe-mobile-nav a:hover { background: var(--pe-bg); }

.pe-mobile-account { padding: 16px 20px; border-top: 1px solid var(--pe-border); }
.pe-mobile-account a {
	display: block;
	padding: 8px 0;
	color: var(--pe-accent);
	font-weight: 600;
}

.pe-mobile-contact { padding: 16px 20px; }
.pe-mobile-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--pe-accent);
	color: var(--pe-white);
	border-radius: 999px;
	font-weight: 700;
}

/* ================================================================
   PAGES
   ================================================================ */
.pe-page-content { padding: 30px 0 60px; }
.pe-page-title { font-size: 28px; margin-bottom: 24px; }

.pe-404 {
	text-align: center;
	padding: 80px 0;
}
.pe-404 h1 { font-size: 80px; color: var(--pe-accent); margin-bottom: 8px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
	/* Cancel the desktop 100vw breakout — on mobile we want products to fit
	   inside the .pe-container with normal padding so they don't run off screen. */
	.pe-shop-layout {
		grid-template-columns: 1fr;
		width: 100% !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0;
		padding-right: 0;
	}
	/* Sidebar becomes a left-edge drawer; hidden until body.pe-sidebar-open */
	.pe-shop-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(86vw, 340px);
		max-height: 100vh;
		padding: 56px 16px 24px;
		background: #fff;
		box-shadow: 8px 0 28px rgba(15,23,42,.18);
		z-index: 9995;
		overflow-y: auto;
		transform: translateX(-105%);
		transition: transform .28s cubic-bezier(.22,1,.36,1);
		display: block;
	}
	body.pe-sidebar-open .pe-shop-sidebar { transform: translateX(0); }
	.pe-shop-sidebar-close {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
		border: 0;
		background: #f1f5f9;
		color: #0f172a;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.pe-shop-sidebar-close:hover { background: #e2e8f0; }
	.pe-shop-filter-overlay {
		position: fixed;
		inset: 0;
		background: rgba(15,23,42,.45);
		z-index: 9994;
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease, visibility .22s;
	}
	body.pe-sidebar-open .pe-shop-filter-overlay {
		opacity: 1;
		visibility: visible;
	}
	/* Sticky pill FAB anchored bottom-center. Hidden on phones because the
	   liquid-glass nav now exposes a "Φίλτρα" item that drives this same
	   button — the floating pill on top of the nav was visually noisy. The
	   element stays in the DOM so #pe-glass-filter-trigger can `.click()` it
	   to open the drawer. Tablets (769–1024px) keep the FAB. */
	.pe-shop-filter-toggle {
		position: fixed;
		bottom: calc(74px + env(safe-area-inset-bottom, 0px));
		left: 50%;
		transform: translateX(-50%);
		z-index: 9993;
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		padding: 10px 22px;
		background: #1e3a8a;
		color: #fff;
		border: 0;
		border-radius: 9999px;
		font: 700 14px/1 var(--pe-font);
		letter-spacing: .01em;
		text-transform: none;
		box-shadow: 0 6px 22px rgba(30,58,138,.32), 0 2px 6px rgba(15,23,42,.12);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
	}
	.pe-shop-filter-toggle:hover { background: #1e3a8a; }
	.pe-shop-filter-toggle:active { transform: translateX(-50%) scale(.96); }
	.pe-shop-filter-toggle svg { stroke: #fff; flex-shrink: 0; }
	.pe-shop-filter-toggle__label { letter-spacing: .01em; }
	.pe-shop-filter-toggle__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 7px;
		margin-left: 2px;
		border-radius: 9999px;
		background: #fff;
		color: #1e3a8a;
		font-size: 12px;
		font-weight: 800;
		line-height: 1;
	}
	body.pe-sidebar-open .pe-shop-filter-toggle { display: none; }

	.products {
		grid-template-columns: repeat(2, 1fr);
	}
	.pe-product-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.pe-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}
/* Hide the mobile-only filter UI on desktop */
@media (min-width: 1025px) {
	.pe-shop-filter-toggle,
	.pe-shop-filter-overlay,
	.pe-shop-sidebar-close { display: none !important; }
}

/* ─── Mobile-only search inside the nav bar (Woodmart-style) ─── */
.pe-mobile-nav-search { display: none; }

@media (max-width: 768px) {
	/* Hide the floating shop-filter FAB on phones — replaced by the Φίλτρα
	   item inside the liquid-glass nav. Element stays in the DOM so the nav
	   button can delegate its click. */
	.pe-shop-filter-toggle { display: none !important; }

	/* Side cart header: swap the order on phones so "Αφαίρεση όλων" sits on
	   the LEFT and the "Καλάθι αγορών" close-back button sits on the RIGHT. */
	.pe-sidecart-header { flex-direction: row-reverse; }

	/* Top bar: just logo + Επικοινωνία, single row, no wrap. */
	.pe-header-top { padding: 8px 0; }
	.pe-header-top-inner { flex-wrap: nowrap; gap: 10px; align-items: center; }
	.pe-header-logo { max-width: 60%; }
	.pe-logo-img,
	.pe-logo-svg { height: 40px !important; max-height: 40px !important; max-width: 200px !important; }

	/* Hide the desktop search inside the white top bar — moved into nav. */
	.pe-header-search { display: none !important; }

	/* Push the actions block (Επικοινωνία) to the right edge instead of
	   sitting next to the logo. */
	.pe-header-actions { margin-left: auto; gap: 8px; }

	/* Επικοινωνία shrinks to icon-only on mobile. */
	.pe-contact-btn span { display: none; }

	/* Hide account + cart in top bar — Liquid Glass nav handles these. */
	.pe-account-wrap,
	.pe-account-link,
	.pe-cart-link { display: none; }

	/* Nav bar = single rounded blue strip with Μενού + search + scanner. */
	.pe-header-nav { padding: 8px 0; }
	.pe-nav-inner {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0;
	}
	.pe-menu-toggle-wrap { padding: 0; flex-shrink: 0; }
	.pe-menu-toggle-wrap > button,
	.pe-menu-toggle-wrap > a,
	.pe-menu-toggle {
		height: 38px;
		padding: 0 12px;
		gap: 6px;
		font-size: 13px;
	}

	/* Hide the inline desktop nav links on mobile — they live in the side menu. */
	.pe-nav-links { display: none !important; }

	/* The mobile-only search input that sits inside the nav bar. */
	.pe-mobile-nav-search {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		align-items: center;
		gap: 6px;
		height: 40px;
		padding: 0 6px 0 14px;
		background: #fff;
		border-radius: 999px;
		box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
	}
	.pe-mobile-nav-search-input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		background: transparent;
		font: 500 14px/1 var(--pe-font, sans-serif);
		color: #0f172a;
		outline: none;
	}
	.pe-mobile-nav-search-input::placeholder { color: #94a3b8; }
	.pe-mobile-nav-scan,
	.pe-mobile-nav-search-btn {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.pe-mobile-nav-scan {
		width: 32px;
		height: 32px;
		background: transparent;
		color: #475569;
		border-radius: 999px;
	}
	.pe-mobile-nav-scan:active { background: rgba(15, 23, 42, .06); }
	.pe-mobile-nav-search-btn {
		width: 32px;
		height: 32px;
		background: linear-gradient(135deg, #234bab 0%, #1e3a8a 100%);
		color: #fff;
		border-radius: 999px;
		box-shadow: 0 2px 6px rgba(35, 75, 171, .3);
	}
	.pe-mobile-nav-search-btn:active { transform: scale(.94); }

	.pe-footer-grid { grid-template-columns: 1fr; }
	.pe-footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }

	.pe-product-layout { grid-template-columns: 1fr; }
	/* Two-price boxes stay side-by-side on mobile — earlier `flex-direction: column`
	   rule was overriding the same-row design from single-product.css. */

	.pe-sidecart { width: 100%; max-width: 100%; right: -100%; }

	/* On phones, cap the goal/pallet widget so a tall free-shipping bar can
	   never push the action buttons off-screen. Items list still scrolls. */
	.pe-sidecart-footer { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
	.pe-sidecart-footer .pe-cart-goal,
	.pe-sidecart-footer .pe-pallet-widget { max-height: 30dvh; overflow: hidden; }
	.pe-sidecart-footer .pe-progress { margin-bottom: 14px; }
}

@media (max-width: 480px) {
	.pe-container { padding: 0 12px; }
	.products { grid-template-columns: 1fr; }
	.pe-product-card-inner { padding: 12px; }
	.pe-product-main-title { font-size: 20px; }
}

/* ================================================================
   IVC STYLES (Inline Variation Commerce)
   Ported from woodmart-child
   ================================================================ */
:root {
	--ivc-accent: #2c4ea0;
	--ivc-accent-light: #3a62c4;
	--ivc-success: #16a34a;
	--ivc-success-bg: #dcfce7;
	--ivc-border: #d1d5db;
	--ivc-border-hover: #9ca3af;
	--ivc-bg: #fff;
	--ivc-text: #111827;
	--ivc-text-light: #6b7280;
	--ivc-radius: 10px;
	--ivc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ivc { width: 100%; margin: 8px 0 0; font-family: var(--ivc-font); display: flex; flex-direction: column; gap: 8px; }
.ivc-x { display: none !important; }

.ivc-ab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: var(--ivc-radius);
	background: var(--ivc-accent);
	color: #fff !important;
	font: 700 15px/1 var(--ivc-font);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(44,78,160,.25);
	transition: background .2s, box-shadow .2s, transform .1s;
}
.ivc-ab:hover {
	background: var(--ivc-accent-light);
	box-shadow: 0 4px 16px rgba(58,98,196,.3);
	transform: translateY(-1px);
}
.ivc-ab:active { transform: translateY(0) scale(.98); }
.ivc-ab svg.ivc-bag { width: 18px; height: 18px; stroke: #fff !important; }
.ivc-ab.ivc-busy { pointer-events: none; opacity: .85; }

.ivc-stepper {
	display: flex;
	align-items: stretch;
	height: 44px;
	width: 100%;
	border-radius: var(--ivc-radius);
	overflow: hidden;
	background: var(--ivc-bg);
	border: 1.5px solid var(--ivc-border);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: border-color .2s;
}
.ivc-stepper:hover { border-color: var(--ivc-border-hover); }

.ivc-sb {
	width: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	color: #fff !important;
	cursor: pointer;
	padding: 0;
	transition: background .15s;
}
.ivc-sb:active { transform: scale(.88); }
.ivc-sb.ivc-m { background: var(--ivc-accent); border-radius: 8px 0 0 8px; }
.ivc-sb.ivc-p { background: var(--ivc-accent); border-radius: 0 8px 8px 0; }
.ivc-sb:hover { background: var(--ivc-accent-light); }
.ivc-sb svg { width: 14px; height: 14px; fill: currentColor; }

.ivc-sn-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	background: var(--ivc-bg);
	color: var(--ivc-text);
	user-select: none;
}
.ivc-sn { font: 800 18px/1 var(--ivc-font); color: var(--ivc-text); min-width: 20px; text-align: center; }
.ivc-su { font: 600 13px/1 var(--ivc-font); color: var(--ivc-text-light); white-space: nowrap; }

@keyframes ivcpop { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ivc-pop .ivc-sn { animation: ivcpop .22s ease; }
@keyframes ivcflash { 0% { background: var(--ivc-bg); } 25% { background: var(--ivc-success-bg); } 100% { background: var(--ivc-bg); } }
.ivc-flash { animation: ivcflash .45s ease; }

/* Loop Variation Price Boxes — centered prices, blue accent (matches the
   PE design spec). Mirrors the inline <style id="ivc-css"> in
   inc/ivc-shop-loop.php so both contexts render identically. */
.loop-variation-price-box { display: flex; gap: 10px; width: 100%; margin: 0; align-items: stretch; }
.loop-variation-item {
	flex: 1;
	min-height: 140px;
	padding: 14px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	text-align: center;
	transition: border-color .2s, background .2s, box-shadow .2s;
	position: relative;
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.loop-variation-item:hover { background: #f8fafc; border-color: #cbd5e1; }
.loop-variation-item.ivc-active {
	border-color: #2c4ea0;
	box-shadow: 0 1px 4px rgba(44,78,160,.10);
	background: #f5f8ff;
}
.loop-variation-item:not(:only-child) { padding-top: 30px; }
.loop-variation-item.ivc-active:not(:only-child)::before {
	content: 'Επιλεγμένο';
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #2c4ea0, #1e3a8a);
	color: #fff;
	font: 700 10px/1 var(--ivc-font);
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 1px 6px rgba(44,78,160,.30);
	z-index: 2;
}
.loop-variation-item[data-slug="paleta"]:not(.ivc-active):not(:only-child)::after {
	content: '\2193  Καλύτερη Τιμή';
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--pe-green), #15803d);
	color: #fff;
	font: 700 10px/1 var(--ivc-font);
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 1px 6px rgba(22,163,74,.25);
	z-index: 2;
}

.loop-unit-label  { font: 700 14px/1.2 var(--ivc-font); color: #1e293b; margin-bottom: 6px; letter-spacing: .02em; text-align: center; }
.loop-price-label { font: 400 11px/1.3 var(--ivc-font); color: #64748b; margin-bottom: 4px; text-align: center; }
.loop-price-row   { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.loop-price-main,
.loop-price-main .woocommerce-Price-amount { font: 600 17px/1.15 var(--ivc-font) !important; color: #1e3a8a !important; letter-spacing: -.01em; }
.loop-price-measure { font: 600 13px/1 var(--ivc-font); color: #1e3a8a; opacity: .78; }
.loop-price-per-unit,
.price-per-unit {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	font: 600 12px/1 var(--ivc-font);
	color: #1e3a8a;
	background: #eaf0fb;
	padding: 5px 14px;
	border-radius: 999px;
	margin-top: 4px;
}
.loop-price-per-unit .woocommerce-Price-amount,
.price-per-unit .woocommerce-Price-amount { font-weight: 700; font-size: 13px; color: #1e3a8a; }
.ppu-label { font-size: 11px; font-weight: 500; color: #1e3a8a; opacity: .72; }
@media (max-width: 540px) {
	.loop-variation-item { padding: 12px; min-height: 120px; }
	.loop-variation-item:not(:only-child) { padding-top: 28px; }
	.loop-price-main,
	.loop-price-main .woocommerce-Price-amount { font-size: 18px !important; }
	.loop-unit-label { font-size: 13px; }
}

/* Simple-product loop price — match the woodmart-child variation card look
   so logged-in users see one consistent price-card style across the shop. */
.pe-product-card .pe-product-price {
	margin: 0 0 10px;
	padding: 12px 14px;
	background: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	min-height: 84px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font: 800 18px/1.2 var(--ivc-font, var(--pe-font));
	color: #1e293b;
	box-shadow: none;
}
.pe-product-card .pe-product-price ins { text-decoration: none; color: #1e293b; font-weight: 800; }
.pe-product-card .pe-product-price del { color: #94a3b8; font-size: 12px; font-weight: 600; margin-right: 6px; }
.pe-product-card .pe-product-price .woocommerce-Price-currencySymbol { color: #1e293b; }

/* IVC Toast */
.ivc-toast-box {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}
.ivc-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0,0,0,.15);
	font: 600 14px/1.3 var(--ivc-font);
	max-width: 360px;
	transform: translateX(120%);
	transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
	pointer-events: auto;
}
.ivc-toast.show { transform: translateX(0); }
.ivc-toast.out { opacity: 0; transform: translateX(60%); }
.ivc-toast svg { width: 22px; height: 22px; flex-shrink: 0; }
.ivc-toast-name { font-weight: 700; font-size: 12px; opacity: .85; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ivc-toast-msg { font-weight: 600; font-size: 14px; }
.ivc-t-add { background: rgba(22,163,74,.95); color: #fff; }
.ivc-t-update { background: rgba(44,78,160,.95); color: #fff; }
.ivc-t-remove { background: rgba(71,85,105,.95); color: #fff; }

/* ================================================================
   MISC UTILITY
   ================================================================ */
/* ============================================================
   Store-info contact card ([store_info_blocks] snippet)
   Make the phone number unmistakably visible — bold black text.
   ============================================================ */
.sb-row { font-size: 14px !important; color: #0b1f44 !important; flex-wrap: wrap !important; }
.sb-phone {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 14px !important;
	background: #fff !important;
	border: 1px solid rgba(15,23,42,.12) !important;
	border-radius: 10px !important;
	color: #0b1220 !important;
	font: 800 16px/1 var(--pe-font, sans-serif) !important;
	letter-spacing: .02em !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(15,23,42,.06) !important;
	transition: transform .12s, box-shadow .12s !important;
}
.sb-phone span { color: #0b1220 !important; font-weight: 800 !important; font-size: 16px !important; }
.sb-phone svg  { width: 16px !important; height: 16px !important; stroke: #1e3a8a !important; stroke-width: 2 !important; }
.sb-phone:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.10) !important; }

/* ATC loading state — applied by js/main.js capture-phase click handler.
   Dims the button and shows a soft spinner so rapid clicks have feedback. */
.pe-atc-loading {
	position: relative !important;
	opacity: .7 !important;
	pointer-events: none !important;
}
.pe-atc-loading::after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: .85;
	animation: pe-atc-spin .65s linear infinite;
	pointer-events: none;
}
@keyframes pe-atc-spin { to { transform: rotate(360deg); } }

/* Login-to-see-prices — single canonical .pe-login-btn for all locations
   (shop loop, PDP, homepage carousels, related, search). Same visual style
   everywhere. The PDP/shortcode variant gets a slightly taller height via
   the --full modifier since it's not constrained by a card footer. */
.pe-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 46px;
	margin: 10px 0;
	padding: 0 16px;
	background: #1e3a8a;
	color: #fff !important;
	font: 700 13px/1 var(--pe-font);
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(30,58,138,.28);
	transition: background .2s, box-shadow .2s, transform .1s;
}
.pe-login-btn:hover {
	background: #2548a8;
	color: #fff !important;
	box-shadow: 0 6px 20px rgba(30,58,138,.35);
	transform: translateY(-1px);
}
.pe-login-btn:active { transform: translateY(0) scale(.99); }
.pe-login-btn svg { flex-shrink: 0; width: 18px; height: 18px; color: #fff; }
/* Bigger pill on PDP / standalone placements (the .pe-login-btn--full
   modifier is set by inc/variations.php for shortcode renders). */
.pe-login-btn--full {
	height: 54px;
	font-size: 14px;
	border-radius: 12px;
}
.pe-login-btn--full svg { width: 20px; height: 20px; }
/* Legacy aliases (kept so any external CSS / plugin selectors still match
   the old class names map to the new canonical button). */
.pe-login-to-see-price-wrap,
.pe-login-to-see-price-link { display: block; width: 100%; padding: 0; margin: 0; text-decoration: none; }
.pe-login-to-see-price { /* falls back to .pe-login-btn — only present if a plugin still emits this markup */ }

/* Hide default WC elements we've replaced */
.pe-theme .woocommerce-result-count { font-size: 13px; color: var(--pe-text-light); margin: 0; }
.pe-theme .woocommerce-ordering { margin: 0; }
.pe-theme .woocommerce-ordering select {
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius);
	padding: 8px 12px;
	font-size: 13px;
	font-family: var(--pe-font);
}

/* WooCommerce pagination — modern soft-card row.
   Numbers as rounded squares (radius 12), current = blue gradient with shadow.
   Prev/Next = matching outline pills with arrow icons. Aligned, uniform heights,
   consistent spacing. Mobile collapses to compact icon-only Prev/Next. */
.woocommerce-pagination,
nav.woocommerce-pagination {
	text-align: center !important;
	padding: 36px 0 !important;
	border: 0 !important;
}
.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul {
	list-style: none !important;
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.woocommerce-pagination li {
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	display: inline-flex !important;
}
/* Number = soft card, 44x44 rounded square, transparent until hover. */
.woocommerce-pagination li a,
.woocommerce-pagination li span,
.woocommerce-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 44px !important;
	height: 44px !important;
	padding: 0 12px !important;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: #334155 !important;
	font: 600 14.5px/1 var(--pe-font) !important;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
	box-shadow: none !important;
	letter-spacing: -.005em !important;
}
.woocommerce-pagination li a:hover,
.woocommerce-pagination .page-numbers:hover {
	background: #eef4ff !important;
	color: #1e3a8a !important;
	border-color: #c7d7ff !important;
	transform: translateY(-1px) !important;
}
.woocommerce-pagination li a:focus-visible,
.woocommerce-pagination .page-numbers:focus-visible {
	outline: 2px solid #1e40af !important;
	outline-offset: 2px !important;
}
/* Current page — blue gradient fill, white text, lifted shadow. */
.woocommerce-pagination li span.current,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination li > .current,
.woocommerce-pagination span.page-numbers.current {
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
	color: #fff !important;
	border: 1px solid #1e3a8a !important;
	box-shadow: 0 6px 16px rgba(30,58,138,.32) !important;
	cursor: default !important;
	transform: none !important;
	font-weight: 800 !important;
}
.woocommerce-pagination li span.current:hover,
.woocommerce-pagination .page-numbers.current:hover {
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
	color: #fff !important;
	transform: none !important;
}
.woocommerce-pagination .page-numbers.dots {
	color: #94a3b8 !important;
	background: transparent !important;
	border-color: transparent !important;
	pointer-events: none !important;
	min-width: 20px !important;
	padding: 0 2px !important;
	letter-spacing: 1px !important;
}
.woocommerce-pagination .page-numbers.dots:hover { transform: none !important; background: transparent !important; }
/* Prev / Next — symmetric outline cards with arrow icons. Same height,
   same border, same hover behaviour — visually paired so neither dominates. */
.woocommerce-pagination .prev,
.woocommerce-pagination .next {
	background: #fff !important;
	color: #1e3a8a !important;
	border: 1px solid #cbd5e1 !important;
	padding: 0 20px !important;
	font-size: 0 !important;
	position: relative !important;
	min-width: 0 !important;
	height: 44px !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.04) !important;
	margin: 0 6px !important;
	font-weight: 700 !important;
}
.woocommerce-pagination .prev::after {
	content: '\2190  Προηγούμενη';
	font: 700 13.5px/1 var(--pe-font);
	letter-spacing: .01em;
}
.woocommerce-pagination .next::before {
	content: 'Επόμενη  \2192';
	font: 700 13.5px/1 var(--pe-font);
	letter-spacing: .01em;
}
.woocommerce-pagination .prev:hover,
.woocommerce-pagination .next:hover {
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
	color: #fff !important;
	border-color: #1e3a8a !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 18px rgba(30,58,138,.28) !important;
}
@media (max-width: 540px) {
	.woocommerce-pagination,
	nav.woocommerce-pagination { padding: 28px 0 !important; }
	.woocommerce-pagination ul,
	.woocommerce-pagination ul.page-numbers,
	nav.woocommerce-pagination ul { gap: 4px !important; }
	.woocommerce-pagination li a,
	.woocommerce-pagination li span,
	.woocommerce-pagination .page-numbers { min-width: 38px !important; height: 38px !important; padding: 0 10px !important; font-size: 13.5px !important; border-radius: 10px !important; }
	.woocommerce-pagination .prev,
	.woocommerce-pagination .next { height: 38px !important; padding: 0 12px !important; margin: 0 3px !important; border-radius: 10px !important; }
	.woocommerce-pagination .prev::after { content: '\2190' !important; font-size: 16px !important; }
	.woocommerce-pagination .next::before { content: '\2192' !important; font-size: 16px !important; }
}

/* ================================================================
   MY ACCOUNT — two-column layout (sidebar + content).
   The sidebar visual + content panels come from pe-my-account-plugin.
   The grid container is theme-side so the page works without Elementor.
   ================================================================ */
.woocommerce-account .pe-main { background: #f4f6fb; }
.woocommerce-account .pe-page-content,
.woocommerce-account .woocommerce { padding: 0; }

.pe-ma-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 28px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 20px 60px;
	align-items: start;
	box-sizing: border-box;
}
.pe-ma-sidebar-col {
	position: sticky;
	top: 130px;
	align-self: start;
}
.pe-ma-content-col {
	min-width: 0;
	width: 100%;
	max-width: 100%;
	float: none;
}

/* Hide WC's default left-rail navigation when our custom sidebar is active. */
.pe-ma-layout--custom .woocommerce-MyAccount-navigation { display: none !important; }

/* Reset default WC content width tweaks that fight the grid. */
.pe-ma-layout .woocommerce-MyAccount-content { width: 100% !important; max-width: 100% !important; }

@media (max-width: 1024px) {
	.pe-ma-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 20px 16px 60px; }
	.pe-ma-sidebar-col { top: 110px; }
}
@media (max-width: 768px) {
	.pe-ma-layout {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px 12px 40px;
	}
	.pe-ma-sidebar-col { position: static; top: auto; }
}

/* Legacy fallback — when the page somehow renders without our wrapper
   (e.g. some other plugin overrode my-account.php), keep the WC default nav
   hidden so the plugin's full-width content rule looks correct. */
.woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
.pe-ma-layout:not(.pe-ma-layout--custom) .woocommerce-MyAccount-navigation { display: block !important; }

/* Sidebar nav labels — let long Greek labels wrap onto two lines instead of
   truncating with ellipsis ("Προσαρμοσμένες…", "Στοιχεία Λογαριασ…"). The
   plugin's default rule sets nowrap; we override here so the theme owns the
   final word on sidebar typography. */
.pe-ma-sidebar-col .pe-nav-label,
.pe-sidebar .pe-nav-label {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	line-height: 1.3 !important;
	word-break: break-word;
}
.pe-ma-sidebar-col .pe-nav-item,
.pe-sidebar .pe-nav-item {
	align-items: center !important;
}

/* ================================================================
   MY ACCOUNT — defensive cleanup of stray content.
   Suppresses leftover artifacts from legacy plugins / WC defaults
   that bleed into the dashboard area:
     - bare <p>, <br>, <input>, <hr> at the root of the dashboard
     - unwanted children inside .pe-dash-recent-orders that aren't
       actual order cards (suspected source of the empty rounded
       rectangles between recent-order cards in the dashboard).
   The :has() selector is used so we only show order cards that
   actually contain a rendered order number.
   ================================================================ */
.pe-ma-content-col > p:not([class]),
.pe-ma-content-col > br,
.pe-ma-content-col > hr,
.pe-ma-content-col > input:not([type="hidden"]),
.pe-dash-wrap > p:not([class]),
.pe-dash-wrap > br,
.pe-dash-wrap > hr,
.pe-dash-wrap > input:not([type="hidden"]) {
	display: none !important;
}
.pe-dash-recent-orders > *:not(.pe-dash-ro-card) {
	display: none !important;
}
.pe-dash-recent-orders > .pe-dash-ro-card:empty {
	display: none !important;
}
@supports selector(:has(*)) {
	.pe-dash-recent-orders > .pe-dash-ro-card:not(:has(.pe-dash-ro-num)) {
		display: none !important;
	}
}

/* My-account: zero out only the page-content vertical padding so the
   dashboard wraps tight against the header. DO NOT touch .pe-container
   here — the header uses the same class and overriding it kills the
   header layout. */
.woocommerce-account .pe-page-content {
	padding: 0;
}

/* Mobile sidebar: sticky behavior turns problematic on small screens.
   The plugin already has a hamburger toggle (.pe-sidebar-toggle); on
   mobile we let the sidebar flow normally above the dashboard. */
@media (max-width: 768px) {
	.pe-ma-sidebar-col .pe-sidebar { position: static !important; top: auto !important; }
}

/* ================================================================
   MY ACCOUNT — OFFERS PAGE (/my-account/offers/)
   The pe-b2b-offer-plugin renders a left "Κατηγορίες" sidebar that
   stays empty when the category tree is unpopulated, wasting ~280px
   of horizontal space. Hide it (and the breadcrumb back-link the
   plugin prepends — our sidebar already provides navigation).
   Tighten product card spacing so they fit more densely.
   ================================================================ */
@supports selector(:has(*)) {
	/* Hide empty sidebar so product list takes full width. */
	.woocommerce-account .b2b-offer-wrapper .pe-sidebar:has(.pe-sidebar-grid:empty),
	.woocommerce-account .b2b-offer-wrapper .pe-sidebar:not(:has(.pe-sidebar-item)) {
		display: none !important;
	}
}
/* Plugin prepends "‹ Ο Λογαριασμός μου" breadcrumb above the offer
   wrapper — redundant inside the my-account 2-col layout. */
.woocommerce-account .b2b-offer-wrapper-breadcrumb,
.woocommerce-account .pe-ma-content-col > a[href*="my-account"]:first-child:not(.pe-nav-item),
.woocommerce-account .pe-ma-content-col > .b2b-back-link {
	display: none !important;
}
/* Tighten product cards — strip excess padding/min-height. */
.woocommerce-account .b2b-offer-wrapper .b2b-product-card {
	padding: 12px 16px !important;
	min-height: 0 !important;
}
.woocommerce-account .b2b-offer-wrapper .products-grid {
	padding: 8px 10px !important;
	gap: 6px !important;
}
/* Compact the offer header — was eating ~140px of vertical space. */
.woocommerce-account .b2b-offer-wrapper .b2b-offer-header {
	padding: 16px 20px !important;
}
.woocommerce-account .b2b-offer-wrapper .b2b-header-icon {
	width: 44px !important;
	height: 44px !important;
}
.woocommerce-account .b2b-offer-wrapper .b2b-header-text h2 {
	font-size: 22px !important;
	margin: 2px 0 !important;
}

/* ================================================================
   MY ACCOUNT — EDIT ACCOUNT PAGE (/my-account/edit-account/)
   Polish form typography + focus rings + section grouping.
   ================================================================ */
.woocommerce-account .pe-ea-wrap input[type="text"],
.woocommerce-account .pe-ea-wrap input[type="email"],
.woocommerce-account .pe-ea-wrap input[type="tel"],
.woocommerce-account .pe-ea-wrap input[type="password"],
.woocommerce-account .pe-ea-wrap select {
	transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-account .pe-ea-wrap input:focus,
.woocommerce-account .pe-ea-wrap select:focus {
	outline: none !important;
	border-color: #2c4ea0 !important;
	box-shadow: 0 0 0 3px rgba(44,78,160,.12) !important;
}
/* Empty placeholder fields get a subtle dashed bottom hint so the
   user sees what's still to be filled in. */
.woocommerce-account .pe-ea-wrap input[placeholder="Συμπληρώστε..."]:placeholder-shown {
	border-bottom-style: dashed !important;
	border-bottom-color: #cbd5e1 !important;
}

/* ================================================================
   MY ACCOUNT — ORDERS PAGE (/my-account/orders/)
   Stronger hover, tighter mobile, more legible search.
   ================================================================ */
.woocommerce-account .pe-ord-table tbody tr {
	transition: background .15s ease, box-shadow .15s ease;
}
.woocommerce-account .pe-ord-table tbody tr:hover {
	background: #f0f4ff !important;
	box-shadow: inset 3px 0 0 0 #2c4ea0;
}
.woocommerce-account .pe-ord-search:focus-within {
	border-color: #2c4ea0 !important;
	box-shadow: 0 0 0 3px rgba(44,78,160,.12);
}
.woocommerce-account .pe-ord-stats-row {
	gap: 10px !important;
}
@media (max-width: 1100px) {
	.woocommerce-account .pe-ord-stats-row {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 640px) {
	.woocommerce-account .pe-ord-stats-row {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ================================================================
   QTY STEPPER — pending state.
   While the user is bursting +/− clicks, the AJAX is debounced (~1.1s).
   We mark the row/wrap with .pe-sc-pending / .pe-qty-pending so the user
   sees their changes are queued and will commit once they stop clicking.
   ================================================================ */
.pe-sidecart-item.pe-sc-pending .pe-sc-qty-input,
.pe-sidecart-item.pe-sc-pending .pe-sidecart-stepper {
	position: relative;
}
.pe-sidecart-item.pe-sc-pending .pe-sc-qty-input {
	color: #1e3a8a !important;
	transition: color .15s ease;
}
.pe-sidecart-item.pe-sc-pending::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		rgba(30, 58, 138, 0) 0%,
		rgba(30, 58, 138, 0.55) 35%,
		rgba(30, 58, 138, 0.95) 50%,
		rgba(30, 58, 138, 0.55) 65%,
		rgba(30, 58, 138, 0) 100%);
	background-size: 200% 100%;
	animation: pe-qty-pending-pulse 1.2s ease-in-out infinite;
	pointer-events: none;
}
@keyframes pe-qty-pending-pulse {
	0%   { background-position: -100% 0; opacity: .6; }
	50%  { opacity: 1; }
	100% { background-position: 200% 0; opacity: .6; }
}
/* Same indicator on the PDP stepper wrap. */
.pe-atc-row.pe-qty-pending .quantity {
	box-shadow: 0 0 0 2px rgba(30, 58, 138, .18) !important;
	transition: box-shadow .15s ease;
}
.pe-atc-row.pe-qty-pending .quantity input.qty {
	color: #1e3a8a !important;
}

/* ================================================================
   Suppress packaging cards inside specific carousels (e.g. PDP
   "Σχετικά προϊόντα") so the section stays compact. Set by passing
   { 'class' => 'pe-carousel-no-packaging' } as $opts to pe_product_carousel.
   ================================================================ */
.pe-carousel-no-packaging .pe-meta-wrap { display: none !important; }

/* ================================================================
   Shop column-count toggle (3 or 4 products per row).
   The class lives on .pe-shop-content so the override only fires on
   the shop archive grid — carousels and related products are unaffected.
   ================================================================ */
.pe-shop-cols-3 .products:not(.pe-carousel-track):not(.related),
.pe-shop-cols-3 ul.products:not(.pe-carousel-track):not(.related) {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.pe-shop-cols-4 .products:not(.pe-carousel-track):not(.related),
.pe-shop-cols-4 ul.products:not(.pe-carousel-track):not(.related) {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1380px) {
	/* 4-col view drops to 3 on mid-size desktops to avoid cramped cards. */
	.pe-shop-cols-4 .products:not(.pe-carousel-track):not(.related),
	.pe-shop-cols-4 ul.products:not(.pe-carousel-track):not(.related) {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 1180px) {
	.pe-shop-cols-3 .products:not(.pe-carousel-track):not(.related),
	.pe-shop-cols-3 ul.products:not(.pe-carousel-track):not(.related),
	.pe-shop-cols-4 .products:not(.pe-carousel-track):not(.related),
	.pe-shop-cols-4 ul.products:not(.pe-carousel-track):not(.related) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 540px) {
	.pe-shop-cols-3 .products:not(.pe-carousel-track):not(.related),
	.pe-shop-cols-3 ul.products:not(.pe-carousel-track):not(.related),
	.pe-shop-cols-4 .products:not(.pe-carousel-track):not(.related),
	.pe-shop-cols-4 ul.products:not(.pe-carousel-track):not(.related) {
		grid-template-columns: 1fr !important;
	}
}

/* Toolbar toggle UI — segmented control with two icon buttons. */
.pe-cols-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	margin: 0 8px;
}
.pe-cols-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 30px;
	border-radius: 7px;
	color: #64748b;
	background: transparent;
	text-decoration: none;
	transition: background .15s, color .15s, box-shadow .15s;
}
.pe-cols-btn:hover { color: #1e3a8a; background: #fff; }
.pe-cols-btn.is-active {
	background: #fff;
	color: #1e3a8a;
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
@media (max-width: 1180px) {
	/* Toggle is only meaningful on desktop where 3 vs 4 cols differs. */
	.pe-cols-toggle { display: none; }
}