/* Spitokeri αρχική — sections στο στυλ του mockup (Charroux flow) */

.sk-section { margin-block-start: 0 !important; }
.wp-site-blocks > main { margin-block-start: 0 !important; }
main > .entry-content { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.sk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sk-eyebrow {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: .72rem; font-weight: 700; letter-spacing: .18em;
	text-transform: uppercase; color: var(--wp--preset--color--accent-2);
}
.sk-btn {
	display: inline-block; font-family: var(--wp--preset--font-family--noto-sans);
	font-size: .85rem; font-weight: 600; letter-spacing: .06em;
	padding: 13px 30px; border-radius: 4px; text-decoration: none;
	transition: background .15s ease, transform .22s cubic-bezier(.34,1.4,.5,1), box-shadow .2s ease;
}
/* Σηκώνεται + γέρνει ελαφρά σκιά στο hover, σφίγγει στο πάτημα — ίδια γλώσσα
   κίνησης με το .btn του V12 (glyko.css). Πριν, μόνο το φόντο σκούραινε: το
   κουμπί έμοιαζε ζωγραφισμένο, όχι πατήσιμο. */
.sk-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 28px -16px rgba(56, 104, 88, .4); }
.sk-btn:active { transform: scale(.96); }
.sk-btn-coral { background: var(--wp--preset--color--accent-4); color: #fdf9f1 !important; }
.sk-btn-coral:hover { background: #9c2728; color: #fff !important; box-shadow: 0 16px 30px -12px rgba(180, 48, 49, .75); }
.sk-btn-light { background: #f7f2e6; color: #23282b !important; }
.sk-btn-light:hover { background: #ffffff; }
/* ⚠ Ίδια αντίθεση 3,07:1 με το `.sk-story .sk-eyebrow` παρακάτω, ίδια αιτία
   (amber σκέτο πάνω σε πετρόλ), ίδια λύση. Μοναδική χρήση σήμερα: το κουμπί
   «Πες μας ένα γεια» μέσα στο `.sk-story` (`arxiki.html`). Το `border:
   currentColor` ακολουθεί αυτόματα, δεν χρειάζεται ξεχωριστή γραμμή. */
.sk-btn-ghost { background: transparent; color: #f3d8bb !important; border: 1px solid currentColor; }
.sk-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
@media (prefers-reduced-motion: reduce) {
	.sk-btn:hover, .sk-btn:active { transform: none; }
}

.sk-block { padding: 72px 0; }
.sk-sec-head { text-align: center; max-width: 60ch; margin: 0 auto 42px; }
.sk-sec-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--wp--preset--color--accent-1); margin: 8px 0 10px; }
.sk-sec-head p { color: #5c5850; margin: 0; }

/* ---- header (Charroux-style: nav | wordmark | icons) ---- */
.sk-header-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.sk-header-nav { justify-self: start; }
.sk-header-icons { justify-self: end; }
.sk-header .wp-block-site-title {
	font-size: 1.6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.sk-header .wp-block-site-title a { color: inherit; text-decoration: none; }
.sk-header .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	padding-bottom: 3px; border-bottom: 1.5px solid transparent;
}
.sk-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-3) !important;
	border-bottom-color: var(--wp--preset--color--accent-3);
}
.sk-header .wp-block-navigation .wp-block-navigation__container { gap: 26px; }
.sk-account-link { margin: 0; }
.sk-account-link a {
	font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: inherit; text-decoration: none;
}
.sk-account-link a:hover { color: var(--wp--preset--color--accent-3); }
.sk-header .wc-block-mini-cart__button { color: inherit; }
.sk-header .wc-block-mini-cart__button:hover { color: var(--wp--preset--color--accent-3); }
@media (max-width: 700px) {
	.sk-account-link { display: none; }
	.sk-header .wp-block-site-title { font-size: 1.25rem; letter-spacing: .12em; }
}

/* ---- hero carousel ---- */
.sk-carousel { position: relative; overflow: hidden; height: min(78vh, 620px); min-height: 440px; background: var(--wp--preset--color--accent-6); }
.sk-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.sk-slide.on { opacity: 1; pointer-events: auto; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sk-slide { transition: none; } }
.sk-scene { position: absolute; inset: 0; }
.sk-scene-1 {
	background:
		radial-gradient(95% 55% at 88% -12%, #e4a867 0 44%, transparent 45%),
		radial-gradient(80% 62% at -8% 12%, #43705f 0 48%, transparent 49%),
		radial-gradient(130% 60% at 50% 122%, #ede4d3 0 38%, transparent 39%),
		linear-gradient(160deg, #386858, #2a4f43);
}
.sk-scene-2 {
	background:
		radial-gradient(90% 55% at -10% -15%, #e4a867 0 42%, transparent 43%),
		radial-gradient(85% 60% at 108% 18%, #b43031 0 34%, transparent 35%),
		radial-gradient(130% 60% at 50% 124%, #f6eedd 0 36%, transparent 37%),
		linear-gradient(160deg, #9a5c2e, #6f3f1d);
}
.sk-scene-3 {
	background:
		radial-gradient(55% 42% at 58% 38%, rgba(228, 168, 103, .55), transparent 70%),
		radial-gradient(120% 55% at 50% 126%, #386858 0 40%, transparent 41%),
		linear-gradient(172deg, #2a4f43, #1a2f28);
}
.sk-stage { position: absolute; inset: 0; }
.sk-stage::before {
	content: ""; position: absolute; left: 50%; top: 44%; width: 340px; height: 340px;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 224, 170, .38), transparent 65%);
}
.sk-candle {
	position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
	width: 110px; height: 140px; background: linear-gradient(#f0e6d2, #dccdb0);
	border-radius: 6px 6px 10px 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.sk-candle::before {
	content: ""; position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
	width: 14px; height: 22px; border-radius: 50% 50% 40% 40%;
	background: radial-gradient(ellipse at 50% 75%, #ffdf9e 0%, #e4a867 55%, transparent 75%);
}
.sk-candle::after {
	content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
	width: 2px; height: 9px; background: #4b4237;
}
.sk-stage-shadow {
	position: absolute; left: 50%; top: calc(44% + 76px); width: 210px; height: 34px;
	transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 0, 0, .32), transparent 68%);
}
.sk-slide-content {
	position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0 56px 70px;
	max-width: 640px; color: #f7f2e6;
}
.sk-slide-content .sk-eyebrow { color: var(--wp--preset--color--accent-3); }
.sk-slide-title {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 600; line-height: 1.08;
	color: #faf6ec !important; margin: 8px 0 8px; text-shadow: 0 2px 26px rgba(0, 0, 0, .3);
}
.sk-slide-content p { margin: 0; font-size: 1rem; color: rgba(250, 246, 236, .9); max-width: 50ch; text-shadow: 0 1px 14px rgba(0, 0, 0, .25); }
.sk-slide-cta { position: absolute; right: 56px; bottom: 30px; z-index: 2; }
.sk-dots { position: absolute; left: 56px; bottom: 32px; z-index: 3; display: flex; gap: 10px; }
.sk-dot {
	width: 38px; height: 3px; border-radius: 2px; border: none; padding: 0; cursor: pointer;
	background: rgba(250, 246, 236, .35); transition: background .3s ease;
}
.sk-dot.on { background: #faf6ec; }
.sk-dot:focus-visible { outline: 2px solid var(--wp--preset--color--accent-3); outline-offset: 4px; }
@media (max-width: 860px) {
	.sk-slide-content { padding: 0 24px 84px; }
	.sk-dots { left: 24px; bottom: 40px; }
	.sk-slide-cta { right: 24px; bottom: 34px; padding: 11px 20px; }
}

/* ---- κάρτες κατηγοριών: οριζόντιο carousel με βελάκια / swipe ---- */
.sk-cats-wrap { position: relative; }
.sk-cats {
	display: flex; gap: 20px; overflow-x: auto;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; padding: 4px;
}
.sk-cats::-webkit-scrollbar { display: none; }
.sk-cats .sk-cat-card { flex: 0 0 calc(22.22% - 15.56px); scroll-snap-align: center; }
.sk-cats-btn {
	position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--wp--preset--color--accent-1); color: #f6eedd;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(43, 43, 40, .25);
	transition: background .15s ease, transform .15s ease;
}
.sk-cats-btn:hover { background: var(--wp--preset--color--accent-6); transform: translateY(-50%) scale(1.06); }
.sk-cats-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent-3); outline-offset: 3px; }
.sk-cats-btn svg { width: 18px; height: 18px; }
.sk-cats-prev { left: -14px; }
.sk-cats-next { right: -14px; }
.sk-cats-btn.off { display: none; }
.sk-cat-ph { aspect-ratio: 1; }
.sk-cat-ph.v5 { background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(246, 238, 221, .5), transparent 70%), linear-gradient(160deg, #cbb691, #9f8760); }
.sk-cat-ph.v6 { background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(228, 168, 103, .45), transparent 70%), linear-gradient(160deg, #b78654, #8a5a2c); }
/* Ίδια «κάρτα» γλώσσα με την κάρτα προϊόντος (theme.json §4, li.wc-block-product):
   λευκό φόντο, ακτίνα 22px, ίδιο λεπτό περίγραμμα/σκιά. Πριν ήταν άλλο, παλιότερο
   στυλ (κρεμ φόντο, ακτίνα 4px) — δύο διαφορετικές «κάρτες» στην ίδια σελίδα. */
.sk-cat-card {
	background: #fff; border: 1px solid rgba(56, 104, 88, .14); border-radius: 22px;
	padding: .7rem .7rem 1.1rem;
	box-shadow: 0 14px 32px -18px rgba(56, 104, 88, .34);
	text-decoration: none !important; transition: transform .22s cubic-bezier(.34,1.4,.5,1), box-shadow .2s ease;
	display: block;
}
.sk-cat-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -20px rgba(56, 104, 88, .44); }
/* Το πάτημα το παίζει το sk-v12.js (squeeze()) με το ίδιο keyframe
   "ζούληγμα" του πρωτοτύπου, όχι ένα σκέτο :active. */
@media (prefers-reduced-motion: reduce) {
	.sk-cat-card:hover { transform: none; }
}
.sk-cat-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 14px; }
.sk-cat-card figure { margin: 0 0 .85rem; overflow: hidden; border-radius: 14px; }
.sk-cat-card figcaption { padding: 0 .4rem; }
.sk-cat-name {
	display: block; font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.25rem; font-weight: 600; color: var(--wp--preset--color--accent-1);
}
.sk-cat-sub { display: block; font-size: .8rem; color: #5c5850; }
@media (max-width: 1199px) {
	.sk-cats .sk-cat-card { flex: 0 0 calc(28.57% - 14.29px); }
}
@media (max-width: 860px) {
	.sk-cats .sk-cat-card { flex: 0 0 calc(40% - 12px); }
}

/* ---- trust strip ---- */
.sk-trust { background: var(--wp--preset--color--accent-5); }
.sk-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.sk-trust-grid h3 { font-size: 1.15rem; color: var(--wp--preset--color--accent-1); margin: 0 0 6px; }
.sk-trust-grid p { font-size: .84rem; color: #5c5850; margin: 0; }
/* ⚠ Το γράμμα μέσα στον κύκλο ήταν σκέτο `--accent-2` (μπρούτζος #9a5c2e),
   3,79:1 πάνω στο μπεζ #e8d8b8 του `.sk-trust` — κάτω από 4,5:1. Ο κύκλος
   (border) έμενε ίδιος, μόνο το γράμμα σκούρηνε: `#834e27` (σκουρότερο 15%
   προς το μαύρο) δίνει 4,84:1. Local override, το `--accent-2` αλλού μένει. */
.sk-t-ico {
	width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--accent-2);
	display: flex; align-items: center; justify-content: center;
	color: #834e27;
	font-family: var(--wp--preset--font-family--eb-garamond); font-size: 1.25rem; font-style: italic;
}
@media (max-width: 860px) { .sk-trust-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- spotlight ---- */
.sk-spot { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
/* Ίδια ακτίνα 22px με την κάρτα προϊόντος (theme.json §4) — πριν ήταν 4px,
   ελάχιστα στρογγυλεμένο σε σχέση με τις υπόλοιπες κάρτες της ίδιας σελίδας. */
.sk-spot-img { position: relative; border-radius: 22px; overflow: hidden; }
.sk-spot-img img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; display: block; }
/* Ίδιο σχήμα με το .sk-hero-badge (ήρωας) και το .sk-card-badge (κάρτες
   προϊόντων, katastima.css §4α): γεμάτο χάπι σε amber, πεζά-κεφαλαία,
   όχι κεφαλαία-με-αραίωση. Ήταν τετράγωνο και μπρούτζινο — τρίτο,
   διαφορετικό στυλ ετικέτας στην ίδια σελίδα. */
.sk-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--contrast);
	font-size: .72rem; font-weight: 600;
	padding: 5px 12px; border-radius: 999px;
}
.sk-spot h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; color: var(--wp--preset--color--accent-1); margin: 10px 0 16px; }
.sk-spot p { color: #5c5850; max-width: 48ch; }
.sk-notes { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 26px; padding: 0; list-style: none; }
.sk-notes li {
	font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
	border: 1px solid #d8cbae; color: #5c5850; padding: 6px 14px; border-radius: 999px;
}
@media (max-width: 860px) { .sk-spot { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Το πλέγμα προϊόντων της αρχικής ----
   Ενοποίηση 2026-08-07: ήταν κλασικό markup (ul.products li.product) με
   δικό του CSS εδώ, ξεχωριστό από το κατάστημα. Τώρα είναι το ΙΔΙΟ block
   «Product Collection» με το κατάστημα (li.wc-block-product) — η κάρτα
   στυλίζεται ήδη ολόκληρη από το katastima.css §4 (χρώμα, σκιά, hover-lift,
   badge/αγαπημένο, κουκκίδες), καμία ξεχωριστή γραμμή δεν χρειάζεται εδώ.
   Το πλέγμα 4 στηλών (responsive) το δίνει το ίδιο το block, μέσω
   displayLayout στο arxiki.html — ίδιο μηχανισμό με το κατάστημα. */

/* ---- selects: variations προϊόντων, ταξινόμηση καταστήματος, φόρμες ---- */
/* ⚠⚠ Η ΡΙΖΑ ΤΟΥ «ΕΤΙΚΕΤΕΣ ΠΕΦΤΟΥΝ ΠΑΝΩ ΣΤΙΣ ΤΙΜΕΣ» ΣΤΟ ΤΑΜΕΙΟ ήταν ΕΔΩ, όχι στο
   WooCommerce. Βρέθηκε 2026-08-07, με πλήρη κατάταξη όλων των κανόνων CSS
   που ταιριάζουν στο `#billing-country` σε σειρά cascade (`el.matches()` +
   `styleSheets`, όχι μάντεμα): το δικό του component
   (`checkout.css?ver=wc-10.9.3`, `.wc-blocks-components-select__select`)
   έχει ήδη σωστό `padding: 16px 9px 0px` — τα 16px πάνω ΕΙΝΑΙ ο χώρος για το
   label. Αυτός ο κανόνας εδώ, με `!important` και επιλογέα αρκετά φαρδύ
   («…, φόρμες») ώστε να πιάνει και το `.woocommerce-page select`, τον
   ΞΑΝΑΓΡΑΦΕΙ σε `12px 42px 12px 14px` — το ταμείο έχει `body.woocommerce-page`
   άρα ταίριαζε. Δοκιμάστηκε πρώτα προσθήκη ειδικότητας (τρεις κλάσεις
   αντί για δύο) στο δικό μας νέο κανόνα: ΔΕΝ έφτανε, γιατί αυτός εδώ έχει
   ήδη `!important`. Μοναδική ασφαλής λύση: να μην ταιριάζει ΚΑΘΟΛΟΥ στα
   selects του Blocks checkout, με `:not()`. Το `select` του checkout ΔΕΝ
   είναι «φόρμα» με την έννοια που το εννοούσε αυτός ο κανόνας (variations,
   ταξινόμηση) — έχει ήδη δικό του βέλος (SVG μέσα στο container, δεν
   εξαρτάται από το `background-position` εδώ) και δικό του label. */
.woocommerce select:not(.wc-blocks-components-select__select),
.woocommerce-page select:not(.wc-blocks-components-select__select),
.woocommerce-ordering select:not(.wc-blocks-components-select__select),
.variations select:not(.wc-blocks-components-select__select) {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fbf7ef;
	border: 1px solid #d8cbae;
	border-radius: 4px;
	/* το woocommerce-blocktheme.css βάζει height:3em και κόβει τις ουρές των γραμμάτων */
	height: auto !important;
	padding: 12px 42px 12px 14px !important;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: .9rem;
	color: var(--wp--preset--color--contrast);
	line-height: 1.5 !important;
	cursor: pointer;
	max-width: 100%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23386858' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce select:not(.wc-blocks-components-select__select):hover,
.woocommerce-page select:not(.wc-blocks-components-select__select):hover,
.variations select:hover { border-color: var(--wp--preset--color--accent-2); }
.woocommerce select:not(.wc-blocks-components-select__select):focus,
.woocommerce-page select:not(.wc-blocks-components-select__select):focus,
.variations select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 0 0 3px rgba(228, 168, 103, .35);
}

/* πίνακας variations στη σελίδα προϊόντος */
.woocommerce div.product form.cart table.variations th.label {
	font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
	color: #5c5850; padding-right: 12px; vertical-align: middle;
}
.woocommerce div.product form.cart table.variations td.value { padding: 4px 0 0; }	/* 10 -> 0: αέρας πάνω σε αέρα, δες «Λιγότερο κενό γύρω από τη γραμμή τιμής» στο product.css */
.woocommerce div.product form.cart .reset_variations {
	font-size: .78rem; color: var(--wp--preset--color--accent-2); margin-left: 10px;
}

/* μπάρα ταξινόμησης στο κατάστημα — διακριτική, δένει με το φόντο */
.woocommerce .woocommerce-ordering { margin: 0 0 30px; }
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	background-color: transparent;
	border-color: #d8cbae;
	font-size: .85rem;
	padding: 9px 38px 9px 12px !important;
	color: #5c5850;
}
.woocommerce .woocommerce-ordering select:hover { color: var(--wp--preset--color--contrast); }
.woocommerce .woocommerce-result-count { margin: 8px 0 30px; color: #5c5850; font-size: .85rem; }

/* ---- story ---- */
.sk-story { background: var(--wp--preset--color--accent-1); color: #ece5d4; text-align: center; }
.sk-story-in { max-width: 760px; margin: 0 auto; padding: 84px 24px; }
/* ⚠ Ήταν σκέτο `--accent-3` (amber #e4a867), 3,07:1 πάνω στο πετρόλ #386858 του
   `.sk-story` — κάτω από το WCAG AA 4,5:1. Ίδιο ζευγάρι με το `.sk-quiz-out`
   (κουίζ αρώματος, ήδη διορθωμένο εκεί στο 4,67:1 με ελαφρώς διαφορετικό
   ανοιχτόχρωμο amber) — εδώ το ίδιο χρώμα ξαναϋπολογίστηκε ανεξάρτητα.
   `#f3d8bb` (amber ανοιγμένο 55% προς το λευκό): 4,66:1. Local override, όχι
   αλλαγή στο global `--accent-3` — αλλού στο site η αρχική απόχρωση μένει σωστή. */
.sk-story .sk-eyebrow { color: #f3d8bb; }
/* Το 500 δεν υπάρχει ως αρχείο EB Garamond (400/600/700) και ρεντάρονταν 400.
   Γράφεται 400 — μηδέν οπτική αλλαγή, δες katastima.css §0. Το 600 θα ήταν
   ορατά πιο χοντρό, δηλαδή αλλαγή σχεδίασης, όχι διόρθωση. */
.sk-story h2 {
	color: #f5efe0; font-size: clamp(1.7rem, 3vw, 2.3rem); font-style: italic;
	font-weight: 400; line-height: 1.3; margin: 14px 0 18px;
}
.sk-story p { color: #cfe0d5; max-width: 58ch; margin: 0 auto 26px; }

/* ---- τελικό CTA ---- */
.sk-follow { background: var(--wp--preset--color--accent-5); text-align: center; }
.sk-follow-in { max-width: 620px; margin: 0 auto; padding: 64px 24px; }
.sk-follow h2 { color: var(--wp--preset--color--accent-1); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 8px 0 10px; }
.sk-follow p { color: #5c5850; margin: 0 0 22px; }