/*
Base rules that theme.json cannot express: reduced-motion, focus visibility,
skip link. No color/spacing/typography values are hard-coded here — only
var(--wp--...) tokens and var(--pph-*) custom properties from theme.json
"custom" settings are referenced.
*/

.skip-link {
	position: absolute;
	top: -999px;
	left: 8px;
	z-index: 100000;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--pph-brown);
	color: var(--wp--preset--color--pph-white);
	border-radius: var(--wp--custom--radius--sm);
}

.skip-link:focus {
	top: 8px;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--pph-brown);
	outline-offset: 2px;
}

/* Continuous-line motif draw-in — disabled unless explicitly enabled by JS
   after checking prefers-reduced-motion (see assets/js/logo-line.js, Phase 1). */
.pph-logo-line path {
	stroke-dasharray: var(--pph-line-length, 0);
	stroke-dashoffset: var(--pph-line-length, 0);
}

.pph-logo-line.is-animating path {
	transition: stroke-dashoffset var(--wp--custom--motion--duration, 225ms) ease;
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.pph-logo-line path {
		stroke-dashoffset: 0;
	}
}

/* ---------- Visually-hidden text (icon button labels, a11y) ---------- */

.pph-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Buttons — unified system (Κεφ. 3.5, 7.4) ----------
   One design system, the header's own visual language: Inter, weight 500,
   no text-transform, radius var(--wp--custom--radius--sm) (8px), same
   background/color transition as the header's filled action
   (.pph-icon-btn--filled below) — just sized up for real text buttons.

   Primary (filled, bg --pph-brown-dark, hover --pph-brown, white text) is
   carried automatically by theme.json's styles.elements.button for every
   .wp-element-button — core/button blocks, and all of our own raw
   <button>/<a class="wp-element-button"> elements (hero CTA, filters
   "Εφαρμογή", newsletter/contact submit, "Μετάβαση στο καλάθι", the sticky
   mobile Add to Cart bar). .pph-btn--primary below exists for the couple of
   spots that build a button from scratch instead.

   Secondary (outline) = .pph-btn--secondary and the core "Δευτερεύον" block
   style — transparent bg, 1px solid --pph-brown border + text, hover fills
   --pph-beige. Used for "Δείτε όλα", pagination, filters "Καθαρισμός".

   Disabled = .pph-btn[disabled] / .pph-btn.is-disabled — muted
   --pph-stone fill, no hover, cursor: not-allowed.

   WooCommerce's own buttons (.woocommerce .button, wc-block-components-button,
   add-to-cart, cart/checkout) and the account-modal login/register submit
   pick up the same Primary tokens directly on their own selectors further
   down (checkout.css, product-page.css, global.css account-modal section) —
   markup we don't control the class list of, so the values are duplicated
   there rather than the class name.

   NOT included here: .pph-icon-btn (header icon-only actions) and the
   product card / product page wishlist heart — a separate icon-only
   affordance, explicitly out of this system. */

.pph-btn,
.pph-section__viewall,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 500;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-btn,
.pph-section__viewall {
	padding: 10px 20px;
	border: none;
	background: none;
}

/* CTA size (~14px/28px) — hero, product-page Add to Cart, sticky mobile bar. */
.pph-btn--cta,
.pph-hero__cta,
.pph-product-page__add-to-cart .single_add_to_cart_button,
.pph-sticky-add-to-cart .wp-element-button {
	padding: 14px 28px !important;
}

.pph-btn--primary {
	background: var(--wp--preset--color--pph-brown-dark);
	color: var(--wp--preset--color--pph-white);
}

.pph-btn--primary:hover,
.pph-btn--primary:focus-visible {
	background: var(--wp--preset--color--pph-brown);
}

.pph-btn--secondary,
.wp-block-button.is-style-pph-secondary .wp-block-button__link,
.pph-section__viewall {
	background: transparent;
	color: var(--wp--preset--color--pph-brown);
	border: 1px solid var(--wp--preset--color--pph-brown);
}

.pph-btn--secondary:hover,
.pph-btn--secondary:focus-visible,
.wp-block-button.is-style-pph-secondary .wp-block-button__link:hover,
.pph-section__viewall:hover {
	background: var(--wp--preset--color--pph-beige);
}

/* "Καθαρισμός" — a quiet text link next to the primary "Προβολή" button in
   the collection filters drawer's footer (.pph-filters-drawer__footer,
   inc/collection.php), not a second boxed button: muted until hover,
   underline only then, never wraps onto a second line. */
.pph-filters-panel__reset {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--wp--preset--color--pph-text-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-filters-panel__reset:hover,
.pph-filters-panel__reset:focus-visible {
	color: var(--wp--preset--color--pph-brown);
	text-decoration: underline;
}

.pph-btn:disabled,
.pph-btn.is-disabled,
.wp-element-button:disabled {
	background: var(--wp--preset--color--pph-stone);
	color: var(--wp--preset--color--pph-white);
	border-color: var(--wp--preset--color--pph-stone);
	cursor: not-allowed;
	pointer-events: none;
}

/* WooCommerce's own classic ".button" class (single_add_to_cart_button, the
   "Προβολή καλαθιού" link WC injects after an AJAX add-to-cart, My Account
   order actions/coupon-apply, the account-modal login/register forms below)
   — same Primary tokens as everything else, since WooCommerce's default
   frontend stylesheet is not brand-styled on its own. The Cart/Checkout
   block buttons (.wc-block-components-button) get the same treatment in
   checkout.css, where the rest of that page's reskin already lives. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	padding: 10px 20px;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--pph-brown-dark) !important;
	color: var(--wp--preset--color--pph-white) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 500;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.woocommerce .button:hover,
.woocommerce .button:focus-visible {
	background: var(--wp--preset--color--pph-brown) !important;
	color: var(--wp--preset--color--pph-white) !important;
}

.woocommerce .button.disabled,
.woocommerce .button:disabled {
	background: var(--wp--preset--color--pph-stone) !important;
	color: var(--wp--preset--color--pph-white) !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------- Form controls — unified system (Κεφ. 3.5, 11.6) ----------
   Same teal language as the button system above: Inter, radius
   var(--wp--custom--radius--sm) (8px), --pph-border at rest, --pph-brown on
   hover/focus, a --pph-brown focus ring (same as the global :focus-visible
   ring, so keyboard focus never changes color between a field and a
   button; --pph-sage was too low-contrast for a focus indicator) — replacing each browser's native
   blue checkbox/select chrome. Global element selectors on purpose, so
   every checkbox/select/text input site-wide picks this up automatically:
   collection filters, account-modal forms, newsletter, WooCommerce
   checkout/cart fields, PDP quantity/variation selects — not just
   .pph-filter-*. Page-specific stylesheets (collection.css, product-page.css,
   checkout.css, homepage.css) keep only their own layout/sizing on top of
   this; colors/radius/focus live here exactly once. */

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--pph-border);
	border-radius: 4px;
	background-color: var(--wp--preset--color--pph-white);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

input[type="checkbox"]:hover {
	border-color: var(--wp--preset--color--pph-brown);
}

input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--pph-brown);
	border-color: var(--wp--preset--color--pph-brown);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,4.5'/%3E%3C/svg%3E");
}

input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--pph-brown);
	outline-offset: 2px;
}

/* Custom chevron (teal, --pph-brown baked in as a literal hex — data-URI
   backgrounds can't reference CSS custom properties) replacing the native
   dropdown arrow; right padding reserves room for it. */
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--wp--preset--color--pph-border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--pph-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C5F5B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 12px;
	padding: 10px 40px 10px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text);
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

select::-ms-expand {
	display: none;
}

select:hover {
	border-color: var(--wp--preset--color--pph-stone);
}

select:focus-visible {
	border-color: var(--wp--preset--color--pph-brown);
	outline: 2px solid var(--wp--preset--color--pph-brown);
	outline-offset: 2px;
}

/* Text-like inputs — same border/radius/focus language as selects above, so
   a filter's price fields (for example) read as one family with the sort
   dropdown next to them. */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea {
	border: 1px solid var(--wp--preset--color--pph-border);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--pph-text);
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
textarea:hover {
	border-color: var(--wp--preset--color--pph-stone);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="url"]:focus-visible,
textarea:focus-visible {
	border-color: var(--wp--preset--color--pph-brown);
	outline: 2px solid var(--wp--preset--color--pph-brown);
	outline-offset: 2px;
}

/* ---------- Dropdown menus — shared component ----------
   One trigger-button + floating-panel component, reused by:
   1) the sort custom-select (progressive enhancement over the native
      <select data-pph-custom-select>, assets/js/custom-select.js) — a real
      listbox (role="listbox"/"option", aria-selected, ↑/↓ + Enter).
   2) the header account panel (.pph-account-panel, inc/header.php) — same
      rounded/shadow/fade-scale visual language and item hover states for
      "συνεπή menus", layered onto its EXISTING hover/focus-visible open
      mechanism (kept as-is: its trigger's aria-expanded/aria-controls are
      already owned by the login/register modal — assets/js/account-modal.js
      — so a second click/keyboard controller isn't wired onto it; see
      assets/js/dropdown.js for the reusable open/close primitive available
      wherever a future menu can safely own its own trigger).

   Rounded white card + soft shadow + fade/scale open — a deliberately
   brighter, more "floating card" look than the header's other flat/square
   hover panels (.pph-cart-panel etc., left untouched). */

.pph-dropdown {
	position: relative;
}

.pph-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--pph-border);
	border-radius: var(--wp--custom--radius--sm);
	padding: 10px 40px 10px 14px;
	background: var(--wp--preset--color--pph-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text);
	cursor: pointer;
	position: relative;
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-dropdown-trigger:hover {
	border-color: var(--wp--preset--color--pph-stone);
}

.pph-dropdown-trigger:focus-visible {
	border-color: var(--wp--preset--color--pph-brown);
	outline: 2px solid var(--wp--preset--color--pph-brown);
	outline-offset: 2px;
}

.pph-dropdown-trigger__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pph-dropdown-trigger__chevron {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: var(--wp--preset--color--pph-brown);
	pointer-events: none;
	transform: translateY(-50%);
	transition: transform var(--wp--custom--motion--durationFast) var(--wp--custom--motion--easing);
}

.pph-dropdown.is-open .pph-dropdown-trigger__chevron {
	transform: translateY(-50%) rotate(180deg);
}

/* Sort dropdown only — filled teal to match the filter pills (scoped so other
   custom dropdowns keep the default white trigger). */
.pph-collection__sort .pph-dropdown-trigger {
	background: var(--wp--preset--color--pph-brown);
	border-color: var(--wp--preset--color--pph-brown);
	color: var(--wp--preset--color--pph-white);
	font-size: var(--wp--preset--font-size--caption);
	padding-block: 6px;
}

.pph-collection__sort .pph-dropdown-trigger:hover {
	background: var(--wp--preset--color--pph-brown-dark);
	border-color: var(--wp--preset--color--pph-brown-dark);
}

.pph-collection__sort .pph-dropdown-trigger__chevron {
	color: var(--wp--preset--color--pph-white);
}

.pph-dropdown-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 50;
	min-width: 100%;
	background: var(--wp--preset--color--pph-white);
	border: 1px solid var(--wp--preset--color--pph-border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 12px 32px rgba(23, 48, 46, 0.1);
	overflow: hidden;
	padding: var(--wp--preset--spacing--10);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.96);
	transform-origin: top;
	transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 120ms;
}

.pph-dropdown.is-open .pph-dropdown-panel {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	/* Slightly snappier close than open (~90ms) reads as more responsive —
	   only the opening transition needs the fuller 120ms to feel soft. */
	transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
	.pph-dropdown-panel {
		transition: opacity var(--wp--custom--motion--duration) linear, visibility var(--wp--custom--motion--duration);
		transform: none;
	}
}

.pph-dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden; /* overflow-y:auto makes overflow-x compute to auto too; pin it hidden so no horizontal scrollbar ever shows */
}

.pph-dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	box-sizing: border-box; /* keep width:100% + padding inside the panel so it doesn't overflow horizontally */
	text-align: left;
	background: none;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-dropdown-item:hover,
.pph-dropdown-item:focus-visible {
	background: var(--wp--preset--color--pph-beige);
	color: var(--wp--preset--color--pph-brown);
}

.pph-dropdown-item[aria-selected="true"] {
	color: var(--wp--preset--color--pph-brown);
	font-weight: 600;
}

/* Check mark for the active option — listbox items only (aria-selected is
   never present on the account panel's plain action links/buttons, so this
   never renders there). */
.pph-dropdown-item[aria-selected="true"]::after {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C5F5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ---------- Header shell ----------
   Three rows (Papier-style layout, SPEC.md §4): (1) announcement bar
   (outside the sticky header, scrolls away normally); (2) main row — search
   pill (grid area "search") / centered logo (grid area "logo") / account,
   wishlist, cart (grid area "actions"), with a mobile-only hamburger as a
   fourth grid item; (3) centered main nav row with mega menus. Rows 2+3
   stick together and shrink on scroll (.is-scrolled, toggled by
   navigation.js) — the announcement bar does not stick. */

.pph-announcement-bar {
	background: var(--wp--preset--color--pph-sand);
	color: var(--wp--preset--color--pph-brown);
	text-align: center;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.02em;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--40);
	max-height: 60px; /* generous ceiling above the ~38px natural content height, so it never clips at rest */
	overflow: hidden;
	transition: max-height var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), padding-block var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

/* Collapses once the sticky header engages (body.is-scrolled — toggled by
   navigation.js alongside .pph-site-header.is-scrolled — the announcement
   bar itself is a sibling of the header, not a descendant, so it needs its
   own body-level flag rather than a `.pph-site-header.is-scrolled …`
   selector). Leaves a tight compact bar, Papier-style. */
body.is-scrolled .pph-announcement-bar {
	max-height: 0;
	padding-block: 0;
	opacity: 0;
}

/* The header template-part wrapper is only as tall as the header itself, so
   position:sticky on .pph-site-header would otherwise stick only within that
   short wrapper and scroll away immediately. display:contents removes the
   wrapper's box so .pph-site-header sticks against the page/viewport. */
header.wp-block-template-part {
	display: contents;
}

.pph-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--pph-ivory);
	/* Full-width divider under the nav row so the header always separates from
	   the same-coloured content below. When the header is stuck over content
	   (.is-scrolled) a soft shadow fades in on top of the line for extra lift. */
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
	transition: box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-site-header.is-scrolled {
	box-shadow: 0 2px 8px rgba(23, 48, 46, 0.05);
}

.pph-site-header__row--main {
	display: grid;
	/* minmax(0, 1fr) — not bare 1fr — so both flanking columns stay exactly
	   equal width regardless of how much the search pill vs. the 3-button
	   actions group naturally need; otherwise Grid's content-based automatic
	   minimum makes the wider (actions) column win more space and the logo
	   drifts off-center. Equal columns + justify-self: start/end (below)
	   pushes search flush to the left edge and actions flush to the right
	   edge, with the logo always dead-center between them. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "lead logo actions";
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
	/* Wide container (1440px, not the 1280px content width) so search and
	   actions land closer to the viewport edges on large screens, opening
	   more air around the centered logo. */
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--header--height);
	transition: min-height var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-site-header.is-scrolled .pph-site-header__row--main {
	min-height: var(--wp--custom--header--height-shrink);
}

.pph-site-header__row--nav {
	/* Logo↔categories gap — a small gap, not zero (distinct from the
	   nav↔hero gap below, which is meant to read as fully closed). */
	padding-top: calc(var(--wp--preset--spacing--10) / 2);
	/* Nav↔hero gap — already at 0 (fully closed, "nav almost touches the
	   hero") from the previous round; nothing left to cut here. */
	padding-bottom: 0;
	transition: padding-top var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), padding-bottom var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-site-header.is-scrolled .pph-site-header__row--nav {
	/* Resting state is already this tight (see above), so scrolling no
	   longer changes the nav row's own padding — the shrink-on-scroll effect
	   still comes through via .pph-site-header__row--main's min-height. */
	padding-top: calc(var(--wp--preset--spacing--10) / 2);
	padding-bottom: 0;
}

/* Η αριστερή στήλη φιλοξενεί δύο στοιχεία πλέον: το πεδίο αναζήτησης και,
   δίπλα του, τον επιλογέα γλώσσας. */
.pph-site-header__lead {
	grid-area: lead;
	justify-self: start;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.pph-search-trigger {
	/* Filled pill, matched to the Papier reference pixel-for-pixel — see the
	   explicit metrics below rather than the 8px spacing scale (same
	   approach already used for this header's icon sizes). Beige fill,
	   darkening to sand on hover; muted icon+label reading like input
	   placeholder text. NOTE: at min-width:360px this can crowd the logo in
	   the ~768–900px tablet band, where the search/actions grid columns only
	   have ~270–330px each to work with — flagging since our header only has
	   two responsive modes (mobile icon-only vs. this desktop pill), no
	   separate tablet tier; say the word if that band needs its own rule. */
	display: inline-flex;
	align-items: center;
	min-height: 34px; /* below the 44/48px touch-target minimums used elsewhere in the header — flagging, not silently overriding, since this is now purely a mouse-precision-first control */
	min-width: 360px;
	gap: 10px;
	background: var(--wp--preset--color--pph-beige);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 22px;
	color: var(--wp--preset--color--pph-text-muted);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-search-trigger:hover,
.pph-search-trigger:focus-visible {
	color: var(--wp--preset--color--pph-brown);
	background-color: var(--wp--preset--color--pph-sand);
}

.pph-search-trigger svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: currentColor;
}

.pph-search-trigger__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.02em;
}

.pph-site-header__logo {
	grid-area: logo;
	justify-self: center;
	position: relative;
	display: block;
	/* NOTE: Brand Bible Κεφ. 2 / SPEC.md §2 states a 180px digital minimum
	   for the full logo+wordmark lockup, below which only the icon mark
	   should be used — the resting 160px here is a deliberate
	   owner-requested deviation (flagged before, still under 180px), but
	   the .is-scrolled state below now genuinely satisfies that rule: past
	   the threshold it swaps to the mark alone, same as the brand guideline
	   intends. Fixed height (not height:auto) since both crossfading images
	   below are absolutely positioned and don't contribute to the
	   container's own layout size — without it the container would
	   collapse to 0 height. 66px = this width × the full logo's own aspect
	   ratio (679/1648), so the default state matches what height:auto would
	   have produced. */
	width: 160px;
	height: 66px;
	flex-shrink: 0;
	transition: width var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), height var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-site-header.is-scrolled .pph-site-header__logo {
	width: 120px;
	height: 50px;
}

.pph-site-header__logo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-site-header__logo-img--mark {
	opacity: 0;
}

.pph-site-header.is-scrolled .pph-site-header__logo-img--full {
	opacity: 0;
}

.pph-site-header.is-scrolled .pph-site-header__logo-img--mark {
	opacity: 1;
}

/* ---------- Minimal checkout header (Κεφ. 14) ----------
   Cart left, logo centered — cart/checkout/order-received
   (parts/header-checkout.html, templates/page-cart.html,
   templates/page-checkout.html, templates/order-confirmation.html). Reuses
   .pph-site-header wholesale (sticky, bottom border, scroll-shrink) and
   .pph-site-header__row--main's own equal-flanking-column centering trick
   (see that rule's comment) — just repoints the LEFT column's content from
   search to the cart wrap; .pph-site-header__logo already targets the
   shared "logo" grid area unconditionally, so it needs no override here.
   The right column is deliberately left empty (no third element in the
   checkout variant's markup) purely so its equal width keeps the logo
   mathematically centered, exactly like the empty space search/actions
   already balance against each other in the full header. One rule, no
   media queries needed — the checkout header uses the same 3-column
   layout at every viewport width, unlike the full header's separate mobile
   layout, since there's nothing here that needs to collapse. */
.pph-site-header--checkout .pph-site-header__row--main {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "cart logo actions";
}

.pph-site-header--checkout .pph-mini-cart-wrap {
	grid-area: cart;
	justify-self: start;
}

.pph-site-header__row--nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pph-site-header__nav-link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 500;
	text-decoration: none;
	text-underline-offset: 4px;
	color: var(--wp--preset--color--pph-text);
	letter-spacing: 0.02em;
	background: none;
	border: none;
	padding: var(--wp--preset--spacing--20) 0;
	cursor: pointer;
}

.pph-site-header__nav-link:hover,
.pph-mega-menu-trigger[aria-expanded="true"] {
	color: var(--wp--preset--color--pph-brown);
}

/* Active category keeps an underline for as long as its panel is open
   (Papier's "Diaries & Planners" active state). */
.pph-mega-menu-trigger[aria-expanded="true"] {
	text-decoration: underline;
}

/* ---------- Mega menu panel ----------
   Full-width, Papier-style: the panel is NOT anchored to its own
   .pph-mega-menu-item (that would cap it to the trigger's own box) — it's
   anchored to .pph-site-header instead (already position:sticky, so it's a
   valid containing block on its own), so "left:0;right:0" spans the entire
   header/viewport regardless of which category opened it. The panel stays
   a DOM child of its <li> throughout (only the CSS containing block moved),
   so hover-intent mouseenter/mouseleave in navigation.js — which listens on
   the <li> — still sees the panel as "inside" for gap-crossing purposes. */

.pph-mega-menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* Ivory, matching the header — reads as a natural extension of it rather
	   than a separate white "card" floating over the page. */
	background: var(--wp--preset--color--pph-ivory);
	border-top: 1px solid var(--wp--preset--color--pph-border);
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
	z-index: 50;
}

.pph-mega-menu-panel__inner {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 300px);
	gap: var(--wp--preset--spacing--60);
	/* Narrower than the header row above (which uses --container--max/1440px)
	   and more inset — Papier keeps the mega panel's content pulled in from
	   the panel's own full-bleed edges, not stretched edge-to-edge. The
	   columns end up roughly (not pixel-exact) under the nav rather than
	   flush with the header's wider bleed. */
	max-width: var(--wp--custom--container--content);
	margin-inline: auto;
	/* Vertical padding reduced from spacing--70 (48px) to spacing--60 (32px):
	   that 48px was sized to balance the tall featured-image column, and no
	   category renders one any more, so the panel was mostly empty air above
	   and below a few rows of links. Horizontal inset stays at 48px. */
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* No featured/spotlight column for this category (inc/header.php only
   renders that column when 'featured' is set in inc/menu-data.php) — the
   links area gets the full panel width instead of sharing it. */
.pph-mega-menu-panel__inner--no-featured {
	grid-template-columns: 1fr;
}

/* Flat mode (categories with no sub-subcategory data yet — Δώρα, Κοσμήματα):
   a single flowed list, no column headings. SPEC.md §3 — real
   product-category subgroups arrive per-category as their own imports land;
   --pph-mega-cols is set per category in inc/menu-data.php, output in
   inc/header.php. */
.pph-mega-menu-panel__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: var(--pph-mega-cols, 3);
	/* Same column gap as grouped mode below (was spacing--60/32px, i.e. double)
	   — hovering Σχολικά and hovering Δώρα now give the same column rhythm. */
	column-gap: var(--wp--preset--spacing--40);
}

.pph-mega-menu-panel__links li {
	break-inside: avoid;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* In flat mode each entry IS a top-level subcategory — the same rank as
   grouped mode's "Γραφική Ύλη"/"Τσάντες" column headings, not its small
   muted child links. So it gets the group-title treatment (Alegreya bold,
   teal, 16px) rather than plain Inter body text: that is what makes every
   category menu read like Σχολικά, as asked. */
.pph-mega-menu-panel__links a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
}

.pph-mega-menu-panel__links a:hover {
	color: var(--wp--preset--color--pph-brown);
	text-decoration: underline;
}

/* Grouped mode (Papier-style 2-level layout — currently Σχολικά only, see
   inc/menu-data.php's 'grouped' flag): explicit CSS Grid, one cell per
   subcategory, instead of the flat mode's auto-flowing `columns` — group
   boundaries need to stay intact rather than being split wherever a column
   happens to run out of height. Bold serif column headings (Alegreya) with
   thin muted sans links underneath (Inter) — the Papier contrast this was
   asked to match. */
.pph-mega-menu-panel__links--grouped {
	display: grid;
	grid-template-columns: repeat(var(--pph-mega-cols, 4), 1fr);
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
	align-items: start;
	justify-items: start;
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group {
	/* Flush-left, explicitly — this is a defensive belt-and-braces
	   declaration (nothing upstream sets text-align:center on this
	   subtree), but it guarantees the column's own text alignment
	   regardless of anything the grid/flex parents do. */
	width: 100%;
	text-align: left;
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group-title {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	/* Was heading-3 (clamp ~20–26px) — read as page-section titles, not
	   discreet column labels. --font-size--body is exactly 1rem/16px. Bold
	   (was 400/regular) so the heading still reads clearly at this size. */
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--20);
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group-title:hover {
	text-decoration: underline;
}

/* Umbrella label (e.g. "Γραφική Ύλη") — not a real category, so no link
   affordance: no pointer cursor, no hover underline. */
.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group-title--label {
	cursor: default;
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group-title--label:hover {
	text-decoration: none;
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	text-align: left;
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group ul li {
	margin-bottom: 0; /* the flat-mode li rule above still applies otherwise — the flex gap above is the only spacing needed here */
	width: 100%;
	text-align: left;
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group ul a {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400; /* explicit — the flat-mode `__links a` rule above is bold, and these child links must stay light against their bold serif heading */
	line-height: 1.3; /* body's global 1.7 default reads loose at this scale */
	color: var(--wp--preset--color--pph-text-muted);
	text-decoration: none;
}

.pph-mega-menu-panel__links--grouped .pph-mega-menu-panel__group ul a:hover {
	color: var(--wp--preset--color--pph-brown);
	text-decoration: underline;
}

.pph-mega-menu-panel__featured {
	background: var(--wp--preset--color--pph-sand);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--40);
	position: relative;
	align-self: start;
}

.pph-mega-menu-panel__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	color: var(--wp--preset--color--pph-brown);
	opacity: 0.6;
}

.pph-mega-menu-panel__image svg {
	width: 40px;
	height: 40px;
}

.pph-mega-menu-panel__featured-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--pph-brown);
}

.pph-mega-menu-panel__cta {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
}

.pph-badge {
	/* pph-sage fails WCAG AA at this text size with either dark or white
	   text (checked: ~3.6-3.9:1) — SPEC.md §1.1 restricts sage to
	   decorative/non-text use, so badges use the verified AAA brown+white
	   pairing (Κεφ. 3.5) instead. */
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--caption);
	background: var(--wp--preset--color--pph-brown);
	color: var(--wp--preset--color--pph-white);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
}

.pph-site-header__actions {
	grid-area: actions;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.pph-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--wp--preset--color--pph-text-muted);
	background: none;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-icon-btn:hover,
.pph-icon-btn:focus-visible {
	color: var(--wp--preset--color--pph-brown);
	background-color: var(--wp--preset--color--pph-sand);
}

.pph-icon-btn svg {
	width: 22px;
	height: 22px;
}

/* Icon + visible text label (Papier-style header actions, SPEC.md §4) — the
   label itself is the accessible name, so no visually-hidden duplicate.
   Same slim height as .pph-search-trigger (38px — below the 44/48px
   touch-target minimums used elsewhere, a deliberate mouse-first choice for
   this row, flagged there). Several of these render as <a> (account when
   logged in / on the account page, wishlist) — theme.json's global link
   style underlines on :hover, so both states are reset here explicitly. */
.pph-icon-btn--labeled {
	width: auto;
	height: auto;
	min-height: 34px;
	gap: var(--wp--preset--spacing--10);
	padding: 0 var(--wp--preset--spacing--30);
	text-decoration: none;
}

.pph-icon-btn--labeled:hover,
.pph-icon-btn--labeled:focus-visible {
	text-decoration: none;
}

.pph-icon-btn--labeled svg {
	width: 14px;
	height: 14px;
}

/* Account button — filled, like Papier's "Log in / Sign up" (dark box,
   white icon+label), so it reads as the primary header action. Wishlist and
   Cart stay plain/muted (.pph-icon-btn--labeled above). Applies to all three
   account states in inc/header.php (logged-in, is_account_page, guest) so
   the affordance stays consistent regardless of label text. */
.pph-icon-btn--filled.pph-icon-btn--filled {
	background: var(--wp--preset--color--pph-brown-dark);
	color: var(--wp--preset--color--pph-white);
}

.pph-icon-btn--filled.pph-icon-btn--filled:hover,
.pph-icon-btn--filled.pph-icon-btn--filled:focus-visible {
	background: var(--wp--preset--color--pph-brown);
	color: var(--wp--preset--color--pph-white);
}

.pph-icon-btn__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Lives inside .pph-site-header__lead, so it is positioned by that flex row
   rather than by a grid area of its own — see the markup comment in
   inc/header.php for why both side groups have to stay single grid children. */
.pph-site-header__hamburger {
	display: none; /* shown on mobile only — opens the off-canvas panel below */
}

/* Mini-cart label (Papier-style "Καλάθι" next to the icon) — CSS generated
   content, not real text, since the WooCommerce Mini-Cart block's button
   markup has no label slot of its own; the button keeps its WooCommerce
   aria-label, so this is purely decorative and doesn't affect the a11y
   name. Text comes from a custom property set inline in inc/header.php so
   it stays translatable. */
.pph-mini-cart-wrap--labeled .wc-block-mini-cart__button {
	gap: var(--wp--preset--spacing--10);
}

.pph-mini-cart-wrap--labeled .wc-block-mini-cart__icon {
	width: 14px;
	height: 14px;
}

.pph-mini-cart-wrap--labeled .wc-block-mini-cart__button::after {
	content: var(--pph-cart-label);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.02em;
	color: currentColor;
}

/* ---------- Search overlay (Κεφ. 7.8, 9.6) ---------- */

.pph-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	/* Ημιδιαφανές φόντο αντί για συμπαγές ivory σε όλη την οθόνη: ο πίνακας
	   κάθεται στην κορυφή και η σελίδα φαίνεται αχνά από κάτω. */
	background: rgba(23, 48, 46, 0.4);
	overflow-y: auto;
	display: block;
}

.pph-search-overlay[hidden] {
	display: none;
}

/* Πίνακας αγκυρωμένος στην ΚΟΡΥΦΗ, όχι κατάληψη όλης της οθόνης: ο
   επισκέπτης βλέπει ότι η σελίδα από κάτω είναι ακόμα εκεί και ότι μπορεί να
   επιστρέψει (πρότυπο Papier). Το σκούρο φόντο παραμένει κλικαρόμενο για
   κλείσιμο — ο χειριστής είναι ήδη στο search-overlay.js. */
.pph-search-overlay__inner {
	background: var(--wp--preset--color--pph-white);
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	max-height: 85vh;
	overflow-y: auto;
}

.pph-search-overlay__bar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--container--max);
	margin: 0 auto var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
	padding-bottom: var(--wp--preset--spacing--30);
}

.pph-search-overlay__form {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex: 1;
	min-width: 0; /* χωρίς αυτό το πεδίο σπρώχνει έξω τα κουμπιά δεξιά */
}

.pph-search-overlay__form svg {
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--pph-stone);
	flex-shrink: 0;
}

.pph-search-overlay__form input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	outline: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-large);
	color: var(--wp--preset--color--pph-text);
}

/* Εμφανίζεται μόνο όταν υπάρχει κάτι να καθαριστεί (το JS βγάζει το hidden). */
.pph-search-overlay__clear {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
	text-decoration: underline;
}

.pph-search-overlay__clear:hover {
	color: var(--wp--preset--color--pph-brown);
}

.pph-search-overlay__clear[hidden] {
	display: none;
}

.pph-search-overlay__close {
	flex-shrink: 0;
}

/* Στενή αριστερή στήλη για τις προτάσεις, φαρδιά δεξιά για τα προϊόντα. */
.pph-search-overlay__columns {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: var(--wp--preset--spacing--70);
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	align-items: start;
}

.pph-search-overlay__suggestions h3,
.pph-search-overlay__products h3 {
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--pph-text-muted);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.pph-search-overlay__suggestions ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* Οι προτάσεις είναι λίστα κειμένου, όχι «πιλάκια»: στη στενή στήλη
   διαβάζονται σαν ευρετήριο και χωράνε περισσότερες. Και τα δύο είδη
   (σύνδεσμος πρότασης, κουμπί δημοφιλούς όρου) μοιάζουν ίδια. */
.pph-search-overlay__suggestions a,
.pph-search-overlay__suggestions button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-search-overlay__suggestions a:hover,
.pph-search-overlay__suggestions button:hover {
	color: var(--wp--preset--color--pph-brown);
	text-decoration: underline;
}

/* Το τμήμα που ταίριαξε με ό,τι πληκτρολογήθηκε (το τυλίγει το JS). */
.pph-search-overlay__suggestions strong {
	font-weight: 600;
}

.pph-search-overlay__none {
	color: var(--wp--preset--color--pph-text-muted);
	font-size: var(--wp--preset--font-size--caption);
}

/* Κάρτες προϊόντων: εικόνα πάνω, κείμενο κάτω — όχι η παλιά οριζόντια
   διάταξη, που με 4 στήλες άφηνε ελάχιστο πλάτος στο όνομα. */
.pph-search-overlay__results-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.pph-search-overlay__results-list a {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	text-decoration: none;
	color: var(--wp--preset--color--pph-text);
}

.pph-search-overlay__results-list img,
.pph-search-overlay__no-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--pph-sand);
	margin-bottom: var(--wp--preset--spacing--10);
}

.pph-search-overlay__result-title {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.4;
}

.pph-search-overlay__result-price {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--pph-brown);
}

.pph-search-overlay__empty {
	color: var(--wp--preset--color--pph-text-muted);
}

@media (max-width: 767px) {
	/* Σε στενή οθόνη δεν χωράνε δύο στήλες: οι προτάσεις πάνω, τα προϊόντα
	   από κάτω σε δύο στήλες αντί για τέσσερις. */
	.pph-search-overlay__columns {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.pph-search-overlay__results-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.pph-search-overlay__inner {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

/* ---------- Mobile off-canvas panel (Κεφ. 9.9) ---------- */

.pph-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--wp--preset--color--pph-ivory);
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40);
}

.pph-mobile-panel[hidden] {
	display: none;
}

.pph-mobile-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--50);
}

.pph-mobile-panel__logo {
	width: 150px;
}

.pph-mobile-panel__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Search field at the top of the off-canvas panel, in the manner of the
   Papier header this layout follows: a softly filled pill rather than a
   bordered input, so it reads as somewhere to type rather than as a form
   control competing with the links below it. The magnifier is decorative —
   the <form>'s own aria-label is what names this control to a screen
   reader. */
.pph-mobile-panel__search {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--pph-beige);
}

/* The ring belongs on the pill, not on the bare input inside it, so the
   whole control reads as focused. :focus-within is correct here in a way it
   was not for the header's hover panels — focus genuinely rests in this
   field while someone types, rather than being handed back by a closing
   dialog. */
.pph-mobile-panel__search:focus-within {
	outline: 2px solid var(--wp--preset--color--pph-brown-dark);
	outline-offset: 2px;
}

.pph-mobile-panel__search svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-mobile-panel__search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	outline: none;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text);
}

.pph-mobile-panel__actions {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
}

.pph-mobile-panel__actions a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	text-decoration: none;
	color: var(--wp--preset--color--pph-text);
	font-size: var(--wp--preset--font-size--body);
}

.pph-mobile-panel__actions svg {
	width: 22px;
	height: 22px;
}

.pph-accordion-item {
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
}

.pph-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 48px;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
	padding: var(--wp--preset--spacing--30) 0;
	cursor: pointer;
}

button.pph-accordion-trigger::after {
	content: "+";
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--pph-stone);
}

button.pph-accordion-trigger[aria-expanded="true"]::after {
	content: "\2212";
}

.pph-accordion-panel {
	padding-bottom: var(--wp--preset--spacing--40);
}

.pph-accordion-panel ul {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.pph-accordion-panel a {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text);
	text-decoration: none;
	display: inline-block;
	min-height: 48px;
	display: flex;
	align-items: center;
}

/* Umbrella label inside the mobile accordion (e.g. "Γραφική Ύλη") — plain
   text, not a link, so it's styled as a small caption instead of matching
   the tappable links around it. */
.pph-accordion-panel__label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: var(--wp--preset--spacing--30);
}

.pph-accordion-viewall {
	font-weight: 500;
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
}

/* ---------- Breadcrumbs (Κεφ. 9.7) ---------- */

.pph-breadcrumbs {
	max-width: var(--wp--custom--container--content);
	margin: var(--wp--preset--spacing--30) auto 0; /* 12px — tighter gap below the header */
	padding-inline: var(--wp--preset--spacing--40);
}

.pph-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--pph-stone);
}

.pph-breadcrumbs a {
	color: var(--wp--preset--color--pph-text-muted);
	text-decoration: none;
}

.pph-breadcrumbs a:hover {
	color: var(--wp--preset--color--pph-brown);
	text-decoration: underline;
}

.pph-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--pph-text);
}

/* ---------- Mini-cart (Κεφ. 13.3/13.4) ----------
   Official WooCommerce block (see inc/header.php) — reskinned to match
   .pph-icon-btn and our tokens. Global (not checkout.css) since the drawer
   can be opened from any page via the header icon. */

.pph-mini-cart-wrap {
	position: relative;
}

.pph-mini-cart-wrap .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: none;
	border: none;
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
	color: var(--wp--preset--color--pph-text-muted);
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-mini-cart-wrap .wc-block-mini-cart__button:hover,
.pph-mini-cart-wrap .wc-block-mini-cart__button:focus-visible {
	color: var(--wp--preset--color--pph-brown);
	background-color: var(--wp--preset--color--pph-sand);
}

.pph-mini-cart-wrap--labeled .wc-block-mini-cart__button {
	width: auto;
	height: auto;
	min-height: 34px; /* same slim treatment as .pph-search-trigger / .pph-icon-btn--labeled */
	padding: 0 var(--wp--preset--spacing--30);
}

.pph-mini-cart-wrap .wc-block-mini-cart__icon {
	width: 22px;
	height: 22px;
}

.pph-mini-cart-wrap .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--pph-brown) !important;
	color: var(--wp--preset--color--pph-white) !important;
	font-size: var(--wp--preset--font-size--caption);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay {
	background: rgba(23, 48, 46, 0.4);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	background: var(--wp--preset--color--pph-ivory);
}

.wc-block-mini-cart-items__title,
.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--pph-brown);
}

.wc-block-mini-cart-item__prices .price,
.wc-block-components-totals-footer-item .price,
.wc-block-components-formatted-money-amount {
	color: var(--wp--preset--color--pph-brown);
	font-weight: 600;
}

.wc-block-mini-cart__footer .wc-block-components-button,
.wc-block-mini-cart__footer .wp-element-button {
	border-radius: var(--wp--custom--radius--sm) !important;
}

/* ---------- Account header panel (hover/focus — logged-in and logged-out) ----------
   Markup carries the shared dropdown classes too (.pph-dropdown-panel/
   -list/-item, inc/header.php) for the same rounded/shadow/item-hover look
   as the sort custom-select ("Dropdown menus — shared component" above) —
   just this instance's own position (right-aligned under the header icon)
   and open trigger (hover/focus-visible, not .is-open — see that section's
   comment for why this one keeps its own mechanism). */

.pph-account-wrap {
	position: relative;
}

/* Position/width specific to sitting under the header icon, plus a
   deliberate override of the shared .pph-dropdown-panel skin: the two header
   hover panels (cart + account) use the owner's preferred flat beige square
   instead of the rounded white floating card that the sort dropdown uses.
   Kept visually identical to .pph-cart-panel — change both together. */
.pph-account-panel {
	right: 0;
	left: auto;
	width: min(252px, 90vw);
	background: var(--wp--preset--color--pph-beige);
	border-radius: 0;
	box-shadow: none;
	/* No scale-in — matches the cart panel's plain fade. */
	transform: none;
	transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), visibility var(--wp--custom--motion--duration);
}

/* Hover bridge — .pph-dropdown-panel sits 8px below the trigger, and crossing
   that gap with the pointer dropped :hover and snapped the menu shut. This
   invisible strip keeps the hover intact between button and panel. */
.pph-account-panel::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

/* :has(:focus-visible) rather than :focus-within — closeModal() in
   account-modal.js returns focus to the trigger that opened the modal, and
   that trigger sits inside this wrap. :focus-within matched that restored
   focus and left the panel stuck open, looking like a permanent hover.
   :focus-visible only matches keyboard focus, so tabbing still opens the
   panel while closing the modal with the mouse does not. */
.pph-account-wrap:hover .pph-account-panel {
	opacity: 1;
	visibility: visible;
}

/* Kept as its own rule rather than a second selector above: a browser without
   :has() support discards the entire rule it appears in, which would take the
   :hover behaviour down with it. */
.pph-account-wrap:has(:focus-visible) .pph-account-panel {
	opacity: 1;
	visibility: visible;
}

/* Compact, left-aligned rows. The shared .pph-dropdown-item is built for the
   sort listbox (space-between, to park a ✓ on the right) — plain account links
   just need text, tighter height and slightly smaller type. The panel is
   hidden below 767px, so these are mouse/keyboard targets only. */
.pph-account-panel .pph-dropdown-item {
	min-height: 0;
	justify-content: flex-start;
	padding: 9px 12px;
	font-size: var(--wp--preset--font-size--nav);
	border-radius: 0; /* square items inside the square panel */
}

/* The shared item hover is --pph-beige, which is exactly this panel's own
   background — it would read as no feedback at all. One step darker instead. */
.pph-account-panel .pph-dropdown-item:hover,
.pph-account-panel .pph-dropdown-item:focus-visible {
	background: var(--wp--preset--color--pph-sand);
}

/* Set the sign-out apart from the navigation items above it. */
.pph-account-panel .pph-dropdown-list li:last-child .pph-dropdown-item {
	margin-top: var(--wp--preset--spacing--10);
	padding-top: calc(9px + var(--wp--preset--spacing--10));
	border-top: 1px solid var(--wp--preset--color--pph-border);
	border-radius: 0;
}

@media (max-width: 767px) {
	.pph-account-panel {
		display: none; /* mobile: the icon/link works directly, no hover on touch */
	}
}

/* ---------- Wishlist header icon (hover panel removed) ----------
   The hover-panel preview was removed entirely — the icon is now just a
   plain link to /wishlist, click only, no hover/focus reveal. .pph-wishlist-panel
   is unconditionally display:none regardless of hover/focus state; the
   markup itself still exists in inc/header.php (not a CSS-only file), so
   this is the deliberate off-switch rather than an oversight. The child
   rules below (h3/list/item styles) are now unreachable dead weight kept
   only so a future re-enable doesn't need to be rebuilt from scratch. */

.pph-wishlist-wrap {
	position: relative;
}

.pph-wishlist-panel {
	display: none;
}

.pph-wishlist-panel h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--pph-brown);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pph-wishlist-panel__list {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.pph-wishlist-panel__list[hidden] {
	display: none;
}

.pph-wishlist-panel__item a {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--pph-text);
}

.pph-wishlist-panel__item img {
	width: 56px;
	height: 70px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--pph-sand);
	flex-shrink: 0;
}

.pph-wishlist-panel__item-title {
	display: block;
	font-size: var(--wp--preset--font-size--body);
}

.pph-wishlist-panel__item-price {
	display: block;
	font-size: var(--wp--preset--font-size--price);
	font-weight: 600;
	color: var(--wp--preset--color--pph-brown);
}

.pph-wishlist-panel__empty {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text-muted);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pph-wishlist-panel__empty[hidden] {
	display: none;
}

.pph-wishlist-panel__viewall {
	display: inline-block;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
}

/* ---------- Account modal (Κεφ. 7.6 — login/register, click to open) ---------- */

.pph-account-modal {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(23, 48, 46, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

.pph-account-modal[hidden] {
	display: none;
}

.pph-account-modal__panel {
	position: relative;
	background: var(--wp--preset--color--pph-white);
	border-radius: var(--wp--custom--radius--md);
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
}

.pph-account-modal__close {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	z-index: 1;
}

.pph-account-modal__promo {
	background: var(--wp--preset--color--pph-sand);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.pph-account-modal__promo h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-2);
	color: var(--wp--preset--color--pph-brown);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pph-account-modal__promo p {
	color: var(--wp--preset--color--pph-text-muted);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.pph-account-modal__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text);
}

.pph-account-modal__benefits li {
	padding-left: var(--wp--preset--spacing--40);
	position: relative;
}

.pph-account-modal__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--pph-brown);
}

/* Κουμπί εναλλαγής στην αριστερή στήλη — αντικατέστησε τις καρτέλες που
   ήταν πάνω από τη φόρμα. Δείχνει πάντα την ΑΛΛΗ όψη, όπως στο Papier, ώστε
   η δεξιά στήλη να παρουσιάζει μία μόνο ενέργεια κάθε φορά.

   Outline και όχι γεμάτο: το γεμάτο ανήκει στο κουμπί υποβολής της φόρμας,
   που είναι η κύρια ενέργεια. Αν γίνονταν και τα δύο γεμάτα, θα ανταγωνίζονταν
   μεταξύ τους. */
.pph-account-modal__switch-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--pph-brown-dark);
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent;
	color: var(--wp--preset--color--pph-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-account-modal__switch-btn:hover,
.pph-account-modal__switch-btn:focus-visible {
	background-color: var(--wp--preset--color--pph-white);
}

/* Φαίνεται μόνο το κουμπί που ταιριάζει στην τρέχουσα όψη: το
   data-pph-switch-for δηλώνει σε ποια όψη ανήκει το καθένα, και το :has()
   διαβάζει την όψη από το data-view της δεξιάς στήλης — αυτό που ενημερώνει
   ήδη το assets/js/account-modal.js. Έτσι δεν αλλάζει κείμενο με JavaScript.

   Αν ένας browser δεν υποστηρίζει :has(), φαίνονται και τα δύο κουμπιά: και
   τα δύο λειτουργούν, απλώς η στήλη δείχνει μία επιλογή παραπάνω. */
.pph-account-modal__panel:has([data-view="login"]) [data-pph-switch-for="register"],
.pph-account-modal__panel:has([data-view="register"]) [data-pph-switch-for="login"] {
	display: none;
}

.pph-account-modal__forms {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}

.pph-account-modal__forms > h2,
.pph-account-modal__forms-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--pph-brown);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.pph-account-modal__divider {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--pph-text-muted);
	font-size: var(--wp--preset--font-size--caption);
}

.pph-account-modal__divider::before,
.pph-account-modal__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--pph-border);
}

.pph-account-modal__social {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Κουμπί «Google» — στυλ outline όπως στο πρότυπο: διάφανο φόντο, λεπτό
   περίγραμμα, χρωματιστό λογότυπο Google και σκούρο κείμενο. Είναι <a> (όχι
   button) γιατί οδηγεί στο Nextend Social Login. Στο hover παίρνει απαλό
   φόντο --pph-beige. */
.pph-account-modal__social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	width: calc(50% - var(--wp--preset--spacing--20));
	min-width: 150px;
	box-sizing: border-box;
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--pph-brown-dark);
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent;
	color: var(--wp--preset--color--pph-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-account-modal .pph-account-modal__social .pph-account-modal__social-btn,
.pph-account-modal .pph-account-modal__social .pph-account-modal__social-btn:hover,
.pph-account-modal .pph-account-modal__social .pph-account-modal__social-btn:focus,
.pph-account-modal .pph-account-modal__social .pph-account-modal__social-btn:focus-visible,
.pph-account-modal .pph-account-modal__social .pph-account-modal__social-btn span {
	text-decoration: none;
	text-align: center;
}

.pph-account-modal__social-btn:hover,
.pph-account-modal__social-btn:focus-visible {
	background-color: var(--wp--preset--color--pph-beige);
	color: var(--wp--preset--color--pph-text);
}

.pph-account-modal__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
}

.pph-account-modal__social-icon svg {
	width: 20px;
	height: 20px;
}

/* Γραμμές «ΣΥΝΕΧΕΙΑ ΜΕ» / «Ή ΜΕ EMAIL» — κεφαλαία με απαλό γράμμα-διάστιχο. */
.pph-account-modal__divider span {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--micro);
}

/* WooCommerce login/register template (myaccount/form-login.php), reskinned
   as a single-form view toggled by our own tabs (data-view), instead of the
   two-column layout WooCommerce renders by default. */

/* ΠΡΟΣΟΧΗ — αυτοί οι κανόνες ΔΕΝ είναι διακοσμητικοί, διορθώνουν πραγματικό
   σφάλμα. Το WordPress βάζει τις κλάσεις `woocommerce woocommerce-page` στο
   <body> ΜΟΝΟ στις σελίδες καταστήματος (κατηγορίες, προϊόντα, καλάθι,
   ταμείο, λογαριασμός) — όχι στην αρχική. Μόλις υπάρχουν, δύο προεπιλεγμένοι
   κανόνες του WooCommerce «ξυπνάνε» και χτυπάνε τη φόρμα μέσα στο modal:

     .woocommerce form.login { border: 1px solid; padding: 20px; margin: 2em 0 }
     .woocommerce .col2-set .col-1 { float: left; width: 48% }

   Αποτέλεσμα: στην αρχική το modal ήταν σωστό, ενώ στα Δώρα (και σε κάθε
   άλλη σελίδα καταστήματος) η φόρμα μάζευε περίγραμμα και συρρικνωνόταν στο
   48% του πλάτους της, με τις ετικέτες να σπάνε σε δύο γραμμές.

   Η ειδικότητα είναι σκόπιμα υψηλότερη από των κανόνων του WooCommerce, ώστε
   να μην εξαρτάται η νίκη από τη σειρά φόρτωσης των αρχείων CSS. */
.pph-account-modal .pph-account-modal__forms .col2-set,
.pph-account-modal .pph-account-modal__forms .u-columns,
.pph-account-modal .pph-account-modal__forms .col-1,
.pph-account-modal .pph-account-modal__forms .col-2,
.pph-account-modal .pph-account-modal__forms .u-column1,
.pph-account-modal .pph-account-modal__forms .u-column2 {
	float: none;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

.pph-account-modal .pph-account-modal__forms form.login,
.pph-account-modal .pph-account-modal__forms form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* Ίδια ιστορία: σε σελίδες καταστήματος το WooCommerce στοιχίζει αυτές τις
   σειρές δίπλα-δίπλα στο 47%. Μέσα στο στενό modal θέλουμε πάντα πλήρες
   πλάτος, τη μία κάτω από την άλλη. */
.pph-account-modal .pph-account-modal__forms .form-row-first,
.pph-account-modal .pph-account-modal__forms .form-row-last {
	float: none;
	width: 100%;
}

/* Δύο ακόμη κανόνες του WooCommerce που περνούσαν μόνο στις σελίδες
   καταστήματος και νικούσαν τους δικούς μας σε ειδικότητα:

     .woocommerce form .form-row       { padding: 3px; margin: 0 0 6px }
     .woocommerce form .form-row label { line-height: 2 }

   Γι' αυτό τα πεδία εμφανίζονταν πιο στριμωγμένα εκεί: η απόσταση έπεφτε από
   16px σε 6px. Οι δικοί μας κανόνες πιο κάτω χρησιμοποιούν την κλάση
   .woocommerce-form-row, που έχει χαμηλότερη ειδικότητα — εδώ η απόσταση
   δηλώνεται ξανά, αρκετά «δυνατά» ώστε να ισχύει παντού. */
.pph-account-modal .pph-account-modal__forms form .form-row {
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.pph-account-modal .pph-account-modal__forms form .form-row label {
	line-height: 1.5;
}

.pph-account-modal__forms .u-columns {
	display: block;
}

.pph-account-modal__forms[data-view="login"] .u-column2,
.pph-account-modal__forms[data-view="register"] .u-column1 {
	display: none;
}

/* WooCommerce's own "Login"/"Register" headings are redundant once our tabs
   (or the single fallback title) already say which form this is. */
.pph-account-modal__forms .u-column1 > h2,
.pph-account-modal__forms .u-column2 > h2,
.pph-account-modal__forms > h2:not(.pph-account-modal__forms-title) {
	display: none;
}

.pph-account-modal__forms .woocommerce-form-row label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-account-modal__forms .woocommerce-form-row {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Border/radius/focus come from the global "Form controls" text-input rule
   above — just this modal's own size/padding here. */
.pph-account-modal__forms input.input-text {
	width: 100%;
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--30);
	box-sizing: border-box;
}

/* The row that bundles "Remember me" + the submit button (form-login.php's
   own markup puts them side by side) — stacked instead: checkbox on its own
   line, then a full-width button below, for a calmer, premium feel. */
.pph-account-modal__forms .woocommerce-form-login > .form-row:not(.form-row-wide),
.pph-account-modal__forms .woocommerce-form-register > .form-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--10);
}

/* Φόρμα εγγραφής: χωράει ολόκληρη σε μία οθόνη, χωρίς κύλιση μέσα στο modal.
   Η σειρά που βλέπει ο επισκέπτης:

       Όνομα | Επώνυμο
       Ημερομηνία γέννησης (ΗΗ/ΜΜ/ΕΕΕΕ)
       Email
       [Εγγραφή]

   Το WooCommerce τυπώνει το email ΠΡΩΤΟ, μέσα στο myaccount/form-login.php,
   πριν καν τρέξει το woocommerce_register_form όπου μπαίνουν τα δικά μας
   πεδία. Δεν αντιγράφουμε το template για να το μετακινήσουμε: η φόρμα
   γίνεται grid και η σειρά ορίζεται με `order`, οπότε το template μένει αυτό
   που στέλνει το WooCommerce και δεν χρειάζεται ξανακοίταγμα σε κάθε
   αναβάθμιση του plugin. */
.pph-account-modal__forms .woocommerce-form-register {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--30);
	align-items: start;
}

/* Προεπιλογή: πλήρες πλάτος και τελευταίο στη σειρά. Έτσι η γραμμή που
   περιέχει το κουμπί υποβολής — που δεν έχει δική της κλάση από το
   WooCommerce για να την πιάσουμε — πέφτει από μόνη της στο τέλος, χωρίς
   εύθραυστο selector. Το margin μηδενίζεται γιατί τις αποστάσεις τις
   αναλαμβάνει πλέον το row-gap. */
.pph-account-modal .pph-account-modal__forms .woocommerce-form-register > * {
	grid-column: 1 / -1;
	order: 9;
	margin-bottom: 0;
}

.pph-account-modal .pph-account-modal__forms .woocommerce-form-register .form-row-first {
	grid-column: 1;
	order: 1;
}

.pph-account-modal .pph-account-modal__forms .woocommerce-form-register .form-row-last {
	grid-column: 2;
	order: 2;
}

.pph-account-modal__forms .woocommerce-form-register .pph-register-dob {
	order: 3;
	margin-bottom: 0;
}

.pph-account-modal__forms .woocommerce-form-register .form-row-wide {
	order: 4;
}

/* Κενό <div class="clear"> του WooCommerce: υπήρχε για να κλείνει floats.
   Μέσα σε grid γίνεται κανονικό κελί και ανοίγει μια άδεια σειρά. */
.pph-account-modal__forms .woocommerce-form-register .clear {
	display: none;
}

/* Σφιχτότερη απόσταση ετικέτας–πεδίου από την προεπιλογή των 16px: σε έξι
   σειρές πεδίων τα 8px γλιτώνουν ~48px ύψος, που είναι η διαφορά ανάμεσα
   στο να χωράει και να μη χωράει η φόρμα. */
.pph-account-modal__forms .woocommerce-form-register > .form-row {
	gap: var(--wp--preset--spacing--20);
	margin-top: 0;
}

/* Χαμηλότερα πεδία, αλλά ποτέ κάτω από 44px: είναι το ελάχιστο μέγεθος
   στόχου για δάχτυλο (WCAG 2.5.8), και η φόρμα συμπληρώνεται κυρίως σε
   κινητό. */
.pph-account-modal__forms .woocommerce-form-register input.input-text {
	min-height: 44px;
	padding-block: var(--wp--preset--spacing--20);
}

.pph-account-modal__forms .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--pph-text);
}

/* Primary tokens (see "Buttons — unified system" near the top of this file).
   ΔΙΟΡΘΩΣΗ ΣΧΟΛΙΟΥ: εδώ έγραφε ότι «δεν υπάρχει πρόγονος .woocommerce γύρω
   από αυτή τη φόρμα». Αυτό ισχύει μόνο στην αρχική — σε κάθε σελίδα
   καταστήματος το <body> παίρνει την κλάση `woocommerce` και οι γενικοί
   κανόνες του WooCommerce ΦΤΑΝΟΥΝ κανονικά εδώ. Αυτή ακριβώς η λανθασμένη
   υπόθεση είναι που άφησε το modal να εμφανίζεται διαφορετικά εκτός αρχικής
   (δες το μπλοκ «ΠΡΟΣΟΧΗ» παραπάνω). Οι παρακάτω δηλώσεις κρατούν το κουμπί
   σταθερό και στις δύο περιπτώσεις. */
.pph-account-modal__forms .woocommerce-form-login__submit,
.pph-account-modal__forms .woocommerce-form-register__submit {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--pph-brown-dark);
	color: var(--wp--preset--color--pph-white);
	border: none;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	text-transform: none;
	padding-inline: var(--wp--preset--spacing--40);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-account-modal__forms .woocommerce-form-login__submit:hover,
.pph-account-modal__forms .woocommerce-form-register__submit:hover {
	background-color: var(--wp--preset--color--pph-brown);
}

.pph-account-modal__forms .woocommerce-LostPassword {
	margin-top: var(--wp--preset--spacing--40);
	text-align: center;
}

.pph-account-modal__forms .woocommerce-LostPassword a {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-brown);
}

/* Ημερομηνία γέννησης — τρία πεδία ΗΗ/ΜΜ/ΕΕΕΕ σε μία σειρά, όπως στο Papier.
   Δεν μπαίνει μέσα στο .pph-account-modal: τα ίδια πεδία εμφανίζονται και
   στη σελίδα «Ο λογαριασμός μου», αφού και τα δύο περνούν από το
   myaccount/form-login.php — ένας κανόνας για τα δύο σημεία.

   Το fieldset θέλει ρητό μηδενισμό: ο browser του δίνει δικό του border και
   padding, και min-width:0 γιατί τα fieldset έχουν εξ ορισμού min-content
   πλάτος που εμποδίζει το grid να συρρικνωθεί σε στενή οθόνη. */
.pph-register-dob {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	border: 0;
	min-width: 0;
}

.pph-register-dob__legend {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
	line-height: 1.5;
}

.pph-register-dob__optional {
	margin-inline-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--pph-text-muted);
	font-size: var(--wp--preset--font-size--caption);
}

/* Το έτος παίρνει περισσότερο πλάτος: τέσσερα ψηφία έναντι δύο. */
.pph-register-dob__fields {
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr;
	gap: var(--wp--preset--spacing--20);
}

.pph-register-dob__fields input {
	width: 100%;
	min-width: 0;
	text-align: center;
}

@media (max-width: 767px) {
	.pph-account-modal__panel {
		grid-template-columns: 1fr;
		max-height: 95vh;
	}

	.pph-account-modal__promo {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}

	.pph-account-modal__forms {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}

	.pph-account-modal__forms .u-columns {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

/* ---------- Compact cart hover panel (read-only preview, click = full drawer) ---------- */

.pph-cart-panel {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: var(--wp--preset--spacing--20);
	/* Narrower than before (was 320px) — this is now just two label/value
	   rows and a note, not an items list, so it doesn't need to be as wide. */
	width: min(260px, 90vw);
	/* Flat beige square, no shadow, no scale-in — the owner's preferred look
	   for the header hover panels (chosen over the rounded white "floating
	   card" alternative). .pph-account-panel is matched to this below; keep
	   the two in sync if either changes. */
	background: var(--wp--preset--color--pph-beige);
	border: 1px solid var(--wp--preset--color--pph-border);
	border-radius: 0;
	padding: var(--wp--preset--spacing--40);
	z-index: 50;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), visibility var(--wp--custom--motion--duration);
}

/* Hover bridge — same 8px gap problem the account panel had: crossing it with
   the pointer dropped :hover and snapped the preview shut. */
.pph-cart-panel::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

/* :has(:focus-visible) rather than :focus-within — clicking the cart opens
   WooCommerce's Mini-Cart drawer, and closing it restores focus to the cart
   button, which lives inside this wrap. :focus-within matched that restored
   focus and left the preview stuck open, looking like a permanent hover.
   :focus-visible only matches keyboard focus, so tabbing to the cart still
   opens the preview while a mouse-driven close does not. */
.pph-mini-cart-wrap:hover .pph-cart-panel {
	opacity: 1;
	visibility: visible;
}

/* Kept as its own rule rather than a second selector above: a browser without
   :has() support discards the entire rule it appears in, which would take the
   :hover behaviour down with it. */
.pph-mini-cart-wrap:has(:focus-visible) .pph-cart-panel {
	opacity: 1;
	visibility: visible;
}

/* Checkout header: suppress the cart hover box — the cart button there is
   just a link back to the basket, no preview panel. */
.pph-site-header--checkout .pph-cart-panel {
	display: none;
}

/* Checkout header cart link — item-count badge next to the label. */
.pph-checkout-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--pph-brown);
	color: var(--wp--preset--color--pph-white);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1;
}

.pph-checkout-cart__count--hidden {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pph-cart-panel {
		transform: none;
	}
}

.pph-cart-panel h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--pph-brown);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Minimal Papier layout, structure matched 1:1: two label/value rows (the
   first row's own border-bottom is the divider between them, not a
   separate element), a muted note, then the mobile-only "Μετάβαση στο
   καλάθι" button. No items list, no checkout button here — the WooCommerce
   Mini-Cart drawer still opens in full on click for that. */

.pph-cart-panel__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--20);
}

.pph-cart-panel__row:first-child {
	border-bottom: 1px solid var(--wp--preset--color--pph-border);
	padding-top: 0;
}

.pph-cart-panel__row-label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-cart-panel__row-value {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--pph-text);
}

.pph-cart-panel__note {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
	margin: var(--wp--preset--spacing--30) 0 0;
}

/* "Μετάβαση στο καλάθι" — Papier shows this only below their own "md"
   breakpoint. NOTE: .pph-cart-panel itself is already display:none below
   767px (mobile skips the hover panel entirely and uses the WooCommerce
   drawer directly), so this rule currently has no visible effect on our
   site — kept for structural fidelity to the requested markup, not a
   functional mobile affordance right now. */
.pph-cart-panel__go-to-cart {
	display: none;
}

@media (max-width: 767px) {
	.pph-cart-panel {
		display: none; /* mobile: the icon opens the full drawer directly, no hover on touch */
	}

	.pph-cart-panel__go-to-cart {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
		margin-top: var(--wp--preset--spacing--30);
		border-radius: var(--wp--custom--radius--sm); /* follows the button system, not the old square pass */
	}
}

/* ---------- Footer shell ---------- */

.pph-footer {
	background: var(--wp--preset--color--pph-brown-dark);
	color: var(--wp--preset--color--pph-white);
	padding-top: var(--wp--preset--spacing--90);
	padding-bottom: var(--wp--preset--spacing--60);
}

.pph-footer a {
	color: var(--wp--preset--color--pph-white);
}

.pph-footer__divider {
	color: var(--wp--preset--color--pph-white);
	opacity: 0.5;
	max-width: var(--wp--custom--container--content);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.pph-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--60);
	max-width: var(--wp--custom--container--content);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.pph-footer__columns h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 600;
	color: var(--wp--preset--color--pph-white);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.pph-footer__columns ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.pph-footer__columns a {
	font-size: var(--wp--preset--font-size--body);
	text-decoration: none;
	opacity: 0.85;
}

.pph-footer__columns a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Στοιχεία επιχείρησης στο footer (block petra-psalidi-harti/business-info,
   inc/business-info.php). Σκόπιμα ΕΞΩ από το .pph-footer__columns grid: η
   διεύθυνση/τηλέφωνο/email είναι ξεχωριστή ενότητα εμπιστοσύνης, όχι πέμπτη
   στήλη συνδέσμων — και έτσι το grid μένει στις 4 στήλες του. */
.pph-footer__contact {
	max-width: var(--wp--custom--container--content);
	margin: var(--wp--preset--spacing--60) auto 0;
	padding-inline: var(--wp--preset--spacing--40);
}

.pph-footer__contact h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 600;
	color: var(--wp--preset--color--pph-white);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.pph-footer__address {
	font-style: normal; /* <address> πλαγιάζει από προεπιλογή στους browsers */
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	opacity: 0.85;
}

.pph-footer__address a {
	color: inherit;
	text-decoration: none;
}

.pph-footer__address a:hover {
	text-decoration: underline;
}

.pph-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--container--content);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--90);
}

.pph-footer__logo {
	width: 160px;
}

.pph-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.pph-footer__copyright {
	font-size: var(--wp--preset--font-size--caption);
	opacity: 0.7;
}

@media (max-width: 767px) {
	.pph-site-header__row--nav {
		display: none; /* Phase 2: replaced by hamburger + off-canvas menu */
	}

/* Row 2 on mobile follows the same storefront pattern Papier uses: menu and
   search together on the left, logo dead-centre, shop actions on the right
   (SPEC.md §4 "Mobile: hamburger + κεντραρισμένο λογότυπο + καλάθι, με το
   search εύκολα προσβάσιμο").

   Note what is NOT redeclared here: the columns and areas are inherited
   straight from the desktop rule — minmax(0, 1fr) on both flanks with the
   logo's auto column between them. Those equal flanking columns are the
   whole centring mechanism: the logo sits at the exact middle of the row
   however wide either group grows, because neither side can claim more
   track than the other. The previous mobile layout overrode them with
   "hamburger logo search actions" across four unequal columns, which is why
   the logo never quite landed in the centre. Moving the hamburger inside
   .pph-site-header__lead left one grid child per side and made the desktop
   definition correct here too; only the gap still needs tightening. */
.pph-site-header__row--main {
	column-gap: var(--wp--preset--spacing--20);
}

.pph-site-header__hamburger {
	display: inline-flex;
}

/* Tighter than the desktop gap so the two icons read as one group rather
   than two unrelated controls. justify-self: start carries over from the
   base rule, which is already what this side wants. */
.pph-site-header__lead {
	gap: var(--wp--preset--spacing--10);
}

	.pph-search-trigger {
		/* Collapses to an icon-only button here — match the plain (unfilled
		   at rest) look of the other mobile icon buttons, not the desktop
		   filled pill. min-width/min-height must be reset too: CSS clamps a
		   smaller `width`/`height` up to any still-active `min-width`/
		   `min-height` from the base (desktop) rule, so without this the
		   button was actually rendering at the desktop pill's full width on
		   mobile, not 48×48 as intended. */
		background: none;
		padding: 0;
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
		justify-content: center;
		border-radius: var(--wp--custom--radius--sm);
	}

	.pph-search-trigger__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.pph-site-header__logo {
		width: 112px; /* compact on mobile — leaves more room for the actions row */
		height: 46px; /* 112px × the full logo's own aspect ratio (679/1648) */
	}

	.pph-site-header.is-scrolled .pph-site-header__logo {
		width: 84px;
		height: 35px;
	}

	/* Account stays out of the mobile header (Κεφ. 9.9): it is one tap away in
	   the off-canvas panel (.pph-mobile-panel__actions), and signing in is not
	   something a shopper does mid-scroll. Wishlist and Cart both stay here —
	   two icons on the right balance the menu + search pair on the left, which
	   is how the Papier header this follows is arranged, and both are used
	   without needing the full menu. It remains in the panel as well, so the
	   off-canvas list is still complete. */
	.pph-account-wrap {
		display: none;
	}

	.pph-mini-cart-wrap--labeled .wc-block-mini-cart__button {
		width: 48px;
		height: 48px;
		padding: 0;
	}

	.pph-mini-cart-wrap--labeled .wc-block-mini-cart__button::after {
		content: none;
	}

	.pph-footer__columns {
		grid-template-columns: 1fr;
	}

	.pph-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Shared layout utilities ----------
   Used by the homepage AND collection/product/wishlist pages — kept here
   (not homepage.css) so every page that needs them gets them. */

.pph-container {
	max-width: var(--wp--custom--container--content);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.pph-section {
	padding-block: var(--wp--preset--spacing--90); /* 96px — within Κεφ. 8.6 desktop range 96–120 */
}

@media (max-width: 767px) {
	.pph-section {
		padding-block: var(--wp--preset--spacing--80); /* 64px — within Κεφ. 8.6 mobile range 56–72 */
	}
}

.pph-section__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-2);
	color: var(--wp--preset--color--pph-brown);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.pph-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.pph-section__header .pph-section__title {
	margin-bottom: 0;
}

/* Box model/colors come from "Buttons — unified system" (Secondary) near
   the top of this file — this just adds the one thing specific to this
   spot: don't wrap "Δείτε όλα →" onto two lines next to the section title. */
.pph-section__viewall {
	white-space: nowrap;
}

.pph-section__intro {
	color: var(--wp--preset--color--pph-text-muted);
	max-width: var(--wp--custom--container--reading);
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* Flat-color placeholder for missing photography (Κεφ. 5) — clearly not a
   real photo: soft sand fill only, small "[PLACEHOLDER]" tag where noted. */
.pph-placeholder-media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--pph-sand);
	border-radius: var(--wp--custom--radius--md);
	position: relative;
}

.pph-placeholder-media__tag {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
	background: var(--wp--preset--color--pph-white);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--sm);
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
}

/* ---------- Product grid + Product card (Κεφ. 7.5, 8.8, 11.6, 11.7) ----------
   Papier-style, our palette — ONE shared card (pph_render_product_card() in
   inc/product-grid.php) reused by every grid: homepage sections, collection
   archives, related products. Square image, hover-swap second image, "Νέο"
   badge, wishlist heart, name/subtitle/price info, sale badge, color
   swatches (all badge/subtitle/swatch elements are conditional — most SKAG
   products have none of them, so nothing renders empty). No shadows,
   square corners throughout — flat/editorial, matching the rest of the
   site's recent square/flat direction (header panels etc.). */

.pph-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1023px) {
	.pph-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.pph-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--30);
	}
}

.pph-product-card {
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow the grid track to shrink so nowrap names ellipsize instead of forcing horizontal overflow */
}

/* ---- Media: square image, hover-swap, badge, wishlist heart ---- */

.pph-product-card__media {
	position: relative;
}

.pph-product-card__image-link {
	display: block;
}

.pph-product-card__image-wrap {
	display: block; /* the wrap is a <span>; aspect-ratio is ignored on inline boxes, collapsing the image to 0 height */
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--preset--color--pph-sand);
	margin-bottom: var(--wp--preset--spacing--30);
}

.pph-product-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

/* Only present in the DOM when a 2nd gallery image exists (inc/product-grid.php)
   — a single-image product's .pph-product-card__image simply has no sibling
   to fade in, so it stays put, per spec. */
.pph-product-card__image--hover {
	opacity: 0;
}

.pph-product-card:hover .pph-product-card__image {
	transform: scale(1.03); /* Κεφ. 15.6 — 2–3% zoom */
}

.pph-product-card:hover .pph-product-card__image--hover {
	opacity: 1;
}

.pph-product-card__badge {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	z-index: 1;
}

.pph-product-card__badge--new {
	background: var(--wp--preset--color--pph-beige);
	color: var(--wp--preset--color--pph-text);
}

.pph-product-card__wishlist {
	position: absolute;
	bottom: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	padding: 0;
	color: var(--wp--preset--color--pph-text-muted);
	cursor: pointer;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-product-card__wishlist svg {
	width: 20px;
	height: 20px;
}

.pph-product-card__wishlist:hover {
	color: var(--wp--preset--color--pph-brown);
}

/* Filled heart once saved — the icon is stroke-only (fill:none) by design,
   so "filled" just means switching the fill to the same currentColor. */
.pph-product-card__wishlist.is-active {
	color: var(--wp--preset--color--pph-brown);
}

.pph-product-card__wishlist.is-active svg path {
	fill: currentColor;
}

/* ---- Info: name, optional subtitle, price ---- */

.pph-product-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--wp--preset--color--pph-text);
}

.pph-product-card__name {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption); /* smaller, Papier-style compact card text */
	color: var(--wp--preset--color--pph-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pph-product-card__subtitle {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
	margin-top: var(--wp--preset--spacing--10);
}

.pph-product-card__price-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

.pph-product-card__price {
	font-size: var(--wp--preset--font-size--caption); /* smaller price to match the compact name */
	font-weight: 600;
	color: var(--wp--preset--color--pph-text);
}

/* get_price_html() wraps sale prices as <del>regular</del> <ins>sale</ins>
   (WooCommerce core, includes/wc-formatting-functions.php) — styled here
   rather than reconstructed manually in PHP. */
.pph-product-card__price del {
	color: var(--wp--preset--color--pph-text-muted);
	font-weight: 400;
	text-decoration: line-through;
	margin-right: var(--wp--preset--spacing--10);
}

.pph-product-card__price ins {
	color: var(--wp--preset--color--pph-text);
	text-decoration: none;
}

.pph-product-card__sale-badge {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	background: var(--wp--preset--color--pph-sage);
	color: var(--wp--preset--color--pph-text);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}

/* ---- Color swatches (variable products only — see pph_get_color_swatches()) ---- */

.pph-product-card__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--20);
}

.pph-product-card__swatch {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--pph-border);
	background-color: var(--wp--preset--color--pph-sand);
	padding: 0;
	cursor: pointer;
}

.pph-product-card__swatch.is-active {
	outline: 1px solid var(--wp--preset--color--pph-text);
	outline-offset: 2px;
}

.pph-product-grid__empty {
	color: var(--wp--preset--color--pph-text-muted);
	background: var(--wp--preset--color--pph-sand);
	padding: var(--wp--preset--spacing--60);
	text-align: center;
}

/* ---------- Pagination ----------
   Shared by collection pages AND the Blog index (inc/blog-index.php),
   which loads content.css not collection.css. */

.pph-pagination {
	margin-top: var(--wp--preset--spacing--70);
	display: flex;
	justify-content: center;
}

.pph-pagination ul {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Secondary (page links) / Primary (current page) — same system as the rest
   of the site (see "Buttons — unified system" near the top of this file).
   The "…" dots span paginate_links() inserts between far-apart pages is
   plain text, not a link, so it's excluded from both and stays borderless. */
.pph-pagination a,
.pph-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body);
}

.pph-pagination a {
	background: transparent;
	color: var(--wp--preset--color--pph-brown);
	border: 1px solid var(--wp--preset--color--pph-brown);
}

.pph-pagination a:hover {
	background: var(--wp--preset--color--pph-beige);
}

.pph-pagination span.dots {
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-pagination .current {
	background: var(--wp--preset--color--pph-brown-dark);
	color: var(--wp--preset--color--pph-white);
}

/* ---------- Page intro / title / empty-state ----------
   Shared by collection pages (inc/collection.php), the Blog index
   (inc/blog-index.php), and the Contact/Wishlist pages — all of which load
   different conditional stylesheets, so this lives in global.css. */

/* The collection page wraps everything in .pph-section (96px block padding),
   which sat right under the breadcrumb and left a large gap above the title.
   Trim the top to a normal breadcrumb→title gap; the 96px bottom padding
   (space before the footer) is kept. */
.pph-section.pph-collection {
	padding-top: var(--wp--preset--spacing--20); /* 8px — very tight gap under breadcrumb */
}

.pph-collection__intro {
	padding-top: 0;
	max-width: var(--wp--custom--container--reading);
}

.pph-collection__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-1);
	color: var(--wp--preset--color--pph-brown);
	margin: 0 0 var(--wp--preset--spacing--20); /* 8px — tight gap below title */
}

/* GFS Didot display accent (Κεφ. 11) — ONLY the collection/category page's
   own title, not the other pages that reuse .pph-collection__title (Blog
   index, Contact, Wishlist — all keep the plain Alegreya heading above).
   Scoped via the .pph-collection wrapper (inc/collection.php) rather than a
   modifier class so no markup change was needed. GFS Didot has no italic
   face on Google Fonts (see assets/css/fonts.css) — the slight extra
   letter-spacing below is what carries the "calligraphic" feel instead of a
   faked oblique, and font-size is intentionally NOT bumped up, so it reads
   as elegant rather than decorative at a glance. */
.pph-collection .pph-collection__title {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.01em;
	line-height: 1.15;
}

.pph-collection__description {
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-collection__empty {
	text-align: center;
	background: var(--wp--preset--color--pph-sand);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50);
}

.pph-collection__empty-message {
	font-size: var(--wp--preset--font-size--body-large);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ==========================================================================
   Header εκδοχή «Κοσμήματα» — Souls Jewelry
   Ισχύει ΜΟΝΟ όταν η inc/header.php βάλει την class .pph-site-header--souls,
   δηλαδή στην κατηγορία Κοσμήματα, στις υποκατηγορίες της και στα προϊόντα
   τους. Καμία άλλη σελίδα δεν επηρεάζεται.

   Το λογότυπο Petra Psalidi Harti φεύγει από το κέντρο και πάει πάνω
   αριστερά, ακριβώς πάνω από την αναζήτηση· η κεντρική θέση περνά στο
   λογότυπο Souls. Όλη η μετακίνηση γίνεται με grid-template-areas, χωρίς
   δεύτερο markup — γι' αυτό και τα δύο λογότυπα είναι απευθείας παιδιά του
   grid στην PHP.

   Μπαίνει στο ΤΕΛΟΣ του αρχείου επίτηδες: οι κανόνες .is-scrolled και οι
   mobile κανόνες του βασικού header έχουν ίδια ή μεγαλύτερη ειδικότητα, και
   σε ισοπαλία κερδίζει ό,τι έρχεται τελευταίο στη σειρά.
   ========================================================================== */

.pph-site-header--souls .pph-site-header__row--main {
	grid-template-areas:
		"logo   souls actions"
		"lead   souls actions";
	row-gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--30);
}

/* Μικρότερο από το κεντρικό των 160px: εδώ είναι δευτερεύον σήμα, δεν πρέπει
   να ανταγωνίζεται το Souls. 49px = 120px × 679/1648, η πραγματική αναλογία
   του λογότυπου — καμία παραμόρφωση. */
.pph-site-header--souls .pph-site-header__logo--corner {
	grid-area: logo;
	justify-self: start;
	align-self: end;
	width: 120px;
	height: 49px;
}

.pph-site-header--souls.is-scrolled .pph-site-header__logo--corner {
	width: 92px;
	height: 38px;
}

.pph-site-header--souls .pph-site-header__lead {
	grid-area: lead;
	justify-self: start;
	align-self: start;
}

.pph-site-header__souls {
	grid-area: souls;
	justify-self: center;
	align-self: center;
	display: block;
	width: 200px;
	max-width: 100%;
}

/* Μόνο πλάτος ορίζεται· το ύψος προκύπτει από την αναλογία 1160×530 της ίδιας
   της εικόνας, οπότε δεν υπάρχει περίπτωση να τεντωθεί. */
.pph-site-header__souls img {
	display: block;
	width: 100%;
	height: auto;
}

.pph-site-header--souls.is-scrolled .pph-site-header__souls {
	width: 150px;
}

@media (max-width: 767px) {
	/* Στο κινητό η βασική σειρά είναι «hamburger · λογότυπο · αναζήτηση ·
	   ενέργειες» — η αναζήτηση είναι ΔΕΞΙΑ, όχι αριστερά, οπότε το «πάνω από
	   την αναζήτηση» της επιφάνειας εργασίας δεν μεταφέρεται αυτούσιο.
	   Το Souls παίρνει δική του γραμμή κάτω από όλα, σε πλήρες πλάτος: έτσι
	   δεν ακουμπά ούτε καλύπτει την αναζήτηση ή τα εικονίδια. */
	.pph-site-header--souls .pph-site-header__row--main {
		grid-template-areas:
			"lead  logo  actions"
			"souls souls souls";
		row-gap: var(--wp--preset--spacing--20);
	}

	.pph-site-header--souls .pph-site-header__logo--corner {
		align-self: center;
		width: 112px;
		height: 46px;
	}

	.pph-site-header--souls.is-scrolled .pph-site-header__logo--corner {
		width: 84px;
		height: 35px;
	}

	.pph-site-header--souls .pph-site-header__lead {
		justify-self: start;
		align-self: center;
	}

	.pph-site-header__souls {
		width: 160px;
		padding-bottom: var(--wp--preset--spacing--20);
	}

	.pph-site-header--souls.is-scrolled .pph-site-header__souls {
		width: 120px;
	}
}

/* ---------- Ματάκι εμφάνισης συνθηματικού στο modal λογαριασμού ----------
   Το κουμπί το φτιάχνει το assets/js/account-modal.js. Δες εκεί το σχόλιο
   για το γιατί δεν χρησιμοποιείται αυτό του WooCommerce: ο δικός του
   επιλογέας απαιτεί πρόγονο .woocommerce, που υπάρχει μόνο στις σελίδες
   καταστήματος — γι' αυτό το ματάκι έλειπε στην αρχική. */

/* Το κουμπί του WooCommerce κρύβεται ΜΟΝΟ μέσα στο modal, ώστε να μην
   εμφανίζονται δύο ματάκια στις σελίδες καταστήματος. Εκτός modal (π.χ. στη
   σελίδα λογαριασμού) το δικό του συνεχίζει κανονικά. */
.pph-account-modal .show-password-input {
	display: none;
}

.pph-account-modal .pph-password-field {
	position: relative;
	display: block;
}

.pph-account-modal .pph-password-field input {
	/* Χώρος ώστε το κείμενο να μην περνάει ποτέ κάτω από το εικονίδιο. */
	padding-right: 44px;
}

.pph-account-modal .pph-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: none;
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
	color: var(--wp--preset--color--pph-text-muted);
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.pph-account-modal .pph-password-toggle:hover {
	color: var(--wp--preset--color--pph-brown);
	background: var(--wp--preset--color--pph-beige);
}

/* Το εικονίδιο μπαίνει ως inline SVG από τη JS (δες account-modal.js) — η
   προηγούμενη εκδοχή το σχεδίαζε με ::before/::after και μέσα σε flex κουμπί
   συρρικνωνόταν σε μια λεπτή γραμμή. */
.pph-account-modal .pph-password-toggle svg {
	display: block;
	flex: none;
}

/* Η διαγώνιος δείχνει την ΤΡΕΧΟΥΣΑ κατάσταση, όχι την ενέργεια: όσο το
   συνθηματικό είναι κρυμμένο (η προεπιλογή) το μάτι είναι «σβηστό» με τη
   γραμμή πάνω του· μόλις γίνει ορατό, η γραμμή φεύγει και μένει το ανοιχτό
   μάτι. Ήταν αρχικά ανάποδα. */
.pph-account-modal .pph-password-toggle__slash {
	display: inline;
}

.pph-account-modal .pph-password-toggle.is-visible .pph-password-toggle__slash {
	display: none;
}

/* ---------- Modal λογαριασμού: ίδια εμφάνιση σε ΚΑΘΕ σελίδα ----------
   Συνέχεια του μπλοκ «ΠΡΟΣΟΧΗ» παραπάνω. Οι παρακάτω διαφορές μετρήθηκαν
   στον browser συγκρίνοντας αρχική και /gifts/ με το modal ανοιχτό, και
   οφείλονται όλες στην κλάση `woocommerce` που μπαίνει στο <body> μόνο στις
   σελίδες καταστήματος:

     ετικέτες:  display inline → block, με margin-bottom 0.7em
     κουμπί:    float none → left, margin-right 16px, padding 20px αντί 16px

   Μαζί πρόσθεταν 46px ύψος στη φόρμα. Δηλώνονται εδώ ρητά, ώστε η εμφάνιση
   να μην εξαρτάται από το αν η σελίδα «ανήκει» στο κατάστημα. */

.pph-account-modal .pph-account-modal__forms form .form-row label,
.pph-account-modal .pph-account-modal__forms form .woocommerce-form-row label {
	display: inline;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

/* Εξαίρεση: η ετικέτα του checkbox «Να με θυμάσαι» είναι δική μας σχεδίαση
   (flex, για να στοιχίζεται το κουτάκι με το κείμενο) και πρέπει να μείνει. */
.pph-account-modal .pph-account-modal__forms form .form-row label.woocommerce-form__label-for-checkbox,
.pph-account-modal .pph-account-modal__forms form label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 1.5;
}

.pph-account-modal .pph-account-modal__forms form button,
.pph-account-modal .pph-account-modal__forms form .button,
.pph-account-modal .pph-account-modal__forms form input[type="submit"] {
	float: none;
	margin: 0;
	padding: 10px 16px;
}

/* Η τελευταία — και πιο ύπουλη — διαφορά. Το WooCommerce βάζει clearfix στις
   σειρές της φόρμας:
 *
 *     .woocommerce form .form-row::before,
 *     .woocommerce form .form-row::after { content: " "; display: table }
 *
 * Παλιά τεχνική για να «κλείνουν» τα float. Οι σειρές μας όμως είναι flex
 * containers, και μέσα σε flex τα ψευδο-στοιχεία ΜΕΤΡΑΝΕ ως κανονικά
 * στοιχεία: από 2 ορατά στοιχεία με 1 κενό, η σειρά γινόταν 4 στοιχεία με 3
 * κενά — δηλαδή 32px παραπάνω ύψος, μόνο στις σελίδες καταστήματος.
 *
 * `content: none` τα καταργεί τελείως· δεν χρειάζονται, αφού εδώ δεν υπάρχει
 * κανένα float να καθαριστεί. */
.pph-account-modal .pph-account-modal__forms form .form-row::before,
.pph-account-modal .pph-account-modal__forms form .form-row::after,
.pph-account-modal .pph-account-modal__forms form .woocommerce-form-row::before,
.pph-account-modal .pph-account-modal__forms form .woocommerce-form-row::after {
	content: none;
}

/* ---------- Επιλογέας γλώσσας ΕΛ / EN (inc/language-switcher.php) ----------
   ΠΡΟΣΟΧΗ: το site ΔΕΝ είναι πολύγλωσσο ακόμα — δες το σχόλιο στην κορυφή του
   inc/language-switcher.php. Εδώ ορίζεται μόνο η εμφάνιση του επιλογέα. */

.pph-lang {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.pph-lang__option {
	padding: 4px 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--pph-text-muted);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--sm);
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

/* Διαχωριστικό ανάμεσα στις δύο γλώσσες, χωρίς επιπλέον στοιχείο στο markup. */
.pph-lang__option + .pph-lang__option {
	border-left: 1px solid var(--wp--preset--color--pph-border);
}

.pph-lang__option:hover {
	color: var(--wp--preset--color--pph-brown);
}

.pph-lang__option.is-current {
	color: var(--wp--preset--color--pph-brown-dark);
	font-weight: 700;
}

@media (max-width: 1023px) {
	/* Στις στενές οθόνες το header δεν χωράει άλλο στοιχείο — ο επιλογέας
	   ζει στο off-canvas μενού αντί να στριμώχνει τα εικονίδια. */
	.pph-site-header__lead .pph-lang {
		display: none;
	}
}

.pph-mobile-panel__lang {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
}

/* Στο off-canvas ο επιλογέας δεν ανταγωνίζεται τίποτα, οπότε παίρνει
   αναγνώσιμο μέγεθος αντί για το μικροσκοπικό του header. */
.pph-mobile-panel__lang .pph-lang__option {
	font-size: var(--wp--preset--font-size--nav);
	padding: 6px 10px;
}

/* ---------- Σταθερότητα κύλισης στο header ----------
   Η μπάρα ανακοίνωσης και το header αλλάζουν ύψος όταν μπαίνει η κλάση
   .is-scrolled. Επειδή βρίσκονται ΠΑΝΩ από το σημείο που κοιτάζει ο
   επισκέπτης, ο browser «αγκυρώνει» το περιεχόμενο και μετακινεί τη θέση
   κύλισης για να αντισταθμίσει. Αυτή η μετακίνηση μπορεί να ξαναπεράσει το
   όριο ενεργοποίησης και να προκαλέσει τρεμόπαιγμα.

   Το overflow-anchor: none λέει στον browser να μην αντισταθμίζει εδώ. Το
   περιεχόμενο απλώς ανεβοκατεβαίνει λίγο στην κορυφή της σελίδας — αδιάφορο
   οπτικά, αφού εκεί δεν υπάρχει κείμενο που να διαβάζει κανείς — και ο
   βρόχος σπάει στη ρίζα του, όχι μόνο με τα όρια στο JavaScript. */
.pph-announcement-bar,
.pph-site-header {
	overflow-anchor: none;
}

/* ---------- Άδειο συρτάρι καλαθιού (parts/mini-cart.html) ----------
   Το συρτάρι που ανοίγει από το εικονίδιο του καλαθιού είναι ΔΙΑΦΟΡΕΤΙΚΗ
   επιφάνεια από τη σελίδα /cart/: το αποδίδει το μπλοκ Mini-Cart του
   WooCommerce από το δικό του template part. Γι' αυτό το φίλτρο PHP που
   αλλάζει τη σελίδα καλαθιού (inc/empty-cart.php) ΔΕΝ το αγγίζει — εδώ η
   προσαρμογή γίνεται αντικαθιστώντας το template part μέσα στο theme. */

.pph-mini-cart-empty {
	text-align: center;
	padding-inline: var(--wp--preset--spacing--40);
}

.pph-mini-cart-empty__art {
	display: flex;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--pph-brown);
}

/* Μικρότερο από της σελίδας καλαθιού: το συρτάρι είναι στενό (~360px) και
   το σχέδιο δεν πρέπει να σπρώχνει το κουμπί εκτός οθόνης. */
.pph-mini-cart-empty__art svg {
	width: 160px;
	height: auto;
	stroke-width: 1.6;
}

.pph-mini-cart-empty__message {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--pph-text);
	font-size: var(--wp--preset--font-size--body);
}

/* Ο σύνδεσμος σύνδεσης στο άδειο συρτάρι (inc/empty-cart.php) — μπαίνει κάτω
   από το κουμπί «Ξεκινήστε τις αγορές», ως δεύτερη και πιο ήσυχη επιλογή:
   το κύριο ζητούμενο είναι να συνεχίσει τις αγορές, όχι να συνδεθεί. */
.pph-mini-cart-empty__login {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--pph-text-muted);
}

.pph-mini-cart-empty__login a {
	color: var(--wp--preset--color--pph-brown);
	text-decoration: underline;
}

.pph-mini-cart-empty__login a:hover {
	color: var(--wp--preset--color--pph-brown-dark);
}

/* ---------- Ενδιάμεσο πλάτος οθόνης: 768–1199px ----------
   Το πεδίο αναζήτησης έχει min-width: 360px. Μαζί με τον επιλογέα γλώσσας
   δίπλα του (59px + κενό), η αριστερή στήλη ζητάει ~431px — περισσότερα απ'
   όσα της δίνει το grid σε αυτά τα πλάτη, με αποτέλεσμα να ΕΠΙΚΑΛΥΠΤΕΙ το
   κεντρικό λογότυπο (μετρήθηκε: −20px στα 1030px).

   Υπήρχε ήδη σημείωση στον κανόνα .pph-search-trigger ότι το 360px στριμώχνει
   το λογότυπο σε αυτή τη ζώνη· η προσθήκη του επιλογέα το έκανε ορατό.

   Το εύρος κλείνει στα 767px επίτηδες: από εκεί και κάτω ισχύει ο κανόνας που
   συρρικνώνει την αναζήτηση σε εικονίδιο 48×48, και δεν πρέπει να τον
   ακυρώσουμε. */
@media (min-width: 768px) and (max-width: 1199px) {
	.pph-search-trigger {
		min-width: 240px;
	}
}

/* ---------- 768–1023px: τα κουμπιά ενεργειών γίνονται μόνο εικονίδια ----------
   Σε αυτή τη ζώνη η δεξιά ομάδα ζητούσε 367px (Σύνδεση/Εγγραφή 150 + Αγαπημένα
   104 + Καλάθι 90 + κενά) ενώ το πλέγμα της έδινε ~288px — αποτέλεσμα, ΕΠΙΚΑΛΥΨΗ
   του κεντρικού λογότυπου κατά 71px στα 800px (μετρημένο).

   Οι ετικέτες είναι το κόστος, όχι τα εικονίδια. Τις αποσύρουμε εδώ, όπως κάνει
   ήδη το κινητό — με τη διαφορά ότι εδώ ΜΕΝΟΥΝ και τα τρία κουμπιά ορατά, αφού
   κάτω από 768px ο λογαριασμός και τα αγαπημένα μετακομίζουν στο off-canvas
   μενού ενώ εδώ δεν υπάρχει τέτοιο μενού.

   Τα aria-label και το κείμενο για αναγνώστες οθόνης δεν θίγονται: κρύβεται
   μόνο η οπτική ετικέτα. */
@media (min-width: 768px) and (max-width: 1023px) {
	.pph-site-header__actions .pph-icon-btn__label {
		display: none;
	}

	.pph-site-header__actions .pph-icon-btn--labeled {
		width: 44px;
		height: 44px;
		min-width: 0;
		padding: 0;
		justify-content: center;
	}

	.pph-mini-cart-wrap--labeled .wc-block-mini-cart__button {
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.pph-mini-cart-wrap--labeled .wc-block-mini-cart__button::after {
		content: none;
	}

	.pph-mini-cart-wrap--labeled .wc-block-mini-cart__icon {
		width: 20px;
		height: 20px;
	}
}


/* ---------- Product card: heart top-right, quick add-to-cart bottom-right ---------- */
.pph-product-card__media .pph-product-card__wishlist {
	top: var(--wp--preset--spacing--20);
	bottom: auto;
	right: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: var(--wp--preset--color--pph-brown);
}
.pph-product-card__cart {
	position: absolute;
	right: var(--wp--preset--spacing--20);
	/* the media box also contains the image's bottom margin, so lift the button over the photo */
	bottom: calc(var(--wp--preset--spacing--30) + var(--wp--preset--spacing--20));
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: var(--wp--preset--color--pph-sand);
	color: var(--wp--preset--color--pph-brown);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing), opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}
.pph-product-card__cart svg { width: 22px; height: 22px; }
.pph-product-card__cart:hover,
.pph-product-card__cart:focus-visible,
.pph-product-card__cart.is-added {
	background: var(--wp--preset--color--pph-brown);
	color: var(--wp--preset--color--pph-white);
}
.pph-product-card__cart.is-loading { opacity: 0.55; pointer-events: none; }

.pph-product-card .added_to_cart { display: none; } /* WooCommerce injects a "View cart" link after quick-add; the header cart already shows it */

/* Quick-add stepper (− qty +), shown in place of the cart button once the product is in the cart. */
.pph-product-card__cart[hidden],
.pph-product-card__qty[hidden] { display: none; }
.pph-product-card__qty {
	position: absolute;
	right: var(--wp--preset--spacing--20);
	bottom: calc(var(--wp--preset--spacing--30) + var(--wp--preset--spacing--20));
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border-radius: 10px;
	background: var(--wp--preset--color--pph-sand);
	color: var(--wp--preset--color--pph-brown);
}
.pph-product-card__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--pph-brown);
	color: var(--wp--preset--color--pph-white);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}
.pph-product-card__qty-btn:hover,
.pph-product-card__qty-btn:focus-visible { background: var(--wp--preset--color--pph-brown-dark); }
.pph-product-card__qty-value {
	min-width: 24px;
	text-align: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pph-product-card__qty.is-loading { opacity: 0.6; pointer-events: none; }