/* Cannavoulis - θέμα MODX 3 + miniShop3. Βασισμένο στο εγκεκριμένο πρωτότυπο v2 (design brief v2). Mobile-first.
   Όλα τα χρώματα/γραμματοσειρές/ακτίνες είναι μεταβλητές στο :root.
   Αντιθέσεις (WCAG 2.1 AA): ink σε sand 13,9:1 · ink σε coral 5,7:1 · moss σε sand 6,6:1 · λευκό σε moss 7,6:1
   · muted σε sand 5,7:1 · brick σε sand 5,6:1. Το coral ΔΕΝ χρησιμοποιείται ποτέ ως χρώμα κειμένου σε ανοιχτό φόντο. */

/* ---------- Γραμματοσειρές (self-hosted, βλ. assets/fonts/README.txt) ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-400-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-600-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-700-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/manrope-800-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/manrope-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/noto-serif-display-italic-500-greek.woff2") format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/noto-serif-display-italic-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2212; }
/* Fallback με προσαρμοσμένες μετρικές ώστε το swap να μην προκαλεί CLS (τιμές προσεγγιστικές, να ελεγχθούν) */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --sand: #F5EEE3; --ink: #14261D; --coral: #FF6B4A; --coral-d: #E85A38; --moss: #2F5D46; --peach: #F4D9C6; --brick: #A63A1B;
  --white: #FFFFFF; --muted: #5A5F54; --line: #D9CBB6;
  --font: "Manrope", "Manrope Fallback", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --r-card: 24px; --r-input: 16px; --max: 1320px;
  --stick: 64px;
  --shadow-hover: 0 18px 36px rgba(20, 38, 29, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
body { margin: 0; background: var(--sand); color: var(--ink); font: 400 18px/1.6 var(--font); }
/* Off-canvas panels (menu, mini cart, filters) sit outside the viewport; stop mobile browsers from panning sideways to them. clip keeps position: sticky working. */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html.nav-open, html.sheet-open, html.cart-open, html.gate-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: 34px; } h2 { font-size: 30px; } h3 { font-size: 22px; font-weight: 700; line-height: 1.25; } h4 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--moss); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.on-dark :focus-visible, .site-footer :focus-visible, .announce :focus-visible, .hero-slider :focus-visible, .overlay :focus-visible, .drawer-top :focus-visible, .section-dark :focus-visible { outline-color: var(--sand); box-shadow: 0 0 0 2px var(--ink); }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -80px; background: var(--ink); color: var(--sand); padding: 12px 18px; z-index: 3000; border-radius: 999px; font-weight: 700; }
.skip-link:focus { top: 8px; color: var(--sand); }
small, .small { font-size: 14px; }
.muted { color: var(--muted); }
.serif, em.serif { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
section { padding: 40px 0; }
.sec { padding: 56px 0; }
.dark, .section-dark { background: var(--ink); color: var(--sand); }
.dark a:not(.btn), .section-dark a:not(.btn) { color: var(--sand); }
.section-surface { background: var(--peach); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sec-head h2 { margin: 0; }
.sample-note { font-size: 14px; color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--font); margin: 0 0 12px; letter-spacing: 0; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none; }
.lead { font-size: 18px; max-width: 56ch; }
.link-slide { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--ease); font-weight: 700; padding-bottom: 2px; }
.link-slide:hover, .link-slide:focus-visible { background-size: 100% 2px; }
[hidden] { display: none !important; }
/* Κάλυμμα πριν την πύλη ηλικίας (το βάζει το inline script της κεφαλίδας όταν λείπει το cookie age_ok): χωρίς αναλαμπή περιεχομένου */
html.age-pending::before { content: ""; position: fixed; inset: 0; background: var(--ink); z-index: 1999; }

/* ---------- Κουμπιά ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px; font: 700 17px/1.2 var(--font);
  border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; text-align: center; transition: background-color .2s, color .2s, border-color .2s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn .arr { display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .arr, .tile-link:hover .arr, .mega-all:hover .arr, .split-tile:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.btn-primary:hover { background: var(--coral-d); border-color: var(--coral-d); color: var(--ink); }
.btn-secondary { background: transparent; color: var(--moss); border-color: var(--moss); }
.btn-secondary:hover { background: var(--moss); color: var(--white); }
.dark .btn-secondary, .section-dark .btn-secondary, .on-dark .btn-secondary, .theme-dark .btn-secondary { color: var(--sand); border-color: var(--sand); }
.dark .btn-secondary:hover, .section-dark .btn-secondary:hover, .on-dark .btn-secondary:hover, .theme-dark .btn-secondary:hover { background: var(--sand); color: var(--ink); }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn.is-done { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--moss); text-decoration: underline; cursor: pointer; min-height: 48px; }

/* ---------- Μπάρα ανακοινώσεων A1 (ύψος δεσμευμένο στο server HTML) ---------- */
.announce { background: var(--ink); color: var(--sand); font-size: 15px; font-weight: 500; min-height: 40px; }
.announce .container { display: flex; align-items: center; justify-content: center; gap: 4px 12px; min-height: 40px; }
.announce .a1-msg { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.announce .a1-msg a { color: var(--coral); font-weight: 700; margin-left: 6px; }
.announce .a1-msg[hidden] { display: none; }
.a1-btn { background: none; border: 0; color: var(--sand); width: 48px; height: 48px; margin: -4px 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
.a1-btn:hover { background: rgba(255, 255, 255, .12); }
.a1-btn svg { width: 18px; height: 18px; }
html.a1-closed .announce { display: none; }

/* ---------- Κεφαλίδα (sticky) ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 2px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font: 800 26px/1 var(--font); letter-spacing: -.03em; margin-right: auto; }
.logo:hover { color: var(--ink); }
.logo img { width: auto; height: 44px; aspect-ratio: 25 / 44; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; min-width: 48px; min-height: 48px; background: none; border: 0; color: var(--ink); text-decoration: none; cursor: pointer; font: 700 13px/1.1 var(--font); position: relative; border-radius: 999px; }
.icon-btn:hover { background: var(--sand); color: var(--ink); }
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn .lbl { display: none; }
.cart-count { position: absolute; top: 3px; right: 1px; background: var(--coral); color: var(--ink); min-width: 20px; height: 20px; border-radius: 10px; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; padding: 0 5px; transition: transform .25s var(--ease); }
/* Small phones (360 px class): keep logo + 4 icons inside the screen; the phone number stays in the menu drawer and footer */
@media (max-width: 420px) {
  .logo { font-size: 21px; gap: 6px; min-width: 0; }
  .logo img { width: auto; height: 38px; }
  .icon-btn { min-width: 44px; }
  .hdr-phone { display: none; }
}
.cart-count.bump { transform: scale(1.35); }
.cart-count .ms3-order-total__cost { display: none; }
.search-panel { display: none; background: var(--sand); padding: 12px 0; position: relative; }
.search-panel.open { display: block; }
.search-form { display: flex; gap: 8px; }
.search-form input { flex: 1; min-width: 0; border-radius: 999px; }
.suggest { position: absolute; left: 16px; right: 16px; top: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-input); box-shadow: var(--shadow-hover); z-index: 300; list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow: auto; }
.suggest a { display: block; padding: 10px; text-decoration: none; color: var(--ink); border-radius: 10px; }
.suggest a:hover, .suggest a:focus { background: var(--sand); }
.suggest .grp { font-size: 14px; color: var(--muted); padding: 6px 10px 0; font-weight: 600; }

/* Πλοήγηση: κινητό = συρτάρι. Όλοι οι σύνδεσμοι υπάρχουν στο HTML και όταν είναι κλειστό (crawlable) */
.site-nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(92vw, 420px); background: var(--white); z-index: 1200; overflow-y: auto; transform: translateX(-102%); transition: transform .28s var(--ease); visibility: hidden; display: flex; flex-direction: column; }
.site-nav.open { transform: none; visibility: visible; }
html.no-js .site-nav { position: static; transform: none; visibility: visible; width: auto; }
.nav-backdrop, .sheet-backdrop, .cart-backdrop { position: fixed; inset: 0; background: rgba(20, 38, 29, .6); z-index: 1100; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.nav-backdrop.show, .sheet-backdrop.show, .cart-backdrop.show { opacity: 1; visibility: visible; }
.nav-backdrop { z-index: 99; }
.drawer-top { background: var(--ink); color: var(--sand); padding: 12px 16px 16px; }
.drawer-top .dt-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drawer-top .logo { color: var(--sand); }
.drawer-top .icon-btn { color: var(--sand); }
.drawer-top .icon-btn:hover { background: rgba(255, 255, 255, .12); color: var(--sand); }
.drawer-top .btn { width: 100%; margin-bottom: 10px; }
.drawer-top input { background: var(--white); }
.nav-inner { padding: 0 16px; flex: 1; }
.nav-list, .nav-util { list-style: none; margin: 0; padding: 0; }
.nav-group { border-bottom: 1px solid var(--line); }
.nav-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 8px 0; background: none; border: 0; font: 700 18px/1.3 var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.nav-toggle::after { content: "+"; font-size: 26px; color: var(--moss); font-weight: 500; }
.nav-group.open > .nav-toggle::after { content: "\2212"; }
.mega { display: none; padding: 0 0 16px; }
.nav-group.open > .mega { display: block; }
.mega-info { font-size: 15px; color: var(--muted); margin: 0 0 8px; }
.mega-links { list-style: none; margin: 0 0 8px; padding: 0; }
.mega-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; text-decoration: none; color: var(--ink); font-weight: 600; padding: 4px 0; }
.mega-links a:hover { color: var(--moss); text-decoration: underline; }
.mega-links .n { font-size: 14px; font-weight: 500; color: var(--muted); }
.mega-all { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; color: var(--moss); text-decoration: none; }
.mega-all:hover { text-decoration: underline; }
.mega-tile { position: relative; display: block; border-radius: 20px; overflow: hidden; margin-top: 8px; color: #fff; text-decoration: none; aspect-ratio: 5/2; background: var(--ink); }
.mega-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.mega-tile:hover img { transform: scale(1.04); }
.mega-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 38, 29, .85), rgba(20, 38, 29, .1) 70%); }
.mega-tile .mt-copy { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: block; line-height: 1.3; }
.mega-tile .mt-copy strong { display: block; font-size: 19px; font-weight: 800; }
.mega-tile .mt-copy span { font-size: 15px; }
.nav-util { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 12px 0; }
.nav-util a { display: inline-flex; min-height: 48px; align-items: center; font-weight: 500; color: var(--ink); }
.drawer-bottom { padding: 8px 16px 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0 20px; }
.drawer-bottom a { display: inline-flex; min-height: 48px; align-items: center; color: var(--ink); font-weight: 600; }
.secure-note { display: none; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); padding: 0 10px; }
/* Checkout: απλοποιημένη κεφαλίδα (logo, τηλέφωνο, ασφαλής παραγγελία), χωρίς διαφημίσεις */
body.is-checkout #menu-toggle, body.is-checkout #search-toggle, body.is-checkout .site-nav, body.is-checkout .search-panel, body.is-checkout .announce, body.is-checkout .hdr-account, body.is-checkout .hdr-cart { display: none !important; }
body.is-checkout .secure-note { display: inline-flex; }
/* Way back from checkout (simplified header has no menu or cart) */
.checkout-back { display: none; align-items: center; gap: 4px; min-height: 48px; padding: 0 10px; font-weight: 700; color: var(--ink); text-decoration: none; border-radius: 999px; }
.checkout-back:hover { background: var(--sand); color: var(--ink); }
body.is-checkout .checkout-back { display: inline-flex; }
.checkout-nav { margin: 0 0 8px; font-weight: 600; }
.checkout-nav a { color: var(--ink); }
@media (max-width: 420px) { body.is-checkout .secure-note { display: none; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 15px; padding: 16px 0 0; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li + li::before { content: "/"; margin-right: 4px; color: var(--muted); }

/* ---------- Hero slider A2 ---------- */
.hero-slider { position: relative; padding: 0; background: var(--ink); color: var(--sand); overflow: hidden; }
.hs-track { position: relative; height: clamp(520px, 128vw, 680px); }
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s linear .4s; }
.hs-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hs-art, .hs-art picture { position: absolute; inset: 0; }
.hs-art img { width: 100%; height: 100%; object-fit: cover; }
.hs-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hs-slide.theme-dark::after { background: linear-gradient(to top, rgba(20, 38, 29, .95) 0%, rgba(20, 38, 29, .7) 38%, rgba(20, 38, 29, 0) 70%); }
.hs-slide.theme-light::after { background: linear-gradient(to top, rgba(245, 238, 227, .96) 0%, rgba(245, 238, 227, .75) 38%, rgba(245, 238, 227, 0) 70%); }
.hs-slide.theme-light { color: var(--ink); }
.hs-copy { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 92px; }
.hs-text { max-width: 640px; }
.display { font-size: clamp(40px, 7vw, 80px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; margin: 0 0 16px; }
.hs-text .lead { margin-bottom: 20px; }
.hs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hs-actions .btn { flex: 1 1 auto; }
.ad-fine { font-size: 14px; margin: 14px 0 0; max-width: 56ch; }
.hs-controls { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; }
.hs-controls .container { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hs-bar { display: inline-flex; align-items: center; background: rgba(20, 38, 29, .94); color: var(--sand); border-radius: 999px; padding: 0 4px; }
.hs-btn { background: none; border: 0; color: var(--sand); min-width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border-radius: 999px; font: 700 15px/1 var(--font); padding: 0 10px; }
.hs-btn:hover { background: rgba(255, 255, 255, .14); }
.hs-btn svg { width: 20px; height: 20px; }
.hs-btn .txt { display: none; }
.hs-count { font-size: 15px; font-weight: 700; padding: 0 6px; min-width: 52px; text-align: center; }
.hs-dots { display: none; }
.hs-dot { width: 40px; height: 48px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hs-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sand); transition: background-color .2s, transform .2s; }
.hs-dot[aria-current="true"]::before { background: var(--coral); border-color: var(--coral); transform: scale(1.2); }
.hs-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); z-index: 6; }
.hs-progress span { display: block; height: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); }
.hero-slider.is-paused .hs-progress, .hero-slider.is-rm .hs-progress { visibility: hidden; }
.hero-slider.is-single .hs-controls, .hero-slider.is-single .hs-progress { display: none; }

/* ---------- Ribbon απόδειξης ---------- */
.ribbon { background: var(--ink); color: var(--sand); padding: 0; }
.ribbon ul { list-style: none; margin: 0 auto; padding: 0 16px; display: flex; gap: 28px; overflow-x: auto; max-width: var(--max); }
.ribbon li { flex: none; display: flex; align-items: center; gap: 10px; min-height: 56px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.ribbon svg { width: 22px; height: 22px; color: var(--coral); flex: none; }

/* ---------- Μωσαϊκό κατηγοριών ---------- */
.mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 12px; grid-auto-flow: dense; }
.mosaic .tile { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.mosaic .tile:first-child { grid-column: span 2; grid-row: span 1; }
.tile-link { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: #fff; text-decoration: none; }
.tile-link:hover { color: #fff; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); z-index: 0; object-position: center 25%; }
.tile .t-name, .tile .t-count { position: relative; z-index: 2; text-shadow: 0 1px 2px rgba(20, 38, 29, .6); }
.tile:hover img { transform: scale(1.04); }
.tile-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 38, 29, .96) 0%, rgba(20, 38, 29, .88) 28%, rgba(20, 38, 29, .45) 55%, rgba(20, 38, 29, 0) 80%); z-index: 1; }
.t-name { font: 800 21px/1.1 var(--font); letter-spacing: -.02em; display: block; }
.t-count { font-size: 14px; font-weight: 600; opacity: .95; display: block; margin-top: 4px; }
.tile:first-child .t-name { font-size: 30px; }

/* ---------- Σειρές προϊόντων και πλέγμα ---------- */
.row-scroll { list-style: none; margin: 0; padding: 4px 16px 20px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; }
.row-scroll > * { flex: 0 0 66%; scroll-snap-align: start; }
.row-ctrl { display: flex; gap: 8px; }
.row-ctrl .btn { min-width: 52px; padding: 0; font-size: 24px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.card { background: var(--white); border-radius: var(--r-card); display: flex; flex-direction: column; height: 100%; position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card:hover, .card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card-imgwrap { position: relative; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; background: var(--peach); aspect-ratio: 4/5; }
.card-media { display: block; height: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.pills { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pill, .chip { background: var(--white); color: var(--ink); font: 600 14px/1.2 var(--font); padding: 5px 10px; border-radius: 999px; }
.pills .pill { box-shadow: 0 1px 3px rgba(20, 38, 29, .2); }
.pill-new { position: absolute; top: 10px; left: 10px; background: var(--coral); color: var(--ink); font-weight: 800; }
.card-body { padding: 14px 14px 6px; flex: 1; }
.card-body > p, .card-body > h3 { margin: 0; }
.card-brand { font-size: 14px; color: var(--muted); min-height: 1.4em; }
.card-name { font: 600 17px/1.3 var(--font); letter-spacing: 0; margin-top: 2px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-name a { color: var(--ink); text-decoration: none; }
.card-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.card-name a:hover { text-decoration: underline; }
.card-spec { font-size: 14px; color: var(--muted); }
.card-price { font: 700 20px/1.3 var(--font); margin-top: 6px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.card-price s { font-size: 14px; font-weight: 400; color: var(--muted); }
.pct { background: var(--coral); color: var(--ink); font: 800 14px/1.2 var(--font); padding: 2px 8px; border-radius: 999px; }
.card-unit, .card-prevnote, .card-rating { font-size: 14px; color: var(--muted); }
.card .btn, .card form .btn { margin: 8px 14px 14px; width: calc(100% - 28px); min-height: 48px; padding-top: 8px; padding-bottom: 8px; position: relative; z-index: 2; }
.card form { margin: 0; position: relative; z-index: 2; } /* above .card-name a::after (stretched link) */
.card-incart { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 8px 14px 14px; }
.card-incart-lbl { font-size: 14px; font-weight: 700; color: var(--moss); text-align: center; }
.card-incart .qty { display: flex; width: 100%; justify-content: space-between; border-color: var(--ink); }
.card-incart .qty button { min-width: 44px; min-height: 44px; flex: 0 0 44px; }
.card-incart .qty input { flex: 1; min-width: 0; width: auto; -moz-appearance: textfield; }
.card-incart .qty input::-webkit-outer-spin-button, .card-incart .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card form[data-cart-state="change"] { display: none; }
.card form[data-cart-state="change"] .btn, .card form .qty { margin: 8px 14px 14px; }
.stars { color: var(--ink); letter-spacing: 1px; }
/* Κατάσταση "στο καλάθι": το ProductCardUI του miniShop3 εναλλάσσει τις δύο φόρμες με inline style/attribute */

/* ---------- Banners A3 / A4 / A6 / A8 / A5 / A9 ---------- */
.split-banners { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.split-tile { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; color: #fff; text-decoration: none; aspect-ratio: 4/3; background: var(--ink); height: 100%; }
.split-tile:hover { color: #fff; }
.split-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.split-tile:hover img { transform: scale(1.04); }
.split-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 38, 29, .92) 0%, rgba(20, 38, 29, .55) 45%, rgba(20, 38, 29, 0) 80%); }
.split-tile.theme-light { color: var(--ink); background: var(--peach); }
.split-tile.theme-light:hover { color: var(--ink); }
.split-tile.theme-light::after { background: linear-gradient(to top, rgba(244, 217, 198, .96) 0%, rgba(244, 217, 198, .75) 45%, rgba(244, 217, 198, 0) 85%); }
.st-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; }
.st-copy h3 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.st-copy p { margin: 0 0 12px; font-size: 16px; }
.st-link { font-weight: 800; display: inline-flex; gap: 8px; align-items: center; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.split-tile.theme-light .eyebrow { color: var(--ink); }
.wide-banner { position: relative; padding: 0; color: #fff; overflow: hidden; background: var(--ink); }
.wide-banner .wb-art { position: absolute; inset: 0; }
.wide-banner .wb-art img { width: 100%; height: 100%; object-fit: cover; }
.wide-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 38, 29, .9) 0%, rgba(20, 38, 29, .6) 55%, rgba(20, 38, 29, .05) 100%); }
.wb-copy { position: relative; z-index: 2; padding-top: 56px; padding-bottom: 56px; max-width: var(--max); }
.wb-copy .wb-text { max-width: 560px; }
.wb-copy h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 10px; }
.wb-copy p { max-width: 52ch; }
.brand-row { background: var(--white); padding: 40px 0; }
.brand-row h2 { font: 600 16px/1.3 var(--font); letter-spacing: 0; color: var(--muted); margin: 0 0 20px; text-align: center; }
.brand-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; align-items: center; justify-items: center; }
.brand-logos img { height: 40px; width: auto; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.brand-logos li:hover img, .brand-logos a:focus-visible img { filter: none; opacity: 1; }
.brand-logos a { display: inline-flex; min-height: 48px; align-items: center; }
.cat-banner { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--ink); color: #fff; margin: 0 0 20px; min-height: 180px; display: flex; align-items: flex-end; }
.cat-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 38, 29, .9), rgba(20, 38, 29, .45) 60%, rgba(20, 38, 29, 0)); }
.cb-copy { position: relative; z-index: 2; padding: 20px; max-width: 560px; }
.cb-copy h2 { font-size: 28px; margin: 0 0 6px; }
.cb-copy p { margin: 0 0 12px; font-size: 16px; }
.cross-banner { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--peach); margin: 24px 0; min-height: 160px; display: flex; align-items: center; }
.cross-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cross-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(244, 217, 198, .97), rgba(244, 217, 198, .85) 55%, rgba(244, 217, 198, 0)); }
.cross-banner .cb-copy { color: var(--ink); }
.news-wrap { display: grid; gap: 24px; align-items: center; }
.news-img { display: none; border-radius: var(--r-card); overflow: hidden; }
.news-form { display: grid; gap: 12px; max-width: 520px; }
.news-form label { color: var(--sand); }
.news-form .check { color: var(--sand); font-weight: 500; }
.news-form .check a { color: var(--coral); }
.offer-line { font-weight: 700; }
.news-title { font-size: clamp(30px, 4vw, 44px); }

/* ---------- Ενότητα απόδειξης (σκούρα) ---------- */
.proof-grid { display: grid; gap: 32px; align-items: center; }
.proof-card { background: var(--sand); color: var(--ink); border-radius: var(--r-card); padding: 20px; max-width: 360px; margin: 0 auto; box-shadow: 0 24px 48px rgba(0, 0, 0, .35); }
.proof-card img { max-height: 400px; width: auto; margin: 0 auto; }
.proof-steps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 16px; counter-reset: s; }
.proof-steps li { position: relative; padding-left: 64px; counter-increment: s; min-height: 48px; }
.proof-steps li::before { content: counter(s); position: absolute; left: 0; top: -4px; font: 800 44px/1 var(--font); color: var(--coral); }
.proof-steps strong { display: block; font-size: 19px; }

/* ---------- Αναδεικνυόμενη συλλογή ---------- */
.featured { display: grid; gap: 24px; }
.feat-main { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 320px; background: var(--ink); color: #fff; }
.feat-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 38, 29, .92), rgba(20, 38, 29, .2) 70%); }
.feat-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; z-index: 2; }
.feat-copy h2 { margin: 0 0 8px; }
.feat-copy a.btn { margin-top: 8px; }
.feat-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat-cards > * { min-width: 0; }

/* ---------- Οδηγοί / άρθρα ---------- */
.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.guide-card { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--white); height: 100%; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.guide-card:hover, .guide-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.guide-art { aspect-ratio: 16/9; position: relative; overflow: hidden; background: linear-gradient(135deg, #2F5D46, #14261D); }
.guide-art img { width: 100%; height: 100%; object-fit: cover; }
.guide-body { padding: 18px 20px 22px; }
.guide-body h3 { margin: 0 0 8px; }
.guide-body h3 a { color: var(--ink); text-decoration: none; }
.guide-body h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-body p { margin: 0; font-size: 16px; color: var(--muted); }
.guide-meta { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.contact-grid { display: grid; gap: 24px; align-items: center; }
.contact-grid img { border-radius: var(--r-card); width: 100%; }
.rating-big { font: 800 40px/1 var(--font); }

/* ---------- Σελίδα κατηγορίας ---------- */
.cat-intro { background: var(--peach); border-radius: var(--r-card); overflow: hidden; margin: 16px 0 20px; display: grid; }
.cat-intro-copy { padding: 24px 20px; }
.cat-intro-copy h1 { margin: 0 0 12px; }
.cat-intro-copy p { margin: 0; max-width: 56ch; }
.cat-intro-img { display: none; }
.chips-scroll { list-style: none; display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; margin: 0; }
.chips-scroll a { display: inline-flex; white-space: nowrap; align-items: center; min-height: 48px; padding: 4px 20px; border: 2px solid var(--moss); border-radius: 999px; text-decoration: none; font-weight: 700; background: transparent; color: var(--moss); }
.chips-scroll a:hover { background: var(--white); color: var(--moss); }
.chips-scroll a[aria-current="true"] { background: var(--moss); color: var(--white); }
.toolbar { position: sticky; top: var(--stick); z-index: 80; background: var(--sand); border-bottom: 1px solid var(--line); padding: 8px 0; }
.toolbar .container { display: flex; gap: 8px; align-items: center; }
.toolbar select { flex: 1; min-width: 0; }
.toolbar .count { font-size: 15px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cat-layout { display: block; }
.filters { position: fixed; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; z-index: 1150; background: var(--white); border-radius: 28px 28px 0 0; padding: 0 20px 20px; box-shadow: 0 -10px 30px rgba(20, 38, 29, .3); transform: translateY(105%); visibility: hidden; transition: transform .28s var(--ease), visibility .28s; }
.filters.open { transform: none; visibility: visible; }
.sheet-head { position: sticky; top: 0; background: var(--white); display: flex; justify-content: space-between; align-items: center; padding: 14px 0 8px; z-index: 2; }
.sheet-head h2 { font-size: 22px; margin: 0; }
.filters fieldset { border: 0; margin: 0 0 16px; padding: 0; }
.filters legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.filters .apply-row { position: sticky; bottom: 0; background: var(--white); padding-top: 10px; display: grid; gap: 8px; }
html.no-js .filters { position: static; transform: none; visibility: visible; border-radius: var(--r-card); box-shadow: none; margin-bottom: 16px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 500; }
.check input { width: 24px; height: 24px; accent-color: var(--moss); flex: none; }
.cat-notice { background: var(--white); border-left: 6px solid var(--moss); padding: 14px 18px; border-radius: 0 var(--r-input) var(--r-input) 0; margin: 24px 0; }
.cat-notice p { margin: 0 0 6px; }
.cat-notice p:last-child { margin: 0; }
.empty-msg { padding: 24px; background: var(--white); border-radius: var(--r-card); }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0; justify-content: center; }
.pagination a, .pagination span { display: inline-flex; min-width: 48px; min-height: 48px; align-items: center; justify-content: center; padding: 0 14px; border: 2px solid var(--moss); border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--moss); background: transparent; }
.pagination .active span, .pagination [aria-current="page"] { background: var(--moss); color: var(--white); }
html.js .pagination.has-load-more { display: none; }
.load-more-wrap { text-align: center; margin: 24px 0; }
.cat-seo-text { max-width: 75ch; margin-top: 32px; }

/* ---------- Φόρμες ---------- */
label, .label { display: block; font-weight: 700; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number], input[type=password], input[type=date], select, textarea {
  width: 100%; min-height: 52px; padding: 10px 16px; font: 400 18px/1.3 var(--font); color: var(--ink); background: var(--white); border: 2px solid var(--muted); border-radius: var(--r-input); }
textarea { min-height: 140px; }
input[aria-invalid=true], select[aria-invalid=true], .is-invalid { border-color: var(--brick); }
.field { margin-bottom: 16px; }
.field-error, .invalid-feedback { color: var(--brick); font-weight: 700; font-size: 16px; margin: 4px 0 0; }
.invalid-feedback:empty { display: none; }
.hint { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.form-grid { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
.dob { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--line); background: var(--white); border-radius: var(--r-input); padding: 14px; margin-bottom: 10px; cursor: pointer; font-weight: 400; }
.radio-card input { width: 24px; height: 24px; margin-top: 3px; accent-color: var(--moss); flex: none; }
.radio-card:has(input:checked) { border-color: var(--moss); background: var(--peach); }
.radio-card strong { display: block; }
.radio-card[hidden] { display: none; }

/* ---------- Σελίδα προϊόντος ---------- */
.pdp { display: grid; gap: 24px; padding-top: 16px; }
.gallery-main { background: var(--peach); border-radius: var(--r-card); overflow: hidden; position: relative; aspect-ratio: 4/5; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 8px; margin-top: 10px; list-style: none; padding: 0; }
.thumbs img { width: 64px; height: 80px; object-fit: cover; border: 2px solid var(--line); border-radius: 12px; }
.thumbs button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; min-width: 48px; min-height: 48px; }
.pdp-title { font-size: 28px; }
.pdp-price { font: 800 28px/1.2 var(--font); margin: 0 0 4px; }
.pdp-price s { font-size: 16px; font-weight: 400; color: var(--muted); }
.pdp-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0; }
.pdp-facts .chip { background: var(--peach); }
.coa-row { background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-input); margin: 16px 0; }
.coa-row summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 56px; font-weight: 700; font-size: 16px; }
.coa-row summary::-webkit-details-marker { display: none; }
.coa-row summary svg { width: 24px; height: 24px; flex: none; }
.coa-row summary::after { content: "\25BE"; margin-left: auto; font-size: 18px; transition: transform .2s; }
.coa-row[open] summary::after { transform: rotate(180deg); }
.coa-body { padding: 0 16px 16px; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 17px; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; font-weight: 600; }
.buy-row { display: flex; gap: 10px; align-items: stretch; margin: 16px 0; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--muted); border-radius: 999px; background: var(--white); }
.qty button { min-width: 48px; min-height: 48px; font-size: 24px; background: none; border: 0; cursor: pointer; color: var(--ink); border-radius: 999px; }
.qty input { width: 52px; border: 0; text-align: center; padding: 0; min-height: 44px; background: transparent; border-radius: 0; }
.info-block { background: var(--white); border-radius: var(--r-card); padding: 8px 18px; margin: 16px 0; font-size: 16px; }
.info-lines { list-style: none; margin: 0; padding: 0; }
.info-lines li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--sand); }
.info-lines li:last-child { border-bottom: 0; }
.info-lines svg { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--moss); }
.notice { background: var(--white); border-left: 6px solid var(--moss); padding: 14px 18px; border-radius: 0 var(--r-input) var(--r-input) 0; margin: 16px 0; font-size: 16px; }
.pay-pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0 0; }
.pay-pills li { border: 1px solid var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 14px; background: var(--white); color: var(--ink); font-weight: 600; }
details.acc { background: var(--white); border-radius: var(--r-input); margin-bottom: 8px; }
details.acc summary { cursor: pointer; font-weight: 700; min-height: 56px; display: flex; align-items: center; padding: 8px 18px; list-style: none; justify-content: space-between; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font-size: 26px; color: var(--moss); font-weight: 500; }
details.acc[open] summary::after { content: "\2212"; }
details.acc .acc-body { padding: 0 18px 18px; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; background: var(--white); border-top: 1px solid var(--line); padding: 8px 16px; display: none; z-index: 60; gap: 12px; align-items: center; box-shadow: 0 -4px 14px rgba(20, 38, 29, .14); }
.sticky-buy.show { display: flex; }
.sticky-buy .sb-name { flex: 1; font-weight: 700; font-size: 16px; line-height: 1.2; }
.variant-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }

/* ---------- Καλάθι και ολοκλήρωση ---------- */
.cart-line { display: grid; grid-template-columns: 80px 1fr; gap: 14px; background: var(--white); border-radius: var(--r-card); padding: 14px; margin-bottom: 12px; }
.cart-line img { width: 80px; height: 100px; object-fit: cover; border-radius: 14px; }
.cart-line .cl-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.progress { background: var(--white); border-radius: var(--r-card); padding: 14px 18px; margin: 12px 0; min-height: 76px; }
.progress-bar { height: 12px; background: var(--sand); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.progress-bar span { display: block; height: 100%; background: var(--coral); border-radius: 6px; transition: width .5s var(--ease); }
.totals { background: var(--white); border-radius: var(--r-card); padding: 18px; }
.totals .tr { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.totals .tr.grand { font: 800 22px/1.3 var(--font); border-top: 2px solid var(--sand); margin-top: 8px; padding-top: 10px; }
.step { background: var(--white); border-radius: var(--r-card); padding: 20px 18px; margin-bottom: 16px; }
.step h2 { display: flex; gap: 10px; align-items: center; font-size: 22px; font-weight: 800; }
.step-num { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--sand); align-items: center; justify-content: center; font: 800 18px/1 var(--font); flex: none; }
.checkout-layout, .cart-layout { display: block; }
/* Αρίθμηση βημάτων checkout μόνο για τα ορατά βήματα (η διεύθυνση και ο έλεγχος ηλικίας εμφανίζονται υπό όρους) */
#checkout-root { counter-reset: stp; }
#checkout-root .step-num { font-size: 0; }
#checkout-root .step:not([hidden]) .step-num::before { counter-increment: stp; content: counter(stp); font-size: 18px; }
.error-summary { border: 3px solid var(--brick); color: var(--brick); background: var(--white); padding: 14px 18px; border-radius: var(--r-input); margin-bottom: 16px; font-weight: 700; }
.cross-row { margin-top: 32px; }
.cross-row h2 { font-size: 26px; }
.ms3_field_error, [data-ms3-error] { border-color: var(--brick) !important; }
.ms3-order-total { display: inline; }
.pay-desc, .delivery-desc { font-weight: 400; font-size: 15px; color: var(--muted); display: block; }

/* Μίνι καλάθι (συρτάρι) */
.mini-cart { position: fixed; top: 0; right: 0; bottom: 0; width: min(96vw, 440px); background: var(--sand); z-index: 1300; transform: translateX(105%); visibility: hidden; transition: transform .28s var(--ease), visibility .28s; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(20, 38, 29, .25); }
.mini-cart.open { transform: none; visibility: visible; }
.mc-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--ink); color: var(--sand); }
.mc-head h2 { margin: 0; font-size: 22px; color: var(--sand); }
.mc-head .icon-btn { color: var(--sand); }
.mc-head .icon-btn:hover { background: rgba(255, 255, 255, .12); color: var(--sand); }
.mc-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.mc-foot { padding: 14px 18px 18px; background: var(--white); display: grid; gap: 8px; }
.mc-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: var(--white); border-radius: 16px; padding: 8px; margin-bottom: 8px; font-size: 16px; }
.mc-line img { width: 56px; height: 70px; object-fit: cover; border-radius: 10px; }
.mc-line .mc-rm { background: none; border: 0; min-width: 44px; min-height: 44px; cursor: pointer; font-size: 22px; color: var(--ink); }

/* ---------- Σελίδες πληροφοριών, άρθρα, συνταγές ---------- */
.page-head { background: var(--peach); padding: 28px 0 24px; margin-bottom: 8px; }
.page-head h1 { margin-bottom: .3em; }
.prose { max-width: 75ch; }
.prose h2 { margin-top: 1.6em; font-size: 28px; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--r-input); margin: 1em 0; }
.toc { background: var(--white); border-radius: var(--r-card); padding: 16px 22px; margin-bottom: 20px; max-width: 75ch; }
.toc ol { margin: 0; padding-left: 22px; }
.updated { font-size: 15px; color: var(--muted); }
table { border-collapse: collapse; width: 100%; background: var(--white); font-size: 16px; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--peach); }
.table-wrap { overflow-x: auto; margin-bottom: 20px; border-radius: var(--r-input); }
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: s; }
.steps3 li { background: var(--white); border-radius: var(--r-card); padding: 16px 18px 16px 66px; position: relative; counter-increment: s; }
.steps3 li::before { content: counter(s); position: absolute; left: 16px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--sand); text-align: center; font: 800 18px/36px var(--font); }
.two-col { display: grid; gap: 24px; }
.card-box { background: var(--white); border-radius: var(--r-card); padding: 22px; }
.review { background: var(--white); border-radius: var(--r-card); padding: 16px 20px; margin-bottom: 12px; }
.review .verified { font-size: 14px; color: var(--moss); font-weight: 700; }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.success-box { border: 2px solid var(--moss); background: var(--white); padding: 18px; border-radius: var(--r-input); }
.author-box { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border-radius: var(--r-card); padding: 18px; max-width: 75ch; margin: 24px 0; }
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.article-hero { border-radius: var(--r-card); overflow: hidden; margin: 16px 0 24px; aspect-ratio: 16/9; background: var(--peach); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.coa-lib { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.coa-lib li { background: var(--white); border-radius: var(--r-input); padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; }

/* ---------- Λογαριασμός πελάτη (msCustomer) ---------- */
.ms3-customer-account { padding: 24px 0; }
.ms3-customer-sidebar .nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ms3-customer-sidebar .nav-link { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; }
.ms3-customer-sidebar .nav-link.active, .ms3-customer-sidebar .nav-link:hover { background: var(--peach); }
.customer-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--sand); display: flex; align-items: center; justify-content: center; font: 800 22px/1 var(--font); margin-bottom: 8px; }
.ms3-customer-layout { display: grid; gap: 24px; }
.ms3-auth-form { max-width: 480px; }
.ms3-messages:empty { display: none; }
.withdraw-box { background: var(--peach); border-radius: var(--r-card); padding: 20px; margin: 24px 0; }

/* ---------- Υποσέλιδο ---------- */
.site-footer { background: var(--ink); color: var(--sand); padding: 56px 0 0; font-size: 16px; margin-top: 40px; }
.site-footer a { color: var(--sand); }
.site-footer a:hover { color: var(--white); }
.site-footer h2 { font-size: 18px; color: var(--white); letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-grid { display: grid; gap: 28px; }
.site-footer .pay-pills li { background: transparent; color: var(--sand); border-color: #9AA596; }
.footer-notice { border-top: 1px solid #36493E; margin-top: 28px; padding: 18px 0; font-size: 15px; }

/* ---------- Πύλη ηλικίας, cookies, toast (fixed overlays: καμία αλλαγή στη ροή της σελίδας) ---------- */
.overlay { position: fixed; inset: 0; background: var(--ink); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background-image: radial-gradient(circle at 85% 10%, rgba(255, 107, 74, .35), transparent 45%), radial-gradient(circle at 5% 100%, rgba(47, 93, 70, .8), transparent 50%); }
.dialog { color: var(--sand); max-width: 560px; width: 100%; padding: 16px 4px; }
.dialog .logo { color: var(--sand); margin-bottom: 24px; }
.dialog h2 { font-size: clamp(32px, 6vw, 48px); line-height: 1.05; }
.dialog p { color: var(--sand); }
.dialog .muted { color: #D8D2C4; }
.dialog label { color: var(--sand); }
.dialog a { color: var(--sand); }
.dialog .field-error { background: var(--white); border-radius: 10px; padding: 6px 12px; }
.dialog.refused { background: var(--brick); color: #fff; border-radius: var(--r-card); padding: 32px 24px; }
.dialog.refused h2, .dialog.refused p { color: #fff; }
.dialog.refused .btn-secondary { color: #fff; border-color: #fff; }
.dialog.refused .btn-secondary:hover { background: #fff; color: var(--brick); }
.cookie-sheet { position: fixed; left: 8px; right: 8px; bottom: 8px; background: var(--white); border: 2px solid var(--ink); border-radius: 24px; padding: 18px; z-index: 1900; box-shadow: 0 -4px 30px rgba(20, 38, 29, .3); max-height: 90vh; overflow-y: auto; }
.cookie-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cookie-actions .btn { width: 100%; }
.cookie-settings { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; background: var(--ink); color: var(--sand); padding: 14px 22px; border-radius: 999px; z-index: 1950; max-width: 90vw; font-weight: 600; }

/* ---------- Εμφάνιση στο scroll ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .hs-track { height: calc(100vw * 5 / 6 + 420px); } /* 2026-11-01: 6:5 image + room for the text below it (same as before on phones, no overlap on small tablets) */
  .hs-slide.theme-dark { background: var(--ink); }
  .hs-slide.theme-light { background: var(--sand); }
  .hs-art, .hs-art picture { bottom: auto; height: calc(100vw * 5 / 6); } /* 2026-11-01: exact 6:5 frame = mobile image 960x800, shown whole (was 44% of the slide: 1.17-1.25, cropped) */
  .hs-art img { object-position: center 20%; }
  .hs-art { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .hs-slide.theme-dark::after, .hs-slide.theme-light::after { background: none; }
  .hs-copy { padding-bottom: 80px; }
  .hs-text .lead { font-size: 17px; margin-bottom: 16px; }
}
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .row-scroll > * { flex-basis: 34%; }
  .cookie-actions { flex-direction: row; }
  .cookie-actions .btn { width: auto; flex: 1; }
  .steps3 { grid-template-columns: repeat(3, 1fr); }
  .steps3 li { padding: 64px 18px 16px; }
  .guide-cards, .guide-list { grid-template-columns: repeat(3, 1fr); }
  .brand-logos { grid-template-columns: repeat(4, 1fr); }
  .hs-count { display: none; }
  .hs-dots { display: inline-flex; }
  .hs-btn .txt { display: inline; }
  .mosaic { grid-auto-rows: 220px; }
}
@media (min-width: 768px) {
  .split-banners { grid-template-columns: 1fr 1fr; }
  .news-img { display: block; }
  .news-wrap { grid-template-columns: 1fr 1fr; }
  .hs-track { height: clamp(560px, 46vw, 780px); }
  .hs-copy { justify-content: center; padding-bottom: 60px; }
  .hs-slide.theme-dark::after { background: linear-gradient(to right, rgba(20, 38, 29, .92) 0%, rgba(20, 38, 29, .6) 42%, rgba(20, 38, 29, 0) 70%); }
  .hs-slide.theme-light::after { background: linear-gradient(to right, rgba(245, 238, 227, .96) 0%, rgba(245, 238, 227, .7) 42%, rgba(245, 238, 227, 0) 70%); }
  .hs-actions .btn { flex: 0 0 auto; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .proof-card { transform: rotate(2deg); }
  .cat-intro { grid-template-columns: 1.3fr 1fr; }
  .cat-intro-img { display: block; position: relative; }
  .cat-intro-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cat-intro-copy { padding: 40px; }
  .cat-banner { min-height: 220px; }
}
@media (min-width: 992px) {
  h1 { font-size: 56px; } h2 { font-size: 48px; } h3 { font-size: 28px; }
  section { padding: 56px 0; }
  .sec { padding: 112px 0; }
  .lead { font-size: 22px; }
  .card-name { font-size: 18px; } .card-price { font-size: 22px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-layout .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row-scroll { overflow: visible; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 16px 0; max-width: var(--max); margin: 0 auto; }
  .row-scroll > * { flex: none; }
  .row-ctrl { display: none; }
  .announce, .announce .container { min-height: 44px; }
  .header-row { min-height: 80px; gap: 4px; }
  #menu-toggle, #search-toggle { display: none; }
  .search-panel { display: block; position: absolute; top: 0; left: 0; right: 0; height: 80px; padding: 0; background: none; pointer-events: none; }
  .search-panel .container { height: 80px; display: flex; align-items: center; padding-left: 250px; padding-right: 400px; position: relative; }
  .search-form { width: 100%; pointer-events: auto; }
  .search-form input { background: var(--sand); border-color: transparent; }
  .search-form input:focus { border-color: var(--moss); background: var(--white); }
  .search-form .btn { min-height: 52px; padding: 0 22px; }
  .suggest { left: 250px; right: 400px; top: 72px; pointer-events: auto; }
  .icon-btn { flex-direction: row; gap: 6px; padding: 0 12px; }
  .icon-btn .lbl { display: inline; }
  .hdr-account .lbl { display: none; }
  .cart-count { position: static; }
  .site-header.nav-up { clip-path: inset(0 0 var(--navh, 56px) 0); }
  .site-header:not(.nav-up) { clip-path: inset(0 0 -1000px 0); }
  .site-header.nav-up .header-row { border-bottom: 1px solid var(--line); background: var(--white); }
  .nav-backdrop { display: none; }
  .site-nav { position: relative; top: auto; bottom: auto; left: auto; width: auto; transform: none; visibility: visible; z-index: 1; overflow: visible; display: block; background: var(--white); border-top: 1px solid var(--line); }
  .drawer-top, .drawer-bottom { display: none; }
  .nav-inner { display: flex; align-items: center; max-width: var(--max); margin: 0 auto; padding: 0 16px; flex-wrap: wrap; }
  .nav-list { display: flex; gap: 2px; flex-wrap: wrap; }
  .nav-group { border: 0; position: static; }
  .nav-toggle { width: auto; gap: 8px; padding: 8px 14px; font-size: 16px; min-height: 56px; border-radius: 999px; }
  .nav-toggle::after { content: "\25BE" !important; font-size: 13px; transition: transform .2s; }
  .nav-group.open > .nav-toggle::after { transform: rotate(180deg); }
  .nav-group.open > .nav-toggle, .nav-toggle:hover { background: var(--sand); }
  .nav-util { margin-left: 0; width: 100%; padding: 0; gap: 0 2px; }
  .nav-util a { padding: 0 12px; font-weight: 500; font-size: 16px; }
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 30px 40px rgba(20, 38, 29, .14); padding: 0; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease-out, transform .2s ease-out; pointer-events: none; display: block; visibility: hidden; }
  .nav-group.open > .mega { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .mega-inner { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding-top: 32px; padding-bottom: 36px; max-width: var(--max); margin: 0 auto; }
  .mega-inner.no-tile { grid-template-columns: 1fr; }
  .mega-info { font-size: 16px; margin-bottom: 16px; }
  .mega-links { columns: 2; column-gap: 40px; margin-bottom: 16px; }
  .mega-inner.no-tile .mega-links { columns: 3; }
  .mega-links li { break-inside: avoid; }
  .mega-links a { font-size: 17px; }
  .mega-tile { aspect-ratio: 4/5; margin-top: 0; max-width: 320px; justify-self: end; width: 100%; }
  .cat-layout { display: grid; grid-template-columns: 270px 1fr; gap: 28px; align-items: start; }
  .filters { position: sticky; top: calc(var(--stick) + 72px); left: auto; right: auto; bottom: auto; max-height: calc(100vh - var(--stick) - 90px); transform: none; visibility: visible; z-index: 1; border-radius: var(--r-card); padding: 20px; box-shadow: none; }
  #filter-toggle, .filters .apply-row .apply, .sheet-head .icon-btn, .sheet-backdrop { display: none; }
  .sheet-head { position: static; padding: 0 0 8px; }
  .cat-banner { min-height: 260px; }
  .cb-copy { padding: 40px; }
  .cb-copy h2 { font-size: 40px; }
  .pdp { grid-template-columns: 1fr 1fr; gap: 56px; }
  .pdp-gallery { position: sticky; top: calc(var(--stick) + 16px); align-self: start; }
  .pdp-title { font-size: 40px; }
  .two-col { grid-template-columns: 1fr 1fr; }
  .checkout-layout, .cart-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
  .ms3-customer-layout { grid-template-columns: 280px 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .sticky-buy { display: none !important; }
  .cookie-sheet { left: 24px; right: 24px; bottom: 24px; }
  .cookie-sheet .container { display: flex; gap: 24px; align-items: center; }
  .page-head { padding: 48px 0 36px; }
  .secure-note { padding: 0 14px; }
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 16px; }
  .mosaic .tile:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic .tile.d-span2 { grid-column: span 2; }
  .mosaic .tile.d-span3 { grid-column: span 3; }
  .mosaic .tile.d-span4 { grid-column: span 4; }
  .mosaic .tile.d-rows2 { grid-row: span 2; }
  .mosaic .tile:first-child .t-name { font-size: 44px; }
  .tile-link { padding: 22px; }
  .t-name { font-size: 24px; }
  .st-copy { padding: 32px; }
  .st-copy h3 { font-size: 34px; }
  .wb-copy { padding-top: 88px; padding-bottom: 88px; }
  .brand-logos { grid-template-columns: repeat(6, 1fr); }
  .featured { grid-template-columns: 5fr 7fr; gap: 32px; align-items: stretch; }
  .feat-main { min-height: 100%; }
  .feat-cards { grid-template-columns: repeat(3, 1fr); align-content: center; }
  .hs-copy { padding-bottom: 80px; }
  .hs-controls { bottom: 24px; }
}
@media (min-width: 1280px) {
  .nav-inner { flex-wrap: nowrap; }
  .nav-list { flex-wrap: nowrap; gap: 0; }
  .nav-toggle { padding: 8px 9px; font-size: 15px; white-space: nowrap; gap: 5px; }
  .nav-util { width: auto; margin-left: auto; flex-wrap: nowrap; }
  .nav-util a { padding: 0 8px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 991px) {
  .hdr-account { display: none; }
  .mosaic .tile.m-wide-m { grid-column: span 2; }
}
@media print { .announce, .site-header, .site-footer, .cookie-sheet, .overlay, .mini-cart { display: none !important; } }

/* ---------- Λογαριασμός πελάτη (σύνδεση/εγγραφή/κωδικός, μενού κεφαλίδας) - integration 2026-10-24 ---------- */
.acct-wrap { max-width: 560px; margin: 0 auto; }
.acct-box h2 { font-size: 26px; }
.acct-msg { margin: 0 0 16px; }
.acct-msg:focus { outline: 2px solid var(--moss); outline-offset: 2px; }
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu-list { position: absolute; right: 0; top: 100%; z-index: 320; min-width: 220px; margin: 6px 0 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 38, 29, .12); }
.acct-menu-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.acct-menu-list a:hover, .acct-menu-list a:focus { background: var(--sand); }
.drawer-bottom a + a { margin-left: 0; }

/* Consent statement next to the buy button (no checkbox, decision 2026-10-24) */
.consent-note { margin: 12px 0 10px; color: var(--muted); }
.consent-note a { color: var(--ink); }

/* ===================== UX fix round 2026-10-24 (reference/2026-10-24_ux-review.md) ===================== */
/* M4: drawers/sheets become visible at once when opened, so focus can move into them (closing keeps the delayed hide) */
.mini-cart.open, .filters.open, .site-nav.open { transition: transform .28s var(--ease), visibility 0s; }
/* M5: age-gate error readable (brick on the white box, ≥4.5:1) */
.dialog .field-error { color: var(--brick); }
/* m1: phone icon back in the mobile header (when cv_phone is set). ≤420 px: compact logo; ≤380 px: logo mark only (name stays for screen readers) */
@media (max-width: 420px) {
  .header-row { gap: 0; }
  .site-header .container.header-row { padding-left: 10px; padding-right: 10px; }
  .logo { font-size: 18px; gap: 5px; }
  .logo img { width: auto; height: 36px; }
  .icon-btn { min-width: 44px; }
  .hdr-phone { display: inline-flex; }
}
@media (max-width: 380px) {
  .logo .logo-txt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .logo img { width: auto; height: 40px; }
}
/* m12: one short back link in the mobile checkout header («‹ Καλάθι»); the full line stays under the H1 */
.checkout-back .cb-short { display: none; }
@media (max-width: 600px) { .checkout-back .cb-long { display: none; } .checkout-back .cb-short { display: inline; } }
/* m3: hero slide without image: no broken image, text on the theme colour */
.hs-slide.no-art::after { display: none; }
/* m6: «Άδειασμα καλαθιού» as a quiet link below the totals */
.cart-clean { margin: 6px 0 0; text-align: center; }
.cart-clean .link-btn { color: var(--muted); font-size: 15px; }
/* m10: product names up to 3 lines in the 2-column phone grid (strength/brand not cut). Re-check with the real names. */
@media (max-width: 479px) { .card-name { -webkit-line-clamp: 3; font-size: 16px; } }
/* m11: 404 card keeps its margins on phones. Cause: `.sec { padding: 56px 0 }` removed the side padding of `.container` on elements with both classes (404, search, contact…) */
.container.sec { padding-left: 16px; padding-right: 16px; }
.empty-msg .search-form { flex-wrap: wrap; }
.empty-msg .search-form input { flex: 1 1 200px; }
/* m13: phone PDP: smaller gallery so price, batch and THC are on the first screen. Re-check with real photos. */
@media (max-width: 599px) {
  .gallery-main { aspect-ratio: 1 / 1; max-height: 42vh; margin: 0 auto; }
  .pdp { gap: 14px; padding-top: 8px; }
  .pdp-title { font-size: 24px; margin-bottom: .3em; }
  .pdp-info .coa-row { margin: 8px 0 10px; }
  .pdp-info .coa-row summary { font-size: 15px; padding: 8px 12px; min-height: 48px; line-height: 1.35; }
  /* the current page is the H1 right below: on phones the breadcrumb shows only the path (saves 1-2 lines on every product page) */
  .pdp-page .breadcrumb li[aria-current] { display: none; }
}
/* M3: desktop checkout summary + consent statement + buy button stay in view */
@media (min-width: 992px) {
  .checkout-aside { position: sticky; top: calc(var(--stick) + 16px); max-height: calc(100vh - var(--stick) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  /* 2026-10-29: the 1px press of .btn:active made the panel overflow by 1px → a scrollbar appeared on mousedown, the text re-wrapped,
     the button moved away from the pointer and the click was lost (needed 10+ clicks). No press effect here + a fixed scrollbar gutter. */
  .checkout-aside .btn:active { transform: none; }
}
/* p10: optional order comment collapsed */
.comment-toggle { margin-top: 4px; }
.comment-toggle > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--moss); list-style: none; }
.comment-toggle > summary::-webkit-details-marker { display: none; }
.comment-toggle > summary::before { content: "+"; font-size: 22px; margin-right: 8px; }
.comment-toggle[open] > summary::before { content: "\2212"; }
.comment-toggle .field { margin-top: 6px; }
/* error summary list links (checkout, account, contact, withdrawal) */
.error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.error-summary a { color: var(--brick); }
.error-summary:focus { outline: 3px solid var(--brick); outline-offset: 2px; }
/* p1: breadcrumb tap targets ≥24 px */
.breadcrumb a { display: inline-block; padding: 4px 0; min-height: 24px; }
/* p2: «Όλα» links next to section headings ≥44 px */
.sec-head .link-slide { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
/* p3/p4: sort label; compact right-aligned sort select on desktop */
.sort-lbl { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (min-width: 992px) {
  .toolbar .container { justify-content: flex-end; }
  .toolbar .sort-lbl { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; margin: 0; font-weight: 600; font-size: 15px; }
  .toolbar select { flex: 0 0 auto; width: auto; min-width: 240px; }
}
/* p5: search without results */
.no-results { background: var(--white); border-radius: var(--r-card); padding: 20px; margin-top: 8px; }
.no-results .h3 { font-size: 20px; margin: 16px 0 8px; }
.chips-wrap { flex-wrap: wrap; overflow: visible; }
/* p6: «Προσθήκη» full card width */
.card > form { width: 100%; }
/* M6: toast with an action link */
.toast { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; text-align: center; }
.toast-act { color: var(--coral); font-weight: 800; background: none; border: 0; padding: 6px 4px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; min-height: 32px; }
.toast-act:hover { color: var(--white); }
/* m8/p9: shorter cookie banner on phones, Accept/Reject equal and side by side, no wrapping */
.ck-title { font-size: 19px; margin: 0 0 4px; }
.ck-text { margin: 0; font-size: 15px; line-height: 1.45; }
.cookie-sheet { padding: 14px 16px; }
.cookie-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cookie-actions .btn { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; white-space: nowrap; }
#ck-open { min-height: 44px; display: block; margin: 2px auto 0; }
@media (min-width: 992px) {
  .cookie-sheet .container > div:last-child { flex: 0 0 380px; }
  .cookie-actions .btn { padding: 10px 22px; }
}

/* ===================== Round 2 (reference/2026-10-24_ux-re-review.md) ===================== */
/* N1: toast as a compact bar at the bottom, as wide as its text (up to the screen width minus 16 px each side), one line where possible.
   left:50% + translateX capped its width at half the screen (tall, clipped blob on phones). */
.toast { left: 16px; right: 16px; margin-inline: auto; width: fit-content; max-width: calc(100vw - 32px); transform: none;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 16px; padding: 10px 16px; min-height: 48px; line-height: 1.35; font-size: 16px;
  flex-wrap: nowrap; text-align: left; box-shadow: 0 8px 24px rgba(20, 38, 29, .3); }
.toast > span { min-width: 0; }
.toast-act { flex: none; white-space: nowrap; min-height: 40px; padding: 4px 6px; }
/* product page: above the sticky add-to-cart bar */
body:has(.sticky-buy.show) .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* N4: in-cart stepper aligned with the «Προσθήκη» button (the margin was applied twice: .card-incart and .card form .qty) */
.card .card-incart .qty { margin: 0; width: 100%; }
/* N9: product page «in cart» controls (shown by miniShop3 with style.display) */
.pdp-incart { display: none; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0; }
.pdp-incart p { margin: 0; }
/* N8: no orange «0» badge on an empty cart; the number stays for screen readers («0 προϊόντα στο καλάθι») */
.cart-count.is-empty { position: absolute !important; width: 1px; height: 1px; min-width: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Round 4 R2-3: toast on one line at 360/390: «Προστέθηκε · Δείτε το καλάθι» (the ending « στο καλάθι» only from 480 px); the «·» is its own flex item, never alone on a line */
.toast-sep { flex: none; opacity: .7; }
@media (max-width: 479px) { .toast-tail { display: none; } .toast { padding-inline: 14px; } }
/* Round 4 R2-2: sticky add bar once the product is in the cart: «Στο καλάθι» + «Δείτε το καλάθι» (opens the drawer) */
.sticky-buy.in-cart .btn { white-space: nowrap; }
/* Round 4: vendor logo on the product page (width/height attributes set in the template, no layout shift) */
.pdp-vendor { margin: 0 0 6px; display: flex; align-items: center; min-height: 32px; }
.pdp-vendor img { display: block; height: 32px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }

/* Round 3: home ribbon with 4 delivery/returns items, spread evenly on desktop */
@media (min-width: 992px) { .ribbon ul { justify-content: space-between; } }

/* Round 4 check: F1 in-cart stepper must not widen its grid column; F3 toast edge over the dark footer */
.card-incart .qty input { width: 0; }
.toast { border: 1px solid rgba(243, 236, 224, .25); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

/* ---------- Fix round 2026-10-25 (real catalogue) ---------- */
/* M4: product photos are packshots: show them whole (no crop) on a light square box; fixed aspect box, so no layout shift */
.card-imgwrap { aspect-ratio: 1 / 1; background: var(--white); border-bottom: 1px solid var(--line); }
.card-media img { object-fit: contain; }
.card:hover .card-media img { transform: none; }
.gallery-main { aspect-ratio: 1 / 1; background: var(--white); border: 1px solid var(--line); }
.gallery-main img { object-fit: contain; }
.thumbs img { height: 64px; object-fit: contain; background: var(--white); }
.cart-line img { height: 80px; object-fit: contain; background: var(--white); }
.mc-line img { height: 56px; object-fit: contain; background: var(--white); }
/* m1: names up to 4 lines on phones, 3 above, so «150 gr» / «500 gr» and the brand-specific end stay visible */
.card-name { -webkit-line-clamp: 3; }
@media (max-width: 479px) { .card-name { -webkit-line-clamp: 4; } }
/* M1: «Επιλογή μεγέθους» is a link styled by `.card .btn` (above the stretched link, same size as «Προσθήκη») */
.card-choose { text-align: center; }
/* m3/m4: visible option labels in the cart; one-value options as text on the product page */
.opt-lbl { display: block; font-size: 14px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.opt-fixed { display: flex; align-items: baseline; gap: 6px; min-height: 48px; }
.opt-fixed .opt-lbl { display: inline; margin: 0; }
/* m5: desktop mega-menu content inside the page gutter; sub-categories of a one-category group slightly indented */
@media (min-width: 992px) { .mega-inner { padding-left: 24px; padding-right: 24px; } }
.mega-links .sub a { font-weight: 500; padding-left: 12px; }
/* p5: breadcrumb separator stays at the end of the line, never at the start of a wrapped line */
.breadcrumb li + li::before { content: none; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 4px; color: var(--muted); }
/* p1: vendor logo readable, with the name as text next to it */
.pdp-vendor { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.pdp-vendor img { height: 44px; max-width: 176px; }
/* M5: hero slide without an image: no empty block above the text */
.hero-slider:not(:has(.hs-slide:not(.no-art))) .hs-track { height: clamp(360px, 92vw, 440px); }
.hs-slide.no-art .hs-copy { justify-content: center; padding-bottom: 56px; }
@media (max-width: 599px) {
  /* p5: on phones the current page is hidden on product pages, so the last visible item has no trailing «/» */
  .pdp-page .breadcrumb li:nth-last-child(2)::after { content: none; }
}

/* 2026-10-25: article number (SKU) on the product page and on cards */
.pdp-sku { margin: 2px 0 8px; letter-spacing: .02em; }
.card-sku { font-size: 13px; color: var(--muted); min-height: 1.4em; margin-top: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* N3 (2026-10-25): wrapped chip lists (empty search) stay inside the card on small phones: long names wrap */
.chips-wrap li { max-width: 100%; min-width: 0; }
.chips-wrap a { white-space: normal; max-width: 100%; text-align: left; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
/* N1 (2026-10-25): cart lines of a product with a size/colour choice, under the add form */
.pdp-lines { margin: 8px 0 0; }