/* ==========================================================================
   Section: Hero
   Figma: 167:114 — 1920 × 895
   ========================================================================== */

.ss-hero {
  position: relative;
  isolation: isolate;
  /* Μακέτα: το σώμα του hero ξεκινά στα 206px, το section κλείνει στα 52px. */
  padding-block: calc(var(--sp-20) * 2.4) var(--sp-14);
  overflow: hidden;
}

/* ---------- Φόντο ---------- */

.ss-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-3xl);
  overflow: hidden;
}

.ss-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  transform: scaleY(-1);
}

/* Λευκά fades στις τρεις πλευρές, όπως στη μακέτα. */
.ss-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    var(--grad-fade-right),
    linear-gradient(to left, rgba(255, 255, 255, 0), var(--c-white)),
    linear-gradient(to top, rgba(255, 255, 255, 0), var(--c-white));
  background-size: 37% 100%, 37% 100%, 100% 37%;
  background-position: right center, left center, top center;
  background-repeat: no-repeat;
}

/* ---------- Περιεχόμενο ---------- */

/*
 * Τα κάθετα κενά του hero δεν είναι ίσα στη μακέτα, οπότε δεν μπαίνουν με ένα
 * `gap`. Μετρήσεις από το node 167:108:
 *   intro → demo            64
 *   template tabs → tabs    48
 *   κάρτα → σημείωση        12
 *   demo → κουμπιά          48
 */
.ss-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ss-hero__demo {
  margin-block-start: var(--sp-16);
}

.ss-hero__actions {
  margin-block-start: var(--sp-12);
}

@media (hover: hover) {
  .ss-hero__actions .ss-btn:hover {
    background-color: var(--c-green);
    color: var(--c-white);
  }
}

.ss-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  max-width: 1266px;
  text-align: center;
}

/*
 * Μακέτα 129:11: τίτλος cap 40 (δηλαδή 56px Manrope), κενό **32** ως τον
 * υπότιτλο, υπότιτλος cap 17 (24px). Το Figma μετράει από το ύψος κεφαλαίου,
 * το CSS από το line box — χωρίς trim το κενό έβγαινε 48. Τα em είναι
 * half-leading + (ascender − cap) πάνω και half-leading + descent κάτω, για
 * Manrope στα δύο line-heights.
 */
.ss-hero__intro .ss-h1 {
  margin-block: -0.18em -0.2em;
}

.ss-hero__subtitle {
  color: var(--c-blue);
  margin-block: -0.28em -0.3em;
}

.ss-hero__demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--container-sm);
}

.ss-hero__categories {
  margin-block-start: var(--sp-12);
}

.ss-hero__note {
  margin-block-start: var(--sp-3);
}

/* ---------- Tabs template ---------- */

/* Μακέτα 216:289: pills 164 × 38 με κενό 16. */
.ss-hero__templates {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.ss-hero__template {
  min-width: 164px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-ui);
  color: var(--c-navy);
  transition: background-color .2s ease, color .2s ease;
}

.ss-hero__template.is-active {
  background-color: var(--c-navy);
  color: var(--c-surface);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-chip);
}

/* ---------- Tabs κατηγοριών ---------- */

.ss-hero__categories {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
}

.ss-hero__category {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  color: var(--c-navy);
}

.ss-hero__category.is-active {
  font-weight: var(--fw-bold);
}

/* Η ενεργή γραμμή κάτω από το tab. */
.ss-hero__category::after {
  content: '';
  display: block;
  height: 6px;
  border-radius: var(--r-xs);
  background-color: transparent;
}

.ss-hero__category.is-active::after {
  background-color: var(--c-blue);
}

/* ---------- Η κάρτα του demo ---------- */

/*
 * Το slot κρατά τη θέση της κάρτας όταν ανοίγει πάνω από τη σελίδα.
 */
.ss-demo__slot {
  width: 100%;
}

.ss-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding-block: 0;
  padding-inline: var(--sp-12);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.ss-demo:not(.active-results) {
  /* Ίδιο κουτί σε κάθε template: χωρίς κάθετο padding, ώστε το ύψος να μην
     ακολουθεί το search bar. */
  height: calc(var(--sp-14) * 2 + var(--sp-2) + var(--sp-6) + var(--sp-12));
}

/*
 * `.hero-search-inner` και `.inner-result-container` είναι κλάσεις του plugin.
 * Στα Template 1/2 δεν έχουν δικό τους στυλ εδώ — απλώς μεταφέρουν τη
 * στοίχιση της κάρτας. Στο Template 3 τις αναλαμβάνει το smart-search-hero.css.
 */
.ss-demo .hero-search-inner {
  width: 100%;
}

.ss-demo .inner-result-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  padding: 0;   /* ακυρώνει το 20px/24px του smart-search-base.css */
}

.ss-demo__search {
  width: 100%;
  border-radius: var(--r-pill);
}

/* Chip με τις δύο λειτουργίες. */
.ss-demo__toggle {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 0;
  align-self: flex-start;
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  background-color: var(--c-chip-bg);
}

/*
 * Το μπλε pill γλιστράει ανάμεσα στις δύο επιλογές, όπως το thumb του
 * compact toggle. Ίδιο πλάτος και στα δύο κελιά, ώστε τίποτα να μη μετακινείται.
 */
.ss-demo:not(.ss-demo--compact) .ss-demo__toggle::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset-block: var(--sp-2);
  inset-inline-start: var(--sp-2);
  width: calc(50% - var(--sp-2));
  border-radius: var(--r-pill);
  background-color: var(--c-blue);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-demo:not(.ss-demo--compact) .ss-demo__toggle:has(.ss-demo__mode--ai.is-active)::before {
  transform: translate3d(100%, 0, 0);
}

[dir="rtl"] .ss-demo:not(.ss-demo--compact) .ss-demo__toggle:has(.ss-demo__mode--ai.is-active)::before {
  transform: translate3d(-100%, 0, 0);
}

/*
 * Μακέτα 167:89: το pill είναι **38** ψηλό — εικονίδιο 16 με 11 πάνω-κάτω.
 * Με το κληρονομημένο line-height 1.5 το κείμενο έδινε κουτί 24 και το pill
 * έβγαινε 48. Το padding σε em του ίδιου του κειμένου, ώστε να ακολουθεί το
 * clamp: 11 / 16 = 0.6875em.
 */
.ss-demo__mode {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.6875em var(--sp-6);
  line-height: 1;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-ui);
  color: var(--c-blue);
  background: none;
  transition: color .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-demo:not(.ss-demo--compact) .ss-demo__mode.is-active {
  padding: 0.6875em var(--sp-6);
  background: none;
  color: var(--c-white);
}

.ss-demo__mode-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.ss-demo__mode--ai .ss-demo__mode-icon {
  color: var(--c-green);
}

/* Η μπλε μπάρα αναζήτησης. */
.ss-demo__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-10);
  border-radius: var(--r-pill);
  background-color: var(--c-blue);
  color: var(--c-white);
}

/*
 * Το φίλτρο κατηγορίας είναι πραγματικό <select> — το plugin διαβάζει την
 * τιμή του (#smart-search-category). Το γυμνώνουμε από το native chrome και
 * βάζουμε το βελάκι της μακέτας από πάνω.
 */
.ss-demo__scope {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-shrink: 0;
}

.ss-demo__scope-select {
  appearance: none;
  padding-right: var(--sp-5);
  border: 0;
  background: none;
  font-family: var(--ff-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-ui);
  color: var(--c-white);
  cursor: pointer;
}

.ss-demo__scope-select:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Οι επιλογές ζωγραφίζονται από το OS — χρειάζονται δικά τους χρώματα. */
.ss-demo__scope-select option {
  color: var(--c-navy);
  background-color: var(--c-white);
}

.ss-demo__caret {
  position: absolute;
  right: calc(var(--sp-8) + var(--sp-2));
  width: 12px;
  height: auto;
  color: var(--c-green);
  transform: rotate(180deg);
  pointer-events: none;
}

.ss-demo__divider {
  width: 1px;
  height: 2.25em;
  background-color: var(--c-divider-on-blue);
}

.ss-demo__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-ui);
  color: var(--c-white);
}

.ss-demo__input::placeholder {
  color: var(--c-white);
  opacity: 1;
}

.ss-demo__input:focus {
  outline: none;
}

.ss-demo__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-shrink: 0;
}

.ss-demo__mic {
  display: flex;
  align-items: center;
  color: var(--c-white);
}

.ss-demo__mic-icon {
  width: 13px;
  height: auto;
}

.ss-demo__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-14);
  aspect-ratio: 61 / 44;
  border-radius: var(--r-pill);
  background-color: var(--c-green);
  color: var(--c-white);
}

.ss-demo__submit-icon {
  width: 45%;
  height: auto;
}

/* ==========================================================================
   Στρώμα συμβατότητας με το smart-search-base.css

   ΕΞΑΙΡΕΣΗ στους κανόνες του AGENTS.md §7 (χωρίς ID selectors, χωρίς
   !important). Το base.css του plugin ντύνει τη μπάρα με `#smart-search-input`
   και `#smart-search-category` — specificity ID — και μαρκάρει χρώματα ως
   !important. Κλάση δεν τα φτάνει ποτέ.

   Ισχύει ΜΟΝΟ εδώ, μόνο για τα δύο αυτά στοιχεία, και μόνο για τις ιδιότητες
   που ορίζει το plugin. Δεν επεκτείνεται πουθενά αλλού στο theme.
   ========================================================================== */

.ss-demo #smart-search-category,
.ss-demo #smart-search-input {
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
  color: var(--c-white) !important;
}

.ss-demo #smart-search-category {
  padding-left: 0;
}

.ss-demo #smart-search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.ss-demo #smart-search-input::placeholder {
  color: var(--c-white) !important;
  opacity: .75;
}

/* The design already supplies an inline SVG. The plugin's CSS background
 * paints a second microphone on the same button. Keep the original control. */
.ss-demo #speech-to-text-button {
  background-image: none;
}

.ss-demo .smart-search-inner {
  padding-top: 0 !important;
}

/*
 * Το plugin (1.4.1) ενισχύει το select με το selectWoo του WooCommerce. Το
 * κλειστό pill παίρνει την τυπογραφία της μπάρας· το ανοιχτό πάνελ ντύνεται
 * από το plugin με τα --smart-* (brand tokens εδώ). Μόνο η γραμματοσειρά.
 */
.ss-demo .select2-container .ssb-select2 .select2-selection__rendered {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-ui);
  color: var(--c-white);
}

.ss-demo__scope .select2-container {
  max-width: 220px;
}

.ss-demo--compact .select2-container .ssb-select2 .select2-selection__rendered {
  min-width: 179px;
}

.ssb-select2-dropdown.select2-dropdown {
  font-family: var(--ff-ui);
}

/* ==========================================================================
   Αποτελέσματα — τα ντύνει ΤΟ PLUGIN, όχι εμείς

   Το demo υπάρχει για να δείχνει τα τρία πραγματικά templates του Smart
   Search. Οτιδήποτε ξαναβάφαμε εδώ (τυπογραφία, πλέγμα, εικόνες, κουμπί
   κλεισίματος) θα έδειχνε μια δική μας εκδοχή, όχι το προϊόν.

   Οι κάρτες/στήλες κρατούν το styling του plugin. Το theme προσαρμόζει
   μόνο το πλαίσιο, τα κενά και το διαθέσιμο ύψος κύλισης. Τα χρώματα
   έρχονται από τα `--smart-*` custom properties που
   γράφει το ίδιο το plugin — και που τα έχουμε ρυθμίσει στα brand tokens
   μέσω του `tools/demo-settings.php`. Δηλαδή το πάνελ βγαίνει on-brand
   περνώντας από το σύστημα θεματοποίησης του plugin, όπως θα γινόταν σε
   πραγματικό κατάστημα.

   Πού μπαίνει το πάνελ, το αποφασίζει το plugin ανά template:
     T1 / T2 → `position: fixed` κάτω από τη μπάρα, ψηλά στο viewport
     T3      → μέσα στο `.search-results-append` του hero overlay
   Την εναλλαγή την κάνει το hero-demo.js προσθαφαιρώντας τις κλάσεις.
   ========================================================================== */

/*
 * Το μόνο που κρύβουμε: το plugin εισάγει δικό του κουμπί «AI search ✨»
 * δίπλα στο input, γιατί δεν ξέρει ότι η μακέτα έχει ήδη το chip «Ai Βοηθός».
 * Η λειτουργία μένει — το chip φέρει την ίδια κλάση `.ss-ai-btn`.
 */
.ss-ai-btn-injected {
  display: none;
}

/* Το hero είναι demo: τα αποτελέσματα παραμένουν ορατά, αλλά δεν αποτελούν
 * πλοήγηση προς προϊόντα, κατηγορίες, άρθρα, banners ή το πλήρες archive. */
.smart-search-results [aria-disabled="true"] {
  cursor: default;
}

/* Keep the plugin's close control on its own row; it must not consume
 * a column alongside the result renderer. */
.ss-demo-t1 > .smart-search-results {
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--sp-8));
  max-width: var(--container-lg);
  z-index: 10001;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: var(--sp-4) var(--sp-6);
  padding-top: var(--sp-4) !important;
  margin-block: 0;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  min-height: var(--ss-demo-results-space);
  /* Override the plugin's inline 80%-of-remaining-height limit. */
  max-height: var(--ss-demo-results-space) !important;
}

.ss-demo-t1 > .smart-search-results > .smart-search-inner {
  width: 100%;
  flex-shrink: 0;
  margin-block: 0;
  padding-top: 0 !important;
}

body.ss-demo-t1 > .smart-search-results ul {
  max-height: var(--ss-demo-list-space) !important;
}

.ss-demo-t1 > .smart-search-results > .close-btn {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  margin: 0 0 var(--sp-2) auto;
}

.ss-demo__input::-webkit-search-cancel-button {
  appearance: none;
}

/* ==========================================================================
   Καταστάσεις template

   Το `body.ss-demo-t*` το βάζει το hero-demo.js.
   ========================================================================== */

/*
 * Το πλωτό εικονίδιο και το glass overlay ανήκουν αποκλειστικά στο Template 3.
 * Το στυλ τους ζει στο smart-search-hero.css, που στα Template 1/2 είναι
 * κλειστό — χωρίς αυτό θα έμεναν ως γυμνά στοιχεία στη ροή της σελίδας.
 */
body:not(.ss-demo-t3) .search-toggle,
body.ss-demo-in-view .search-toggle,
body:not(.ss-demo-t3) .search_bg_glass {
  display: none;
}

/* ==========================================================================
   Template 1 / 2 — κοινή compact μπάρα (Figma node 216:205 / 188:6)

   Δεν αλλάζουν μόνο τα αποτελέσματα: στα Template 1/2 η ίδια η μπάρα είναι
   άλλη. Σκούρα navy, με τα δύο toggles μαζεμένα σε εικονίδια ΜΕΣΑ στη μπάρα
   αριστερά, και κατηγορία / πεδίο σε ξεχωριστά σκούρα pills.
   ========================================================================== */

/* Μακέτα 216:282: 37 πλάγια — η μπάρα βγαίνει 1192. Το ύψος είναι αυτό του .ss-demo. */
.ss-demo--compact {
  padding-block: 0;
  padding-inline: var(--sp-demo-card-x);
}

/* Opening the compact demo frees the viewport for its native result list.
 * Keeping the idle card in place would leave only a few rows on laptops. */
.ss-demo--compact.active-results {
  position: fixed;
  inset: var(--sp-4) auto auto 50%;
  transform: translateX(-50%);
  z-index: 10000;
  width: calc(100% - var(--sp-8));
  max-width: var(--container-lg);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}

.ss-demo--compact .inner-result-container {
  position: relative;
  gap: 0;
}

  /* Μακέτα 216:256: μπάρα 60 ψηλή — στοιχεία 40 με 10 πάνω-κάτω. */
.ss-demo--compact .ss-demo__bar {
  position: relative;
  gap: var(--sp-2);
  /* 10px αριστερά, 16px δεξιά· το αριστερό γεμίζει το toggle. */
  padding: var(--sp-demo-bar-y) var(--sp-4) var(--sp-demo-bar-y) calc(var(--sp-2) + 88px);
  background-color: var(--c-navy-mid);
}

/*
 * Το toggle βγαίνει από τη ροή και κάθεται μέσα στη μπάρα — γι' αυτό η κάρτα
 * περιέχει πλέον μόνο τη μπάρα και βγαίνει 222px με padding 81.
 */
/*
 * Το toggle ΔΕΝ είναι παιδί της μπάρας στο markup (κάθεται από πάνω της στο
 * Template 1), οπότε χωρίς z-index η μπάρα το σκεπάζει: βγαίνει σωστά στη
 * θέση του αλλά ζωγραφίζεται από κάτω.
 */
/*
 * Μακέτα 216:271 — switch 80×40, όχι το labeled chip του Template 3.
 * Track: --c-ink 80% + backdrop blur (glass πάνω στη μπάρα).
 * Thumb: 32×32, r 18, --c-navy-mid 60%, inset 5 / 4. Γλιστράει με transform
 * 38px (80 − 32 − 5 − 5), χωρίς fade στο background των κουμπιών.
 */
.ss-demo--compact .ss-demo__toggle {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: var(--sp-2);
  transform: translateY(-50%);
  isolation: isolate;
  gap: 0;
  width: 80px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-2xl);
  background-color: color-mix(in srgb, var(--c-ink) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.ss-demo--compact .ss-demo__toggle::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset-block-start: 4px;
  inset-inline-start: 5px;
  width: 32px;
  height: 32px;
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--c-navy-mid) 60%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-demo--compact .ss-demo__toggle:has(.ss-demo__mode--ai.is-active)::before {
  transform: translate3d(38px, 0, 0);
}

[dir="rtl"] .ss-demo--compact .ss-demo__toggle:has(.ss-demo__mode--ai.is-active)::before {
  transform: translate3d(-38px, 0, 0);
}

.ss-demo--compact .ss-demo__mode {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--c-green);
  transition: none;
}

/* Στα Template 1/2 φαίνονται μόνο τα εικονίδια. */
.ss-demo--compact .ss-demo__mode span:not(.ss-sr-only) {
  display: none;
}

.ss-demo--compact .ss-demo__mode.is-active {
  padding: 0;
  background: none;
  color: var(--c-green);
}

/* 216:275 search 16×16 · 216:279 sparkle 14×14. */
.ss-demo--compact .ss-demo__mode .ss-demo__mode-icon {
  width: 16px;
  height: 16px;
  color: var(--c-green);
}

.ss-demo--compact .ss-demo__mode--ai .ss-demo__mode-icon {
  width: 14px;
  height: 14px;
}

/* Κατηγορία και πεδίο γίνονται ξεχωριστά σκούρα pills. */
.ss-demo--compact .ss-demo__scope {
  gap: 0;
  /* Same height as the input pill: with selectWoo the pill would otherwise
   * take the 18px of the select2 container and sit shorter than the field. */
  min-height: 32px;
  padding-inline: var(--sp-5) var(--sp-4);
  border-radius: var(--r-2xl);
  background-color: color-mix(in srgb, var(--c-ink) 80%, transparent);
}

.ss-demo--compact .ss-demo__scope-select {
  min-width: 179px;
}

.ss-demo--compact .ss-demo__caret {
  right: var(--sp-4);
  color: var(--c-white);
}

/* Ο διαχωριστής της μακέτας 1 δεν υπάρχει εδώ. */
.ss-demo--compact .ss-demo__divider {
  display: none;
}

/*
 * Το !important εδώ ακυρώνει το ίδιο το στρώμα συμβατότητας παραπάνω, που
 * μηδενίζει το background του #smart-search-input για το Template 1.
 */
.ss-demo--compact #smart-search-input {
  min-height: 32px;
  padding-inline: var(--sp-10);
  border-radius: var(--r-2xl);
  background-color: color-mix(in srgb, var(--c-ink) 40%, transparent) !important;
}

.ss-demo--compact .ss-demo__actions {
  gap: var(--sp-4);
}

/* Template 3 keeps the original blue card in the hero. Only the open
 * results use the plugin's floating overlay; JS preserves the card's slot. */
.ss-demo.hero-search-wrapper {
  max-width: var(--container-sm);
  border-radius: var(--r-pill);
  transition: none;
}

.ss-demo.hero-search-wrapper:not(.active-results) {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: auto;
}

.ss-demo.hero-search-wrapper.active-results {
  bottom: var(--sp-4);
  width: calc(100% - var(--sp-8));
  max-width: var(--container-lg);
  max-height: calc(100dvh - var(--sp-8));
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
}

.ss-demo.hero-search-wrapper.active-results.has-search-results {
  top: var(--sp-4);
}

.ss-demo.hero-search-wrapper.has-search-results .hero-search-inner,
.ss-demo.hero-search-wrapper.has-search-results .inner-result-container {
  height: 100%;
  min-height: 0;
}

.ss-demo.hero-search-wrapper .ss-demo__toggle,
.ss-demo.hero-search-wrapper .ss-demo__search {
  flex-shrink: 0;
}

.ss-demo.hero-search-wrapper .inner-result-container,
.ss-demo.hero-search-wrapper.active-results .inner-result-container {
  padding: 0;
}

.ss-demo.hero-search-wrapper .search-bar-container {
  gap: var(--sp-6);
}

.ss-demo.hero-search-wrapper .ss-demo__input {
  font-family: var(--ff-ui);
}

/* Extend the existing input compatibility rules to the stock T3 chrome:
 * keep the theme's one caret/divider and fluid text instead of adding the
 * plugin's second arrow, border, and fixed control dimensions. */
.ss-demo.hero-search-wrapper select#smart-search-category {
  background-image: none !important;
  border-right: 0 !important;
  height: auto !important;
  max-width: none;
  font-size: var(--fs-base);
  padding-right: var(--sp-5) !important;
}

.ss-demo.hero-search-wrapper #smart-search-input {
  width: auto !important;
  height: auto !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-base) !important;
}

.ss-demo.hero-search-wrapper .ss-demo__results {
  order: -1;
  flex: 1;
  min-height: 0;
}

/* Flex allocates the remaining height after the actual controls, including
 * wrapped bars. Lists use their measured space, not a fixed vh cap. */
.ss-demo.hero-search-wrapper .smart-search-results {
  height: 100%;
  min-height: 0;
  max-height: 100% !important;
}

.ss-demo.hero-search-wrapper .smart-search-results ul {
  max-height: var(--ss-demo-list-space) !important;
}

.ss-demo.hero-search-wrapper .smart-search-inner {
  margin-block: 0;
}

.ss-demo.hero-search-wrapper .smart-search-results img {
  object-fit: contain !important;
}

/* The floating opener can show an empty bar. It needs the same single
 * close control before the first query as it does during/after a search. */
.ss-demo.hero-search-wrapper.active-results:not(.has-search-results) .close-btn {
  display: flex !important;
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  z-index: 100;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  /* Χωρίς αυτό έπαιρνε το navy φόντο των κουμπιών του theme και το × χανόταν
   * μέσα του (ίδιο χρώμα): φαινόταν σκέτο τετράγωνο. */
  background: none;
  box-shadow: none;
  cursor: pointer;
}

/* The plugin paints a panel behind its stock bar. Our existing card is
 * already the panel; suppress only that decorative pseudo-element. */
.ss-demo.hero-search-wrapper .inner-result-container::after {
  display: none;
}

/* The stock T3 mic is absolutely positioned for the plugin's own submit
 * button. Reuse the hero's original action row and its one existing mic. */
.ss-demo.hero-search-wrapper #speech-to-text-button {
  position: static !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  filter: none !important;
}

/* ==========================================================================
   Mobile (≤ 991px): stacked layout.
   Προσωρινά η demo μπάρα σπάει σε δύο σειρές ώστε να μη ξεχειλίζει.
   ========================================================================== */

@media (max-width: 991px) {
  .ss-hero {
    padding-block: calc(var(--sp-20) * 2) var(--sp-20);
  }

  /* Τα τρία pills των templates πρέπει να χωρούν σε 350px. */
  .ss-hero__templates {
    width: 100%;
    justify-content: center;
    gap: var(--sp-2);
  }

  .ss-hero__template {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  .ss-hero__categories {
    gap: var(--sp-8);
  }

  .ss-demo,
  .ss-demo--compact,
  .ss-demo.hero-search-wrapper:not(.active-results) {
    height: auto;
    padding-block: var(--sp-10);
    padding-inline: var(--sp-5);
  }

  .ss-demo.hero-search-wrapper:not(.active-results) .inner-result-container {
    padding: 0 !important;
  }

  .ss-demo .inner-result-container,
  .ss-demo--compact .inner-result-container {
    gap: var(--sp-3);
  }

  .ss-demo .search-bar-wrap,
  .ss-demo .site-search {
    margin-inline: 0;
  }

  /*
   * Η μπάρα μένει ΜΙΑ γραμμή: select στενό (το πλάτος του το έδινε η
   * μακρύτερη κατηγορία, 276px), input εύκαμπτο, μικρά κενά.
   */
  .ss-demo__bar {
    flex-wrap: nowrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  }

  .ss-demo__scope {
    gap: var(--sp-3);
  }

  .ss-demo .ss-demo__scope-select,
  .ss-demo #smart-search-category {
    width: 5.5em;
    min-width: 0;
    max-width: 5.5em;
    padding-right: var(--sp-4);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-sm);
  }

  .ss-demo__caret {
    right: var(--sp-5);
  }

  .ss-demo__input {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--sp-2);
    font-size: var(--fs-sm);
  }

  .ss-demo__actions {
    gap: var(--sp-3);
  }

  .ss-demo__submit {
    width: 40px;
  }

  .ss-demo__mode {
    white-space: nowrap;
    font-size: var(--fs-sm);
  }

  .ss-demo:not(.ss-demo--compact) .ss-demo__mode,
  .ss-demo:not(.ss-demo--compact) .ss-demo__mode.is-active {
    padding-inline: var(--sp-4);
  }

  /*
   * Compact (Template 1/2): το toggle των 80px δεν χωρά μέσα στη μπάρα —
   * βγαίνει από πάνω της, ίδιο chip, και η μπάρα παίρνει κανονικό padding.
   */
  .ss-demo--compact .inner-result-container {
    gap: var(--sp-3);
  }

  .ss-demo--compact .ss-demo__toggle {
    position: relative;
    inset: auto;
    transform: none;
    align-self: flex-start;
  }

  .ss-demo--compact .ss-demo__bar {
    gap: var(--sp-2);
    padding: var(--sp-demo-bar-y) var(--sp-2) var(--sp-demo-bar-y) var(--sp-2);
  }

  .ss-demo--compact .ss-demo__scope {
    padding-inline: var(--sp-3) var(--sp-2);
  }

  .ss-demo--compact .ss-demo__scope-select {
    width: 5em;
    max-width: 5em;
  }

  /* Το selectWoo pill ακολουθεί τα ίδια όρια με το native select. */
  .ss-demo__scope .select2-container {
    max-width: 5.5em;
  }

  .ss-demo--compact .ss-demo__scope .select2-container {
    max-width: 5em;
  }

  .ss-demo .select2-container .ssb-select2 .select2-selection__rendered,
  .ss-demo--compact .select2-container .ssb-select2 .select2-selection__rendered {
    min-width: 0;
    padding-right: 22px; /* χώρος για το caret, που κάθεται 8px από δεξιά */
    font-size: var(--fs-sm);
  }

  .ss-demo--compact .ss-demo__caret {
    right: var(--sp-2);
  }

  .ss-demo--compact #smart-search-input {
    padding-inline: var(--sp-3);
  }

  .ss-demo--compact .ss-demo__actions {
    gap: var(--sp-2);
  }

  /*
   * Template 3: το responsive.css του plugin δίνει στο .hero-search-wrapper
   * `bottom: 10px; left: 2%; width: 96%` με !important. Η κάρτα εδώ είναι
   * position: relative, οπότε το bottom την ανέβαζε 10px και κάλυπτε τη
   * γραμμή κάτω από την ενεργή κατηγορία.
   */
  .ss-demo.hero-search-wrapper:not(.active-results) {
    inset: auto !important;
    width: 100% !important;
  }

  /* Template 3: το plugin περιορίζει το select στα 60px· φτάνει για «Όλα». */
  .ss-demo.hero-search-wrapper .search-bar-container {
    gap: var(--sp-3);
  }

  .ss-demo.hero-search-wrapper select#smart-search-category {
    min-width: 0 !important;
    max-width: 5.5em !important;
    font-size: var(--fs-sm);
  }

  .ss-demo.hero-search-wrapper #smart-search-input {
    font-size: var(--fs-sm) !important;
  }
}