/* kerion-eshop/server/public/css/site.css
   Προσθήκες πάνω στο design, για ό,τι δεν υπήρχε στα mockups:
   πραγματικές φωτογραφίες (το design είχε μόνο εικονογραφήσεις) και σύνδεσμοι στη θέση κουμπιών. */

/* ---- φωτογραφίες στα πλαίσια του design ---- */
.pcard-art.has-img{padding:0;overflow:hidden;background:var(--paper)}
.pcard-art img,.g-slide img,.g-thumb img,.cat-art img,.mini img,.qa-art img,.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pcard-art.has-img img{transition:transform .5s ease}
.pcard:hover .pcard-art.has-img img{transform:scale(1.03)}
.pcard.soldout .pcard-art img{opacity:.55;filter:grayscale(.6)}
.g-slide.has-img{padding:0;background:var(--paper)}
.g-thumb.has-img{padding:0;overflow:hidden;background:var(--paper)}
.mini img,.qa-art img{border-radius:8px}
.season-item .mini:has(img),.same-card .mini:has(img){padding:0;overflow:hidden}
.cat-art:has(img){padding:0}
.cat-art img{border-radius:inherit}
.hero-photo{border-radius:var(--r-lg,24px);overflow:hidden;aspect-ratio:4/5;max-width:440px;width:100%;justify-self:center}

/* ---- σύνδεσμοι αντί για κουμπιά ---- */
a.ctab{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
a.ctab[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
a.chipx{color:inherit;text-decoration:none}
a.clear-all{color:inherit}
a.same-card{color:inherit;text-decoration:none}
a.same-card:hover{border-color:var(--line)}

/* ---- αρχική: εναλλαγή οικογενειών στο «Βρες το άρωμά σου» ---- */
.finder-panel[hidden]{display:none}

/* ---- μηνύματα ---- */
.form-msg.err{color:#8E2F44;background:#F7E1E5;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:.92rem}

/* ---- διαθεσιμότητα του σταθερού κουμπιού στο κινητό ---- */
.sticky-buy button[disabled]{opacity:.5;cursor:not-allowed}

/* ---- Ε6β: καλάθι, νομικά, επικοινωνία ---- */
/* Το προεπιλεγμένο (αόρατο) κουμπί της φόρμας ποσότητας: ισχυρότερο από το «.qty button» του design. */
.qty button.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.line-ctl form{margin:0}
form.chip-on{margin:10px 0 0}
a.lnav{display:block;text-decoration:none}
/* πεδίο-παγίδα για bots στη φόρμα επικοινωνίας */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cart-top .form-msg.err{margin-top:12px}
#cartRoot[aria-busy="true"]{opacity:.6;transition:opacity .15s}

/* ---- Ε6δ: φωτογραφίες στα πλαίσια .ph του design (ιστορία, πώς φτιάχνεται, εργαστήριο, blog) ---- */
.ph.ph-img{padding:0;overflow:hidden;background:var(--paper);display:block}
.ph.ph-img img{display:block;width:100%;height:100%;object-fit:cover}
/* κατηγορίες blog ως σύνδεσμοι: ίδιο στυλ με τα «πατημένα» chips του design */
a.chip{color:inherit;text-decoration:none}
a.chip[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.post-page .k a,.page-top .k a{color:inherit;text-decoration:none}

/* ---- Ε7α: ταμείο και παραγγελία ---- */
.lockers li.muted{padding:12px 4px;color:var(--ink-soft);list-style:none}
.res-box .iban{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.res-card .res-box+.res-box{margin-top:10px}

/* ---- Ε10: σελίδα αξιολόγησης ---- */
.review-form .rv-block{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:22px 0 14px;text-align:left;min-width:0}
/* ο τίτλος του προϊόντος μέσα στην κάρτα (όχι πάνω στο περίγραμμα): το float βγάζει το legend από τη γραμμή του fieldset */
.review-form .rv-head{float:left;width:100%;padding:0;margin:0 0 6px;display:flex;align-items:center;gap:14px}
.review-form .rv-head + *{clear:both}
.rv-thumb{flex:none;width:56px;height:68px;border-radius:10px;display:grid;place-items:center;padding:6px;overflow:hidden}
.rv-thumb svg{width:100%;height:100%}
.rv-thumb picture,.rv-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.rv-thumb:has(img){padding:0}
.rv-name{display:grid;gap:2px;min-width:0}
.rv-name strong{font-weight:600;line-height:1.3}
.rv-name a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.rv-name a:hover{text-decoration-color:currentColor}
.rv-name small{color:var(--ink-soft);font-size:.88rem}
.review-form .f{text-align:left}
.review-form .opt{font-weight:400;color:var(--ink-soft);font-size:.88rem}
.review-form .rv-author{margin-top:18px}
/* η λέξη δίπλα στα αστέρια (Κακό…Εξαιρετικό): ακολουθεί την επιλογή, και το ποντίκι όσο περνά από πάνω */
.rv-rate{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:4px 0 8px}
.rv-rate .star-input{margin:0}
.star-say{font-weight:600;font-size:.95rem;color:var(--ink)}
.star-say > [data-n]{display:none}
.star-say > [data-n="0"]{display:inline;font-weight:400;color:var(--ink-soft)}
.rv-rate:has(input:checked) .star-say > [data-n="0"]{display:none}
.rv-rate:has(input[value="1"]:checked) .star-say > [data-n="1"],
.rv-rate:has(input[value="2"]:checked) .star-say > [data-n="2"],
.rv-rate:has(input[value="3"]:checked) .star-say > [data-n="3"],
.rv-rate:has(input[value="4"]:checked) .star-say > [data-n="4"],
.rv-rate:has(input[value="5"]:checked) .star-say > [data-n="5"]{display:inline}
@media (hover:hover){
  .rv-rate:has(.star-input label:hover) .star-say > [data-n]{display:none}
  .rv-rate:has(.star-input label[for$="-1"]:hover) .star-say > [data-n="1"],
  .rv-rate:has(.star-input label[for$="-2"]:hover) .star-say > [data-n="2"],
  .rv-rate:has(.star-input label[for$="-3"]:hover) .star-say > [data-n="3"],
  .rv-rate:has(.star-input label[for$="-4"]:hover) .star-say > [data-n="4"],
  .rv-rate:has(.star-input label[for$="-5"]:hover) .star-say > [data-n="5"]{display:inline}
}
/* αστέρια σε φυσική σειρά 1→5 (τα βέλη του πληκτρολογίου πάνε προς τη σωστή κατεύθυνση):
   όλα φωτίζονται, και όσα είναι μετά το επιλεγμένο (ή μετά αυτό που δείχνει το ποντίκι) σβήνουν */
.star-input{display:inline-flex;gap:2px;margin:6px 0 10px}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{cursor:pointer;width:36px;height:36px;display:grid;place-items:center}
.star-input label::before{content:"★";font-size:30px;line-height:1;color:var(--line);transition:color .12s}
.star-input:has(input:checked) label::before{color:var(--flame)}
.star-input input:checked + label ~ label::before{color:var(--line)}
.star-input:hover label::before{color:var(--flame)}
.star-input label:hover ~ label::before{color:var(--line)}
.star-input input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
/* στο κινητό: αστέρια 44px, να πατιούνται άνετα με το δάχτυλο */
@media (max-width:600px){
  .star-input label{width:44px;height:44px}
  .star-input label::before{font-size:36px}
  .review-form .rv-block{padding:14px}
  .rv-thumb{width:48px;height:58px}
  .star-say{flex-basis:100%;padding-left:4px}
}
/* ο τίτλος των καρτών αποτελέσματος (παραγγελία, πληρωμή, αξιολόγηση) είναι ο κύριος τίτλος της σελίδας: h1 με το στυλ του h2 του design */
.res-card h1.res-title{font-size:1.8rem;line-height:1.2}

/* ---- Ε13: κεφαλίδα με πολλές κατηγορίες ---- */
/* Το design είχε 3 κατηγορίες σε μία σειρά. Με περισσότερες, οι πρώτες μένουν στην κεφαλίδα
   και οι υπόλοιπες πάνε στο «Περισσότερα». Τα εικονίδια δεν στριμώχνονται ποτέ. */
.hdr-in{flex-wrap:nowrap}
.logo{flex:0 0 auto}
.nav{min-width:0}
.tools{flex:0 0 auto;margin-left:auto}
@media (min-width:861px){
  .nav{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;overflow:visible}
  .nav > a{white-space:nowrap}
}
/* Θωράκιση: σε κάποιες σελίδες (π.χ. κατάστημα) το details/summary έπαιρνε display:flex από αλλού
   και το «Περισσότερα» ψήλωνε, σπρώχνοντας το μενού σε δεύτερη γραμμή. */
.hdr .nav-more{position:relative;display:block;align-self:center}
.hdr .nav-more > summary{display:inline-flex;align-items:center;line-height:1.6}
.nav-more{position:relative}
.nav-more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:.95rem;white-space:nowrap}
.nav-more > summary::-webkit-details-marker{display:none}
.nav-more > summary:hover{color:var(--flame-text)}
.nav-more > summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.nav-more .chev{width:16px;height:16px;transition:transform .15s}
.nav-more[open] .chev{transform:rotate(180deg)}
.nav-more-panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px rgba(42,28,45,.14)}
.nav-more-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.nav-more-grid{display:grid;gap:4px 26px}
.nav-more-grid a{padding:6px 0;font-size:.95rem;white-space:nowrap}
.nav-more-all{display:inline-block;margin-top:10px;font-weight:600;color:var(--flame-text)}
@media (min-width:861px){
  /* ξεκινά λίγο κάτω από την κάτω ακμή της κεφαλίδας, όχι κολλητά στο «Περισσότερα» */
  .nav-more-panel{position:absolute;top:calc(100% + 27px);left:50%;transform:translateX(-50%);z-index:60;min-width:340px}
  .nav-more-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* στο συρτάρι του κινητού φαίνονται όλες οι κατηγορίες, χωρίς πάνελ */
  .nav-more{border-bottom:1px solid var(--line)}
  .nav-more > summary{padding:14px 0;font-size:1.1rem;width:100%;justify-content:space-between}
  .nav-more-panel{border:0;box-shadow:none;padding:0 0 10px;background:transparent}
  .nav-more-title{display:none}
  .nav-more-grid a{font-size:1.05rem;padding:10px 0 10px 14px;border-bottom:1px solid var(--line)}
  .nav-more-all{padding-left:14px}
}

/* ---- Ε13: σταθερό ύψος hero ---- */
/* Άλλες διαφάνειες έχουν φωτογραφία και άλλες εικονογράφηση: χωρίς σταθερό πλαίσιο, το ύψος «πηδούσε». */
.hero-art{height:min(470px,52vh)}
.hero-art svg{width:auto;height:100%;max-width:100%}
.hero-photo{aspect-ratio:auto;height:100%;max-width:min(400px,100%)}
/* Σταθερός αριθμός γραμμών για τίτλο και κείμενο: έτσι το ύψος δεν εξαρτάται από το μήκος τους,
   και καμία διαφάνεια δεν «τραβάει» το hero ψηλότερα ή χαμηλότερα. */
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero-copy h1{line-height:1.06;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(4 * 1.06em)}
.hero-copy p{line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.5em)}
@media (max-width:900px){
  /* Σταθερό ύψος και στο κινητό, είτε η διαφάνεια έχει φωτογραφία-φόντο είτε εικονογράφηση
     (με φόντο η εικονογράφηση κρύβεται, και χωρίς αυτό το ελάχιστο το hero «μάζευε» κατά 300px). */
  .hero-in{min-height:clamp(600px,78vh,720px)}
  .hero-art{height:min(258px,34vh)}
  .hero-copy h1{-webkit-line-clamp:3;min-height:calc(3 * 1.06em)}
}
@media (max-width:560px){
  /* Τα δύο κουμπιά πάντα το ένα κάτω από το άλλο: αλλιώς, ανάλογα με το μήκος της ετικέτας κάθε
     διαφάνειας, χωρούσαν σε μία ή σε δύο σειρές και το hero άλλαζε ύψος. Βολεύει και στο δάχτυλο. */
  .hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* ---- Ε13/Ε15: κάρτες κατηγοριών (πυκνό πλέγμα, χωρίς κενά) ---- */
.cat-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ctile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:330px;padding:18px;border-radius:var(--r-lg,24px);overflow:hidden;background:var(--tint,#EDE6EE);color:var(--ink);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
@media (max-width:620px){.ctile{min-height:240px;padding:14px}}
.ctile:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(42,28,45,.14)}
.ctile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Η εικονογράφηση γεμίζει την κάρτα· από κάτω σβήνει μέσα στο χρώμα, ώστε να διαβάζεται το κείμενο. */
.ctile .c-art{position:absolute;left:0;right:0;top:0;bottom:34%;display:grid;place-items:center;padding:16px;transition:transform .35s ease}
.ctile .c-art svg{height:100%;width:auto;max-width:100%}
.ctile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,var(--tint,#EDE6EE) 58%,rgba(255,255,255,0) 100%);pointer-events:none}
.ctile:hover .c-art{transform:scale(1.05)}
.ctile .c-body{position:relative;z-index:1;display:flex;flex-direction:column}
.ctile .c-name{font-size:1.15rem;line-height:1.2;font-weight:600}
.ctile .c-desc{margin-top:6px;font-size:.88rem;opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctile .c-go{margin-top:10px;font-size:.86rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--flame-text)}
.ctile .c-go svg{width:15px;height:15px;transition:transform .18s}
.ctile:hover .c-go svg{transform:translateX(3px)}
/* Με φωτογραφία: γεμίζει την κάρτα, με σκούρα σκίαση και λευκά γράμματα. */
.ctile:has(img){color:var(--paper)}
.ctile:has(img) .c-art{inset:0;padding:0}
.ctile:has(img) .c-art img{width:100%;height:100%;object-fit:cover}
.ctile:has(img)::after{height:72%;background:linear-gradient(to top,rgba(20,12,22,.85) 0%,rgba(20,12,22,.35) 45%,rgba(20,12,22,0) 100%)}
.ctile:has(img) .c-go{color:var(--paper)}

/* ---- Ε14: κεφαλίδα, χειριστήρια hero, ενότητες κατηγοριών, κίνηση ---- */
@media (min-width:861px){
  /* Τρεις στήλες: λογότυπο αριστερά, μενού στο ΚΕΝΤΡΟ ΤΗΣ ΣΕΛΙΔΑΣ, εικονίδια δεξιά.
     (Με απλό flex, το μενού κεντραριζόταν στον χώρο που περίσσευε και έπεφτε 40 περίπου pixel αριστερά.) */
  /* minmax(0,…): οι πλαϊνές στήλες υποχωρούν, ώστε το μενού να μη σπάει σε δεύτερη γραμμή
     (π.χ. στις σελίδες καταστήματος, όπου η ενεργή κατηγορία γράφεται με έντονα και πιάνει λίγο παραπάνω). */
  .hdr-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
  .nav{justify-content:center;flex-wrap:nowrap;gap:18px}
  .nav > a,.nav-more > summary{white-space:nowrap}
  .logo{white-space:nowrap}
  .tools{margin-left:0;justify-self:end}
}
/* Πάνελ «Περισσότερα»: γραμμές με μικρό εικονίδιο, αντί για γυμνή λίστα */
.nav-more-panel{padding:14px}
@media (min-width:861px){.nav-more-panel{min-width:430px}}
.nav-more-grid{gap:2px 10px}
.nav-more-grid a{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;transition:background .15s,transform .15s}
.nav-more-grid a:hover{background:var(--wax);transform:translateX(2px)}
.m-art{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;padding:5px}
.m-art svg{width:100%;height:100%}
.m-name{min-width:0}
.nav-more-all{display:inline-flex;align-items:center;gap:6px;margin:10px 0 2px;padding:9px 14px;border-radius:999px;background:var(--ink);color:var(--paper)}
/* Το «.nav a:hover{color:flame}» του design είναι πιο ειδικό και έκανε το κείμενο ίδιο χρώμα με το φόντο. */
.hdr .nav-more-all:hover,.hdr .nav-more-all:focus-visible{background:var(--flame-deep);color:var(--paper)}
.nav-more-all svg{width:15px;height:15px;transition:transform .18s}
.nav-more-all:hover svg{transform:translateX(3px)}
@media (max-width:860px){.nav-more-all{background:transparent;color:var(--flame-text);padding:10px 0}}

/* Χειριστήρια hero: κεντραρισμένα κάτω από το hero, όχι αριστερά */
.hero{position:relative}
.hero-ctrl{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;margin:0}
@media (max-width:900px){.hero-ctrl{bottom:14px}}

/* Ενότητα 2: φαρδιές κάρτες */
.sec-tight{padding-top:0}
.cat-rows{display:grid;gap:12px}
@media (min-width:760px){.cat-rows{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1180px){.cat-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.crow{display:grid;grid-template-columns:118px minmax(0,1fr) 24px;align-items:center;gap:18px;padding:22px 20px;min-height:168px;border-radius:var(--r-lg,24px);background:var(--tint,#EDE6EE);color:var(--ink);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.crow:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(42,28,45,.13)}
.crow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cr-art{height:118px;display:grid;place-items:center;transition:transform .3s ease}
.cr-art svg{height:100%;width:auto}
.cr-art img{width:118px;height:118px;object-fit:cover;border-radius:16px}
.crow:hover .cr-art{transform:scale(1.06) rotate(-2deg)}
.cr-body{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (max-width:620px){
  /* στο κινητό μικρότερη εικόνα και padding: αλλιώς η γραμμή δεν χωρούσε και η σελίδα κυλούσε οριζόντια */
  .crow{grid-template-columns:76px minmax(0,1fr) 18px;gap:12px;padding:14px;min-height:126px}
  .cr-art{height:76px}
  .cr-art img{width:76px;height:76px}
  .cchip{padding:14px;min-height:110px;gap:12px}
  .ch-art{width:64px;height:64px;flex:0 0 64px;border-radius:16px}
}
.crow .c-name{font-size:1.1rem}
.crow .c-desc{-webkit-line-clamp:2;margin-top:4px;font-size:.9rem}
.cr-go{display:grid;place-items:center;color:var(--flame-deep);transition:transform .18s}
.cr-go svg{width:18px;height:18px}
.crow:hover .cr-go{transform:translateX(4px)}

/* Ενότητα 3: κανονικές, ευανάγνωστες κάρτες (τα μικρά κουμπάκια «χάνονταν» δίπλα στις υπόλοιπες ενότητες) */
/* Κεντραρισμένα: όταν δεν γεμίζουν τη σειρά, μένουν στη μέση αντί να «κρέμονται» αριστερά. */
.cat-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cat-chips > *{flex:1 1 260px;max-width:340px}
@media (max-width:620px){.cat-chips > *{flex:1 1 100%;max-width:none}}
.cchip{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-lg,24px);background:var(--tint,#EDE6EE);color:var(--ink);text-decoration:none;font-weight:600;min-height:126px;transition:transform .16s ease,box-shadow .16s ease}
.cchip:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(42,28,45,.13)}
.cchip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ch-art{width:80px;height:80px;flex:0 0 80px;border-radius:18px;background:rgba(255,255,255,.55);display:grid;place-items:center;padding:8px;transition:transform .3s ease}
.cchip:hover .ch-art{transform:scale(1.06)}
.ch-art svg{width:100%;height:100%}
.ch-art img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.cchip .c-name{font-size:1.02rem;line-height:1.25;flex:1;min-width:0}
.cchip > svg{width:16px;height:16px;color:var(--flame-deep);flex:0 0 16px;transition:transform .18s}
.cchip:hover > svg{transform:translateX(3px)}

/* ---- Ε14: εμφάνιση με κύλιση ---- */
/* Το JavaScript βάζει το data-reveal: χωρίς JavaScript όλα φαίνονται κανονικά από την αρχή. */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
/* Οι κάρτες μέσα σε μια ενότητα έρχονται η μία μετά την άλλη, μόλις εμφανιστεί η ενότητα. */
[data-reveal] .ctile,[data-reveal] .crow,[data-reveal] .cchip,[data-reveal] .pcard,[data-reveal] .post-card,[data-reveal] .trust li{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in .ctile,[data-reveal].in .crow,[data-reveal].in .cchip,[data-reveal].in .pcard,[data-reveal].in .post-card,[data-reveal].in .trust li{opacity:1;transform:none}
[data-reveal].in :is(.ctile,.crow,.cchip,.pcard,.post-card):nth-child(2){transition-delay:.07s}
[data-reveal].in :is(.ctile,.crow,.cchip,.pcard,.post-card):nth-child(3){transition-delay:.14s}
[data-reveal].in :is(.ctile,.crow,.cchip,.pcard,.post-card):nth-child(4){transition-delay:.21s}
[data-reveal].in :is(.ctile,.crow,.cchip,.pcard,.post-card):nth-child(n+5){transition-delay:.28s}

/* ---- Ε14: πιο ζωντανά hover ---- */
.pcard,.post-card,.card-link{transition:transform .18s ease,box-shadow .18s ease}
.pcard:hover,.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(42,28,45,.14)}
.pcard img,.post-card img{transition:transform .45s ease}
.pcard:hover img,.post-card:hover img{transform:scale(1.04)}
.btn{transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.icon-btn{transition:transform .16s ease,background .16s ease}
.icon-btn:hover{transform:translateY(-1px) scale(1.06)}
.trust li{transition:transform .2s ease}
.trust li:hover{transform:translateY(-2px)}

/* ---- Ε14: κουμπί «πάνω» ---- */
/* Το «hidden» πρέπει να νικά το display:grid, αλλιώς το κουμπί μένει αόρατο αλλά πατιέται, και φαίνεται χωρίς JavaScript. */
.to-top[hidden]{display:none}
.to-top{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(42,28,45,.18);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,background .16s}
.to-top.show{opacity:1;transform:none}
.to-top:hover{background:var(--ink);color:var(--paper)}
.to-top:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.to-top svg{width:22px;height:22px}
@media (max-width:640px){.to-top{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:44px;height:44px}}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal] :is(.ctile,.crow,.cchip,.pcard,.post-card,.trust li){opacity:1;transform:none;transition:none}
  .pcard:hover,.post-card:hover,.btn:hover,.icon-btn:hover,.ctile:hover,.crow:hover,.cchip:hover,.trust li:hover{transform:none}
  .pcard:hover img,.post-card:hover img,.crow:hover .cr-art,.ctile:hover .c-art{transform:none}
  .to-top{transition:none}
}

/* ---- Ε15: λιγότερο κενό ανάμεσα στις ενότητες κατηγοριών ---- */
.sec.gifts,.sec.sec-tight{padding-top:0}
.sec.gifts .sec-head{margin-bottom:14px}
.sec.sec-tight .sec-head{margin-bottom:26px}

/* ---- Ε16: κατηγορίες καταστήματος σε γραμμές ---- */
/* Το design τις είχε σε οριζόντια κύλιση (για 3 κατηγορίες). Με πολλές, κρύβονταν δεξιά. */
@media (min-width:761px){
  .cat-tabs.m-scroll{flex-wrap:wrap;overflow-x:visible;margin-left:0;margin-right:0;padding:0;row-gap:10px}
  .cat-tabs.m-scroll > *{flex:0 0 auto}
}

/* ---- Ε19: φωτογραφία ως φόντο στο hero ---- */
/* Όποια διαφάνεια έχει φωτογραφία, τη δείχνει σε όλο το πλάτος, με σκούρα βαθμίδα ώστε να
   διαβάζονται τίτλος και κουμπιά. Όποια δεν έχει, κρατά την εικονογράφηση του design. */
.hero-bgs{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-bg.on{opacity:1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
/* η βαθμίδα: πυκνή αριστερά (κείμενο), ανοιχτή δεξιά (το κερί) */
.hero-bgs::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(42,28,45,.92) 0%,rgba(42,28,45,.8) 36%,rgba(42,28,45,.46) 60%,rgba(42,28,45,.14) 100%)}
.hero-in{position:relative;z-index:1}
.hero.bg-on .hero-art{display:none}
.hero.bg-on .hero-in{grid-template-columns:minmax(0,1fr)}
.hero.bg-on .hero-copy{max-width:min(620px,100%)}
/* δικλίδα αν μια φωτογραφία βγει φωτεινότερη από το αναμενόμενο */
.hero.bg-on .hero-copy h1,.hero.bg-on .hero-copy p{text-shadow:0 1px 16px rgba(20,12,22,.5)}
@media (max-width:900px){
  /* στο κινητό το hero είναι κάθετο: η εικόνα κεντράρεται και η βαθμίδα πέφτει από πάνω προς τα κάτω */
  .hero-bg img{object-position:60% 45%}
  .hero-bgs::after{background:linear-gradient(to bottom,rgba(42,28,45,.9) 0%,rgba(42,28,45,.62) 42%,rgba(42,28,45,.58) 62%,rgba(42,28,45,.88) 100%)}
  .hero.bg-on .hero-copy{max-width:none}
}
@media (prefers-reduced-motion:reduce){.hero-bg{transition:none}}

/* ---- Ε21: banner cookies ---- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(42,28,45,.14);padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px))}
.ck[hidden]{display:none}
.ck-in{max-width:1240px;margin:0 auto;padding:0 var(--gut,20px);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ck-text p{margin:4px 0 0;font-size:.9rem;color:var(--muted);max-width:70ch}
.ck-btns{display:flex;gap:10px;flex-wrap:wrap}
.ck-prefs{max-width:620px;margin:16px auto 0;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--wax)}
.ck-prefs[hidden]{display:none}
.ck-prefs h2{font-size:1.1rem;margin:0 0 12px}
.ck-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.ck-row input{margin-top:3px;width:18px;height:18px;flex:0 0 18px}
.ck-row small{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.ck-prefs .ck-btns{margin-top:14px;justify-content:flex-end}
@media (max-width:760px){.ck-in{flex-direction:column;align-items:stretch}.ck-btns .btn{flex:1 1 auto;justify-content:center}}

/* ---- Ε21: αναδυόμενο newsletter ---- */
.nl-pop{border:0;border-radius:22px;padding:30px 28px;max-width:420px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);box-shadow:0 30px 70px rgba(42,28,45,.3)}
.nl-pop::backdrop{background:rgba(20,12,22,.55)}
.nl-pop h2{font-size:1.45rem;line-height:1.2;margin:0 0 8px;padding-right:24px}
.nl-pop p{margin:0 0 16px;color:var(--muted)}
.nl-pop form{display:grid;gap:10px}
.nl-pop input[type=email]{padding:13px 16px;border-radius:999px;border:1px solid var(--line);font:inherit;width:100%}
.nl-pop input[name=website]{position:absolute;left:-9999px}
.nl-pop small{display:block;margin-top:10px;color:var(--muted);font-size:.8rem}
.nl-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted)}
.nl-x:hover{background:var(--wax);color:var(--ink)}

/* ---- Ε21: ενότητα newsletter στην αρχική ---- */
.nl-card{display:grid;gap:22px;align-items:center;background:var(--ink);color:var(--paper);border-radius:var(--r-lg,24px);padding:clamp(24px,3vw,40px)}
@media (min-width:880px){.nl-card{grid-template-columns:1.1fr 1fr}}
.nl-card h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;margin:0}
.nl-card p{margin:10px 0 0;color:#CFC3D0;max-width:46ch}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input[type=email]{flex:1 1 220px;min-width:0;padding:13px 16px;border-radius:999px;border:1px solid rgba(242,237,241,.3);background:rgba(242,237,241,.1);color:var(--paper);font:inherit}
.nl-form input[type=email]::placeholder{color:rgba(242,237,241,.6)}
.nl-form input[name=website]{position:absolute;left:-9999px}
.nl-form small{flex:1 1 100%;color:rgba(242,237,241,.72);font-size:.82rem}


/* ---- Ε24: σύντομο μήνυμα στην κορυφή ---- */
.flash{margin:16px auto;max-width:1240px;padding:14px 18px;border-radius:14px;background:#E3F1E6;color:#2c6b3a;font-weight:600;transition:opacity .4s}
.flash.bad{background:#FBE7E7;color:#8a2c2c}
.flash.out{opacity:0}

/* ---- Ε26: κίνηση προσθήκης στο καλάθι ---- */
.fly-ghost{box-shadow:0 18px 40px rgba(42,28,45,.28)}
@keyframes badgePop{0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}}
#cartCount.pop{animation:badgePop .5s cubic-bezier(.3,.7,.4,1)}

/* ---- Ε26: μεταβάσεις σελίδων ---- */
/* Ο browser που το υποστηρίζει κάνει απαλό πέρασμα αντί για «αναβόσβημα». Οι υπόλοιποι δεν επηρεάζονται. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .18s ease both}
::view-transition-new(root){animation:vtIn .28s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ---- Ε26: σκελετοί φόρτωσης ---- */
.sk{position:relative;overflow:hidden;background:var(--wax);border-radius:var(--r-md,16px)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:skShine 1.2s infinite}
@keyframes skShine{100%{transform:translateX(100%)}}
.sk-card{min-height:330px}
.sk-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

@media (prefers-reduced-motion:reduce){
  #cartCount.pop{animation:none}
  .sk::after{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---- Ε26: κενές καταστάσεις ---- */
.empty,.empty-box{animation:emptyIn .4s ease both}
@keyframes emptyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.empty-art{width:120px;height:120px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:var(--wax)}
.empty-art svg{width:64px;height:64px;color:var(--flame)}
.empty-tips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.empty-tips a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:.9rem}
.empty-tips a:hover{background:var(--wax)}

/* ---- Ε26: προσβασιμότητα ---- */
/* Ορατή εστίαση παντού με το πληκτρολόγιο, και ποτέ κρυμμένη κάτω από την κεφαλίδα. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
html{scroll-padding-top:96px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.empty,.empty-box{animation:none}}

/* =====================================================================
   UX1: κοινό πλαίσιο (κεφαλίδα, αναζήτηση, συρτάρι, υποσέλιδο) και αρχική
   ===================================================================== */

/* Το --muted χρησιμοποιούνταν (cookies, newsletter, «Περισσότερα») χωρίς να έχει οριστεί πουθενά,
   οπότε τα «απαλά» κείμενα έβγαιναν στο ίδιο σκούρο χρώμα με τα κανονικά. */
:root{--muted:var(--ink-soft)}

/* ---- μπάρα ανακοίνωσης: όλη η μπάρα είναι σύνδεσμος, και στο κινητό χωράει σε μία γραμμή ---- */
.announce a{color:inherit;text-decoration:none;display:block}
.announce .announce-more{color:var(--flame);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.announce a:hover .announce-more{color:#f0b456}
@media (max-width:600px){
  .announce{font-size:.8rem;padding-top:calc(7px + env(safe-area-inset-top,0px));padding-bottom:7px}
  .announce a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .announce .announce-more{display:none}
}

/* ---- συρτάρι κινητού ---- */
.nav-extra,.nav-scrim{display:none}
@media (max-width:900px){
  /* κυλά μέσα του όταν οι κατηγορίες δεν χωρούν (πριν κοβόταν το κάτω μέρος) */
  .nav{overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,12,22,.45)}
  .nav-scrim[hidden]{display:none}
  html.nav-lock,html.nav-lock body{overflow:hidden}
  /* Το «Περισσότερα» ήταν κεντραρισμένο και, με μακριά ονόματα κατηγοριών, ξεχείλιζε και από τις δύο
     πλευρές: το «Π» κοβόταν αριστερά και το βελάκι έβγαινε έξω δεξιά. */
  .hdr .nav-more{align-self:stretch;min-width:0}
  .hdr .nav-more > summary{display:flex;width:100%}
  .nav-more-grid{grid-template-columns:minmax(0,1fr)}
  .nav-more-grid a{white-space:normal;border-radius:0;padding:10px 0 10px 4px}
  .nav-more-grid a:hover{transform:none}
  .nav-more-all{margin-left:4px}
  .nav .nav-more-all{border-bottom:0} /* το περίγραμμα των συνδέσμων του συρταριού έβγαινε σαν καμπύλη κάτω από το «χάπι» */
  .nav-extra{display:grid;gap:2px;margin-top:22px;padding:8px 14px;background:var(--wax);border-radius:16px}
  .nav .nav-extra a{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav .nav-extra a:last-child{border-bottom:0}
  .nav-extra svg{width:20px;height:20px;flex:none;color:var(--flame-deep)}
  .nav-count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--flame);font-size:.75rem;font-weight:700;display:grid;place-items:center}
  .nav-count[hidden]{display:none}
}

/* ---- πάνελ αναζήτησης ---- */
.srch{position:absolute;left:0;right:0;top:100%;z-index:45;background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -18px rgba(42,28,45,.25);padding:18px 0 22px;max-height:calc(100vh - 120px);overflow-y:auto}
.srch[hidden],.srch-scrim[hidden]{display:none}
.srch-scrim{position:fixed;inset:0;z-index:35;background:rgba(20,12,22,.35)}
.srch-form{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;background:var(--wax);padding:4px 6px 4px 18px}
.srch-form:focus-within{border-color:var(--ink)}
.srch-form > svg{width:20px;height:20px;flex:none;color:var(--ink-soft)}
.srch-form input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.05rem;padding:10px 0;color:var(--ink)}
.srch-form input:focus{outline:none}
.srch-form input::-webkit-search-cancel-button{display:none}
.srch-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 10px}
.srch-chips{display:flex;flex-wrap:wrap;gap:8px}
.srch-chips a{border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;font-size:.92rem;background:var(--wax)}
.srch-chips a:hover{border-color:var(--ink)}
.srch-quick[hidden]{display:none}
.srch-chips a{display:inline-flex;align-items:center;gap:7px}
.srch-dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.srch-pop .srch-label:first-child{margin-top:10px}
.srch-dym{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.srch[aria-busy="true"] .srch-results{opacity:.55}
.srch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin-top:14px}
@media (max-width:700px){.srch-list{grid-template-columns:minmax(0,1fr)}}
.srch-hit{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border-radius:12px;text-decoration:none}
.srch-hit:hover,.srch-hit:focus-visible{background:var(--wax)}
.srch-art{width:52px;height:60px;border-radius:10px;background:var(--tint);display:grid;place-items:center;padding:6px;overflow:hidden}
.srch-art svg{width:100%;height:100%}
.srch-art:has(img){padding:0}
.srch-art img{width:100%;height:100%;object-fit:cover}
.srch-name{font-weight:500;line-height:1.3;min-width:0}
.srch-name small{display:block;font-weight:400;font-size:.82rem;color:var(--muted);margin-top:2px}
.srch-price{font-weight:700;font-size:.92rem;white-space:nowrap}
.srch-price.q{font-weight:500;font-size:.8rem;color:var(--ink-soft)}
.srch-hit.out .srch-art{opacity:.55}
.srch-all{display:inline-flex;margin-top:14px;font-weight:600;color:var(--flame-text)}
.srch-empty{margin:16px 4px 0;color:var(--ink-soft)}
.srch-empty a{color:var(--ink)}

/* ---- υποσέλιδο ---- */
.ftr .ftr-contact{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.ftr-contact a{color:var(--wax)}
.ftr-col > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ftr-col > summary::-webkit-details-marker{display:none}
.ftr-col > summary .chev{display:none}
@media (min-width:701px){.ftr-col > summary{cursor:default;pointer-events:none}}
@media (max-width:700px){
  .ftr-grid{grid-template-columns:1fr;gap:0}
  .ftr-brand{margin-bottom:18px}
  .ftr-col{border-top:1px solid rgba(242,237,241,.15)}
  .ftr-col:last-child{border-bottom:1px solid rgba(242,237,241,.15)}
  .ftr-col > summary{cursor:pointer;padding:14px 0}
  .ftr-col > summary h2,.ftr-col > summary h3{margin:0}
  .ftr-col > summary .chev{display:block;width:18px;height:18px;color:var(--wax);transition:transform .2s}
  .ftr-col[open] > summary .chev{transform:rotate(180deg)}
  .ftr-col ul{padding-bottom:16px}
}

/* ---- αρχική: hero στο κινητό ---- */
/* Η φωτογραφία φαίνεται καθαρά στο πάνω μισό και το κείμενο κάθεται χαμηλά, πάνω σε σκούρα βαθμίδα.
   (Πριν η βαθμίδα ήταν σκούρα παντού: το κερί της φωτογραφίας σχεδόν δεν φαινόταν, και πάνω από τον
   τίτλο έμενε άδειο σκούρο κενό.) */
@media (max-width:900px){
  .hero.bg-on .hero-in{min-height:clamp(560px,76vh,700px);align-items:end;padding-bottom:78px}
  .hero.bg-on .hero-copy{justify-content:flex-end}
  .hero-bgs::after{background:linear-gradient(to bottom,rgba(42,28,45,.35) 0%,rgba(42,28,45,.12) 28%,rgba(42,28,45,.55) 52%,rgba(42,28,45,.92) 76%,rgba(42,28,45,.97) 100%)}
  .hero-bg img{object-position:80% 50%}
}

/* ---- αρχική: «Τι φτιάχνουμε» ---- */
@media (max-width:759px){
  /* η πρώτη κατηγορία σε όλο το πλάτος, οι άλλες δύο δίπλα-δίπλα: όχι «ορφανή» κάρτα στην τρίτη σειρά */
  .cat-grid .ctile:first-child{grid-column:1 / -1;min-height:190px;justify-content:center}
  /* οριζόντια: κείμενο αριστερά, εικονογράφηση δεξιά, με τη βαθμίδα από αριστερά */
  .cat-grid .ctile:first-child .c-art{left:52%;top:0;bottom:0;padding:18px 12px}
  .cat-grid .ctile:first-child:not(:has(img))::after{top:0;height:auto;width:62%;right:auto;background:linear-gradient(to right,var(--tint,#EDE6EE) 70%,rgba(255,255,255,0) 100%)}
  .cat-grid .ctile:first-child .c-body{max-width:58%}
  .cat-grid .ctile:first-child .c-desc{-webkit-line-clamp:3}
}
.cat-more{margin-top:26px}
.cat-more-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
/* Στοίχιση με το πλέγμα από πάνω (πριν ήταν κεντραρισμένα και έπεφταν «μέσα» από την άκρη της ενότητας). */
.cat-more .cat-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;justify-content:stretch}
.cat-more .cat-chips > *{max-width:none}
.cat-more .cchip{min-height:88px;padding:12px 16px}
.cat-more .ch-art{width:60px;height:60px;flex:0 0 60px;border-radius:14px}
@media (max-width:620px){
  .cat-more .cat-chips{grid-template-columns:1fr 1fr;gap:10px}
  .cat-more .cchip{min-height:0;padding:10px;gap:10px}
  .cat-more .ch-art{width:44px;height:44px;flex:0 0 44px;border-radius:12px;padding:5px}
  .cat-more .cchip .c-name{font-size:.93rem}
  .cat-more .cchip > svg{display:none}
}

/* ---- αρχική: «Για δώρο και γιορτές» ---- */
@media (max-width:759px){
  /* 2×2 κάθετες κάρτες αντί για τέσσερις ψηλές γραμμές που έπιαναν μιάμιση οθόνη */
  .cat-rows{grid-template-columns:1fr 1fr;gap:10px}
  .crow{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:0;padding:14px}
  .cr-art{height:72px;width:100%;place-items:center start}
  .cr-art img{width:72px;height:72px}
  .crow .c-name{font-size:1rem;line-height:1.25}
  .crow .c-desc{display:none}
  .cr-go{display:none}
}

/* ---- αρχική: κάρτα δώρου ---- */
.sec.gift-after{padding-top:clamp(28px,4vw,48px)}
.gift-lead{color:var(--ink-soft);margin-top:12px;max-width:46ch}
.ranges-title{font-weight:500;margin:22px 0 0}
.ranges{margin-top:10px}
@media (min-width:801px){
  .gift{grid-template-areas:"card head" "card form" "card ranges";grid-template-rows:auto auto 1fr;row-gap:0;align-items:start}
  .gift-head{grid-area:head}
  .gift .gift-card{grid-area:card;align-self:center}
  .gift-form{grid-area:form}
  .gift-ranges{grid-area:ranges}
}
@media (max-width:800px){
  .gift{gap:0}
  .gift .gift-card{margin:20px 6px 4px}
  .ranges{flex-wrap:wrap;gap:8px}
  .ranges a{padding:8px 13px;font-size:.88rem}
}

/* ---- αρχική: «Πώς φτιάχνεται» χωρίς φωτογραφίες ---- */
.steps-text li.st-noimg{background:var(--paper);border-top:0;border-radius:var(--r-md);padding:22px 22px 24px}
.steps-text li.st-noimg::before{font-size:2rem;margin-bottom:12px}
@media (max-width:700px){
  .steps-text.m-rail{grid-auto-columns:74%}
  .steps-text li.st-noimg{padding:18px}
}

/* ---- αρχική: ιστορία χωρίς φωτογραφία ---- */
.story-art{aspect-ratio:4/5;border-radius:var(--r-md);display:grid;place-items:center;padding:14%;
  background:radial-gradient(90% 70% at 50% 35%,rgba(230,162,60,.22),transparent 70%),#E9DFEA}
.story-art svg{width:100%;height:100%;max-width:300px}
@media (max-width:800px){.story-art{aspect-ratio:16/10;padding:8%}}

/* ---- UX15: η λωρίδα πλεονεκτημάτων με όσες φράσεις έχουν οριστεί (1 έως 4) ---- */
@media (min-width:701px){.trust ul[style]{grid-template-columns:repeat(var(--n),minmax(0,1fr))}}

/* ---- «Είδες πρόσφατα» (κατάστημα, άδειο καλάθι) ---- */
.recent{padding-top:8px;padding-bottom:64px}
.recent[hidden]{display:none}
.recent .sec-head{margin-bottom:18px}
.recent h2{font-size:1.45rem}
.recent .link{border:0;background:none;font:inherit;cursor:pointer}
@media (max-width:900px){.recent{padding-bottom:44px}}

/* ---- UX28: συρτάρι κινητού με αναζήτηση στην κορυφή και επικοινωνία στο τέλος ---- */
.nav-srch,.nav-contact{display:none}
@media (max-width:900px){
  .nav:focus{outline:none}
  .nav-srch{display:flex;align-items:center;gap:10px;margin:-70px 48px 22px 0;border:1px solid var(--line);border-radius:999px;background:var(--wax);padding:0 16px}
  .nav-srch:focus-within{border-color:var(--ink)}
  .nav-srch svg{width:18px;height:18px;flex:none;color:var(--ink-soft)}
  .nav-srch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;padding:12px 0;color:var(--ink)}
  .nav-srch input:focus{outline:none}
  .nav-contact{display:grid;gap:2px;margin-top:18px;padding:4px 2px}
  .nav-contact p{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:4px}
  .nav .nav-contact a{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:0;font-size:.98rem}
  .nav-contact svg{width:18px;height:18px;flex:none;color:var(--flame-deep)}
}

/* ---- UX29: «Πατήστε εδώ για υπαναχώρηση» στο footer: ευδιάκριτο, όπως ζητά ο νόμος ---- */
.ftr .ftr-withdraw{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- UX30: banner cookies (ΑΠΔΠΧ: ίδια εμφάνιση αποδοχής/απόρριψης) και αναδυόμενο newsletter ---- */
.ck:focus{outline:none}
.ck-btns .ck-choice{min-width:190px;justify-content:center}
@media (max-width:760px){
  .ck-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ck-btns .ck-choice{min-width:0}
  .ck-btns .ck-set{grid-column:1 / -1;order:2}
  .ck-in > .ck-btns .ck-choice{order:1}
}
.nl-pop:focus{outline:none}
.nl-art{height:96px;margin:-30px -28px 18px;border-radius:22px 22px 0 0;display:grid;place-items:center;background:radial-gradient(90% 120% at 50% 100%,rgba(230,162,60,.35),transparent 60%),#EDE3EE;overflow:hidden}
.nl-art svg{height:80%;width:auto}
.nl-later{display:block;margin:10px auto 0;border:0;background:none;font:inherit;font-size:.88rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
.nl-later:hover{color:var(--ink)}
/* στο κινητό: κάρτα στο κάτω μέρος (όχι στη μέση, πάνω από όλη τη σελίδα) */
@media (max-width:700px){
  .nl-pop{margin:auto 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0;padding:26px 20px calc(18px + env(safe-area-inset-bottom,0px))}
  .nl-art{margin:-26px -20px 16px;height:84px}
}

/* ---- UX37: προσβασιμότητα ---- */
/* λίστες που κυλούν οριζόντια στο κινητό (π.χ. τα βήματα): εστιάζονται με το πληκτρολόγιο */
.m-rail:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
/* «Περισσότερα»: δίπλα στο «Δες όλα τα προϊόντα» και ο «Οδηγός αρωμάτων» (δευτερεύον κουμπί) */
.nav-more-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hdr .nav-more-links .nav-more-all + .nav-more-all{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hdr .nav-more-links .nav-more-all + .nav-more-all:hover,.hdr .nav-more-links .nav-more-all + .nav-more-all:focus-visible{background:var(--wax);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (max-width:860px){.hdr .nav-more-links .nav-more-all + .nav-more-all{box-shadow:none;color:var(--flame-text)}}