/* kerion-eshop/server/public/css/scents.css
   Οδηγός αρωμάτων (/scents): κουίζ, οικογένειες, πίνακας «ποιο άρωμα σε ποιο προϊόν».
   Οι κοινοί κανόνες σελίδας (διαδρομή, τίτλος, λωρίδα επικοινωνίας) είναι ίδιοι με των άλλων σελίδων περιεχομένου. */
[hidden]{display:none!important}
.crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.88rem;color:var(--ink-soft)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.page-top{padding-top:24px;padding-bottom:8px}
.page-top h1{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.035em;margin-top:14px;max-width:18ch}
.page-top .lead{color:var(--ink-soft);margin-top:14px;max-width:60ch;font-size:1.05rem}
.cta-band{background:var(--ink);color:var(--wax);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:72px}
.cta-band h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.cta-band p{color:#CFC3D0;margin-top:8px;max-width:46ch}
@media (max-width:700px){.page-top{padding-top:14px}.cta-band{margin-bottom:48px;border-radius:var(--r-md)}}

/* μετάβαση στις ενότητες */
.sg-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sg-jump a{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:.92rem;text-decoration:none;font-weight:500}
.sg-jump a:hover{border-color:var(--ink)}
.sg-sec{padding-top:40px;scroll-margin-top:90px}
.sg-sec h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.sg-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);margin-right:10px;vertical-align:middle;flex:none}

/* ---- κουίζ ---- */
.sg-quiz{background:var(--paper);border-radius:var(--r-lg);padding:clamp(22px,4vw,40px)}
.sg-lead{color:var(--ink-soft);margin-top:8px}
.sg-form{margin-top:22px;display:grid;gap:22px;justify-items:start}
.sg-q{border:0;margin:0;padding:0;min-width:0;width:100%}
.sg-q legend{font-weight:600;margin-bottom:10px;padding:0}
.sg-opts{display:flex;flex-wrap:wrap;gap:8px}
.sg-opt{position:relative;cursor:pointer}
.sg-opt input{position:absolute;opacity:0;width:1px;height:1px}
.sg-opt span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:10px 16px;background:var(--wax);font-size:.95rem;transition:border-color .12s,background .12s}
.sg-opt:hover span{border-color:var(--ink)}
.sg-opt input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sg-opt input:focus-visible + span{outline:2px solid var(--flame-deep);outline-offset:2px}
.sg-result{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);scroll-margin-top:90px}
.sg-result:focus{outline:none}
.sg-k{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--flame-text)}
.sg-result > h3{font-size:clamp(1.5rem,2.8vw,2rem);margin-top:8px;display:flex;align-items:center;flex-wrap:wrap}
.sg-result > h3 .sg-dot{width:16px;height:16px}
.sg-or{color:var(--ink-soft);font-size:.7em;margin-left:10px}
.sg-result > p{color:var(--ink-soft);margin-top:8px;max-width:60ch}
.sg-picks{margin-top:22px}
.sg-acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}

/* ---- οικογένειες ---- */
.sg-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.sg-fam{background:var(--paper);border-radius:var(--r-md);padding:22px;border-top:5px solid var(--c);display:flex;flex-direction:column;scroll-margin-top:90px}
.sg-fam h3{font-size:1.35rem;display:flex;align-items:center}
.sg-desc{color:var(--ink-soft);margin-top:8px;font-size:.95rem}
.sg-scents{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.sg-scents li{display:grid;gap:2px;font-size:.93rem}
.sg-scents span{color:var(--ink-soft);font-size:.86rem}
.sg-go{margin-top:auto;padding-top:18px;font-weight:600;font-size:.92rem;color:var(--flame-text);text-decoration:none}
.sg-go:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- πίνακας ---- */
.sg-tbl-wrap{background:var(--paper);border-radius:var(--r-md);padding:8px 18px 14px;overflow-x:auto}
.sg-tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.sg-tbl th,.sg-tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center}
.sg-tbl thead th{font-size:.8rem;font-weight:600;color:var(--ink-soft);vertical-align:bottom}
.sg-tbl th[scope=row],.sg-tbl thead th:first-child{text-align:left;font-weight:500}
.sg-fam-row th{text-align:left;font-weight:700;padding-top:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,transparent),transparent 60%)}
.sg-tbl a{display:inline-grid;place-items:center;min-width:36px;min-height:32px;border-radius:8px;text-decoration:none;font-weight:700;color:var(--ink)}
.sg-tbl a:hover{background:var(--wax)}
.sg-tbl a.out{font-weight:400;font-size:.78rem;color:#766a77}
.sg-none{color:#766a77}
/* στο κινητό κάθε άρωμα γίνεται κάρτα: όνομα και από κάτω οι μορφές που υπάρχει */
@media (max-width:700px){
  .sg-tbl-wrap{padding:4px 14px 10px}
  .sg-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sg-tbl tr{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
  .sg-tbl th,.sg-tbl td{border:0;padding:0}
  .sg-tbl th[scope=row]{flex-basis:100%;font-weight:600}
  .sg-fam-row{border-bottom:0!important}
  .sg-fam-row th{flex-basis:100%;padding:10px 8px;border-radius:8px}
  .sg-tbl td:has(.sg-none){display:none}
  .sg-tbl td a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-weight:500;font-size:.86rem;background:var(--wax)}
  .sg-tbl td a::before{content:attr(data-l)}
  .sg-tbl td a span{display:none}
  .sg-tbl td a.out{text-decoration:line-through;border-style:dashed}
}