/* Il dropdown vero e proprio, con border-radius e scrollbar arrotondata */
.wcsa-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: auto;
  background: #fff;
  border: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;

  /* angoli arrotondati */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* WebKit-only: arrotondare anche la track dello scrollbar */
.wcsa-suggestions::-webkit-scrollbar {
  width: 12px;
}
.wcsa-suggestions::-webkit-scrollbar-track {
  background: transparent;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.wcsa-suggestions::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.wcsa-suggestions li {
  padding: 4px;
  cursor: pointer;
  user-select: none;
  color: #000 !important;
  text-transform: lowercase;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* grassetto per la parte evidenziata */
.wcsa-suggestions li strong {
  font-weight: bold;
  color: #000 !important;
}

/* Fix70 — Title wrapper for ALL suggestion items.
   Wrapping the title in a single inline element guarantees that internal
   whitespace (between the matched prefix and the bold completion) is never
   collapsed by the parent flex layout (.wcsa-li-left, .wcsa-history-left).
   white-space:normal + a defensive `display:inline` keep the text flowing
   naturally as a single flex item. */
.wcsa-suggestions .wcsa-title {
  display: inline;
  white-space: normal;
  word-break: normal;
}
.wcsa-suggestions .wcsa-title strong {
  font-weight: bold;
}

/* Item con categoria (layout a due colonne tipo eBay) */
.wcsa-item-with-meta {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* wrapper: icona a sinistra, testo (titolo+categoria) a destra, freccia a destra */
.wcsa-item-with-meta .wcsa-meta-wrap {
  display: flex;
  align-items: center; /* icona centrata verticalmente rispetto alle 2 righe */
}

/* colonna icona */
.wcsa-item-with-meta .wcsa-meta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  margin-right: 6px;
}

/* colonna testo: prende tutto lo spazio disponibile */
.wcsa-item-with-meta .wcsa-meta-text {
  flex: 1;
  min-width: 0;
}

/* colonna freccia a destra */
.wcsa-meta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
}

/* ── Layout per item senza categoria: flexbox con freccia a destra ── */
.wcsa-suggestions li:not(.wcsa-item-with-meta):not(.wcsa-history-item) {
  display: flex !important;
  align-items: center !important;
}
.wcsa-li-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.wcsa-li-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
}

/* ── Freccia singola (suggerimenti interni) ── */
.wcsa-arrow-internal {
  display: inline-block;
  width: 14px;
  height: 14px;
  /* Colore applicato via background-color dal PHP inline (icon_color) */
  background-color: #000;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center center;
  mask-size: contain;
  -webkit-mask-size: contain;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* ── Freccia (suggerimenti esterni) — identica alla freccia interna ── */
.wcsa-arrow-external {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #000;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center center;
  mask-size: contain;
  -webkit-mask-size: contain;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* Hover: freccia più visibile */
.wcsa-suggestions li:hover .wcsa-arrow-internal,
.wcsa-suggestions li:hover .wcsa-arrow-external,
.wcsa-suggestions li.wcsa-selected .wcsa-arrow-internal,
.wcsa-suggestions li.wcsa-selected .wcsa-arrow-external {
  opacity: 0.85;
}

/* riga titolo */
.wcsa-item-with-meta .wcsa-main-line {
  line-height: 1.2;
}

/* riga "in Categoria" */
.wcsa-item-with-meta .wcsa-meta-line {
  margin-top: 2px;
  font-size: 11px;
  color: #555; /* colore base, sovrascritto dallo style inline se impostato */
  text-transform: none;
  font-weight: bold;
}

.wcsa-item-with-meta .wcsa-meta-prefix {
  font-weight: inherit;
}

.wcsa-item-with-meta .wcsa-meta-category {
  text-decoration: none;
  font-weight: bold;
}

/* hover e selezione */
.wcsa-suggestions li:hover,
.wcsa-suggestions li.wcsa-selected {
  border-radius: 5px;
}

/* input dentro il wrapper */
.wcsa-wrapper input[name="s"] {
  width: 100%;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────── */
/* NUOVI ELEMENTI: icona lente e mini-thumb prodotto           */
/* ─────────────────────────────────────────────────────────── */

/* icona lente: default nascosta, mostrata via JS quando richiesto */
.wcsa-icon-search {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  background: no-repeat center center;
  background-size: contain;
  /* imposta qui l'URL della tua icona lente: */
  background-image: url("path/to/search-icon.svg");
}

/* miniatura prodotto: default nascosta, mostrata via JS quando richiesto */
.wcsa-thumb {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  vertical-align: middle;
  object-fit: cover;
  border-radius: 2px;
  background: #f5f5f5;
}

/* ─────────────────────────────────────────────────────────── */
/* UTILIZZO IN JS:                                            */
/*  - per mostrare l'icona, JS aggiunge .wcsa-icon-search  */
/*  - per mostrare la thumb, JS inserisce <img class="wcsa-thumb" ...> */
/*  - i container <li> si adeguano di conseguenza           */
/*                                                           */
/* Puoi sovrascrivere le dimensioni o il percorso immagine   */
/* direttamente dal tuo tema o inserendo inline-style via   */
/* wp_add_inline_style, utilizzando le nuove opzioni admin  */
/*                                                           */
/* Esempio override dall’admin:                              */
/*   --thumb-size: 24px;                                     */
/*   --icon-url: url("...");                                 */
/*                                                           */
/* .wcsa-icon-search { width: var(--thumb-size); }          */
/* .wcsa-thumb      { width: var(--thumb-size); }           */
/* .wcsa-icon-search { background-image: var(--icon-url); } */
/* ─────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────── */
/* Focus mode: Desktop overlay + Mobile fullscreen (no overlay) */
/* ─────────────────────────────────────────────────────────── */

.wcsa-focus-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
}

/* In desktop l'overlay si vede */
body.wcsa-focus-desktop .wcsa-focus-overlay {
  display: block;
}

/* In mobile NON deve vedersi mai */
body.wcsa-focus-mobile .wcsa-focus-overlay {
  display: none !important;
}

/* Desktop: wrapper flottante sopra overlay */
body.wcsa-focus-desktop .wcsa-focus-target.wcsa-focus-floating {
  position: fixed !important;
  top: var(--wcsa-focus-top);
  left: var(--wcsa-focus-left);
  width: var(--wcsa-focus-width) !important;
  z-index: 10000;
  /* Ripristina il layout flex del form affinché l'input si estenda */
  display: flex !important;
  align-items: center !important;
}

/* Desktop focus mode: l'input si espande a riempire tutto lo spazio disponibile */
/* (in Storefront il form è flex ma l'input perde flex:1 quando il form va in position:fixed) */
body.wcsa-focus-desktop .wcsa-focus-target.wcsa-focus-floating input[name="s"],
body.wcsa-focus-desktop .wcsa-focus-target.wcsa-focus-floating input[type="search"],
body.wcsa-focus-desktop .wcsa-focus-target.wcsa-focus-floating input.s {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Placeholder (solo desktop) per non far "saltare" il layout */
.wcsa-focus-placeholder {
  display: block;
}

/* Mobile: fullscreen bianco, solo campo e dropdown */
body.wcsa-focus-mobile {
  overflow: hidden;
}

body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 16px;
  --wcsa-actions-inset: 10px;
  --wcsa-close-gap: -8px;
  box-sizing: border-box;
  /*
   * IMPORTANT: lascia spazio agli elementi floating (es. pulsante AI) che vivono su <body>.
   * Se questo z-index è più alto del pulsante AI, su mobile in focus-mode il bottone resta "dietro"
   * al full-screen wrapper e sembra sparire.
   */
  z-index: 2147483644;
  overflow: hidden;
}


/* ── Mobile focus mode ────────────────────────────────────── */
/*
 * Layout finale: tutti i bottoni DENTRO la barra di ricerca, a destra.
 *
 *   ┌─────────────────────────────────────────────────┐
 *   │  Cerca qualsiasi cosa...    [AI mode] [✕] [🔍] │
 *   └─────────────────────────────────────────────────┘
 *
 * Form = position:relative, display:block
 * Label = display:block, width:100%
 * Input = width:100%, padding-right largo per i 3 bottoni
 * Bottoni = position:absolute dentro il form, allineati a destra dell'input
 *
 * Ordine da destra verso sinistra:
 *   right:8px   → lente (submit)    = 44px
 *   right:58px  → X chiusura        = 44px
 *   right:108px → AI mode           (gestito dal JS)
 */

/* Form fullscreen: position:relative per ancorare i bottoni assoluti */
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen {
  position: fixed !important;
  display: block !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* C-36: custom searchbar in mobile focus fullscreen mode.
 * The base .wcsa-custom-bar rule sets `margin: 12px 0` to give breathing
 * room when the bar lives inline in a builder column. When the bar gets
 * promoted to fullscreen focus mode, that vertical margin leaks at the
 * top — leaving a visible strip of the underlying page above the form.
 * We only clear the margin here; the existing fullscreen rule above
 * (and the admin-bar offset rule below) already handle position/inset,
 * so this fix stays minimal and does not regress logged-in admin-bar
 * layout. */
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-focus-target.wcsa-fullscreen {
  margin: 0 !important;
}

/* Label che contiene l'input: larghezza piena */
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen > label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Input: piena larghezza, padding-right per i 3 bottoni (3×44px + gap) */
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen input[name="s"],
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen input[type="search"],
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen input.s {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  box-sizing: border-box !important;
  padding-left: 12px !important;
  padding-right: 170px !important; /* spazio per: AI(max90) + X(40) + lente(40) + gap */
  margin: 0 !important;
  position: relative !important;
  top: auto !important; left: auto !important;
  bottom: auto !important; right: auto !important;
  inset: auto !important;
  /* iOS Safari auto-zoom prevention: min 16px font-size in mobile.
     Se il tema dichiara meno di 16px, iOS zoomerebbe automaticamente
     l'intera viewport al focus dell'input, rompendo il fullscreen. */
  font-size: 16px !important;
}

/* Submit (lente): assoluto, primo da destra — usa inset shorthand per battere il tema */
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen button.searchsubmit,
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen button[type="submit"],
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen input[type="submit"],
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen .search-submit {
  position: absolute !important;
  inset: auto !important;          /* reset tutti i lati */
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Testo nascosto senza text-indent (che può spostare l'elemento) */
  font-size: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23555' d='M10 2a8 8 0 1 0 5.293 13.707l4.5 4.5a1 1 0 0 0 1.414-1.414l-4.5-4.5A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12A6 6 0 0 1 10 4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  border: none !important;
  border-left: 1px solid #e0e0e0 !important;
  border-radius: 0 6px 6px 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: block !important;
  vertical-align: top !important;
}

/* X di chiusura: assoluta, seconda da destra */
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen .wcsa-focus-close {
  position: absolute !important;
  inset: auto !important;
  top: 12px !important;
  right: 58px !important;      /* 12(gap) + 40(lente) + 6(gap) */
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #555 !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  z-index: 11 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

/* ── Nota pill AI ──
 * In mobile focus mode il JS imposta position:absolute, right:108px, top:12px
 * (vedere wcsaUpdateAiPillLayout) — si posiziona terzo da destra dentro l'input.
 * ── */

/* Dropdown: sotto l'input, piena larghezza */
body.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen .wcsa-suggestions {
  position: relative !important;
  top: 8px !important;
  left: 0 !important;
  width: 100% !important;
  max-height: calc(100vh - 100px) !important;
  overflow: auto;
  border: 0;
}

/* C-51: Admin bar offset on mobile focus fullscreen — DISABLED universally.
 *
 * The original 46px / 32px offset was meant to keep the focus overlay below
 * the WordPress admin bar when the user is logged in. On desktop that works
 * fine (admin bar is always visible). On mobile though, WordPress (and
 * almost every theme — Storefront, Woodmart, Astra, GeneratePress, Twenty
 * Twenty-Three, etc.) AUTO-HIDES the admin bar after the user scrolls just
 * a few pixels, but keeps `body.admin-bar` class on the <body>. The CSS
 * rule then kept reserving 46px of empty space at the top — visible as a
 * strip of the underlying page above the focus overlay.
 *
 * C-39 fixed this for our custom searchbar only. C-51 extends the fix to
 * ALL `.wcsa-focus-target.wcsa-fullscreen` elements (theme-native search
 * forms included), because the same WordPress behavior affects them
 * identically. Our overlay z-index (2147483644 / max-int - 3) ensures the
 * overlay sits above any actually-visible admin bar — so we can safely
 * pin it to top:0 in all cases.
 *
 * The C-39 scoped rules below remain (now redundant for custom bars) but
 * are kept for documentation continuity. */
body.admin-bar.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen {
  top: 0 !important;
  height: 100% !important;
}
@media (min-width: 783px) {
  body.admin-bar.wcsa-focus-mobile .wcsa-focus-target.wcsa-fullscreen {
    top: 0 !important;
    height: 100% !important;
  }
}

/* C-39 (now redundant after C-51, kept for history): explicit override for
 * .wcsa-custom-bar. Was originally needed when the parent rule above still
 * forced 46px offset on theme bars. Keep it — costs nothing and stays
 * future-proof if the parent rule is ever reintroduced. */
body.admin-bar.wcsa-focus-mobile .wcsa-custom-bar.wcsa-focus-target.wcsa-fullscreen {
  top: 0 !important;
  height: 100% !important;
}
@media (min-width: 783px) {
  body.admin-bar.wcsa-focus-mobile .wcsa-custom-bar.wcsa-focus-target.wcsa-fullscreen {
    top: 0 !important;
    height: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────── */
/* C-53: Custom searchbar in MOBILE FOCUS FULLSCREEN MODE      */
/* ─────────────────────────────────────────────────────────── */
/*
 * When .wcsa-custom-bar enters mobile focus fullscreen mode, JS wraps
 * input + submit (lens) + close (X) inside a .wcsa-cb-mobile-row flex
 * container (see C-53 patch in autocomplete.js). That container becomes
 * the "real" search bar, with a SINGLE outer border carrying the chosen
 * style (Minimal / Rounded / Bold). The form itself becomes the white
 * fullscreen panel — no borders, no padding on the children, no inner
 * decorations.
 *
 * Layout:
 *   <form .wcsa-custom-bar .wcsa-style-X .wcsa-fullscreen>   ← white panel
 *     <div .wcsa-cb-mobile-row>                              ← styled row
 *       <input .wcsa-cb-input>
 *       <button .wcsa-cb-submit>🔍</button>
 *       <button .wcsa-focus-close>✕</button>
 *     </div>
 *     <ul .wcsa-suggestions>...</ul>                         ← dropdown
 *   </form>
 */

/* Fullscreen form: white panel covering the viewport, padding around
 * the styled row. Drop the per-style decoration on the form itself. */
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-focus-target.wcsa-fullscreen {
  background: #fff !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* The synthetic row that wraps input + submit + close. */
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-fullscreen .wcsa-cb-mobile-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  height: 42px;
  padding: 0 0 0 14px;
  /* CSS variables for the per-style divider color */
  --wcsa-row-divider: #d1d5db;
}

/* Per-style overrides on the row */
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-style-minimal.wcsa-fullscreen .wcsa-cb-mobile-row {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  height: 42px;
  padding: 0 0 0 14px;
  box-shadow: none;
  --wcsa-row-divider: #d1d5db;
}
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-style-rounded.wcsa-fullscreen .wcsa-cb-mobile-row {
  background: #f3f4f6;
  border: 2px solid transparent;
  border-radius: 999px;
  height: 48px;
  padding: 0 0 0 22px;
  box-shadow: none;
  --wcsa-row-divider: #d1d5db;
}
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-style-bold.wcsa-fullscreen .wcsa-cb-mobile-row {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  height: 52px;
  padding: 0 0 0 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --wcsa-row-divider: #e5e7eb;
}

/* Input: naked, no border, no outline, transparent bg.
 * Override the JS-applied inline styles (padding-right:170px, width, etc.) */
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-fullscreen .wcsa-cb-mobile-row .wcsa-cb-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #1a1a1a !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-fullscreen .wcsa-cb-mobile-row .wcsa-cb-input:focus,
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-fullscreen .wcsa-cb-mobile-row .wcsa-cb-input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-style-bold.wcsa-fullscreen .wcsa-cb-mobile-row .wcsa-cb-input {
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* Submit (lens) + close (X) buttons: icon-only, fixed padding,
 * vertical divider on the LEFT via border-left. */
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-fullscreen .wcsa-cb-mobile-row .wcsa-cb-submit,
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-fullscreen .wcsa-cb-mobile-row .wcsa-focus-close {
  position: static !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 60% !important;
  padding: 0 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--wcsa-row-divider) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: var(--wcsa-cb-icon, #6b7280) !important;
  font-size: 16px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  /* Cancel right/top/left absolute positioning forced by other rules */
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

/* Suggestions dropdown: sits below the row, takes full available width
 * up to the form's padding. Force it back to a regular block so the
 * theme-specific positioning rules (absolute, narrow widths) don't
 * apply in this fullscreen mobile context. */
body.wcsa-focus-mobile .wcsa-custom-bar.wcsa-fullscreen > .wcsa-suggestions {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 0 !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────── */
/* C-55: Mobile focus mode OPEN transitions (Pro)              */
/* ─────────────────────────────────────────────────────────── */
/*
 * Four transition flavors selectable from admin (Pro). The JS sets
 * `data-wcsa-mtr="<kind>"` on <body> right after the fullscreen wrapper
 * is appended, then adds `.wcsa-mtr-in` on the next animation frame so
 * the browser interpolates between the two states.
 *
 * After ~450ms the JS removes both the attribute and the class so the
 * bar lives in its plain state for the rest of the focus session and
 * subsequent open/close cycles aren't affected.
 *
 * The CSS only targets the focus target (the fullscreen wrapper).
 * Theme-native searchbars and our custom bar both get the same effect
 * since both end up with `.wcsa-focus-target.wcsa-fullscreen`.
 */

/* --- FADE (200ms) --------------------------------------------------- */
body[data-wcsa-mtr="fade"] .wcsa-focus-target.wcsa-fullscreen {
  opacity: 0 !important;
}
body[data-wcsa-mtr="fade"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen {
  opacity: 1 !important;
  transition: opacity 200ms ease !important;
}

/* --- SLIDE-DOWN (280ms) --------------------------------------------- */
body[data-wcsa-mtr="slide"] .wcsa-focus-target.wcsa-fullscreen {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
}
body[data-wcsa-mtr="slide"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease !important;
}

/* --- SCALE-FADE (220ms) --------------------------------------------- */
body[data-wcsa-mtr="scale"] .wcsa-focus-target.wcsa-fullscreen {
  transform: scale(0.96) !important;
  opacity: 0 !important;
  transform-origin: center top !important;
}
body[data-wcsa-mtr="scale"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

/* --- REVEAL (320ms composite) --------------------------------------- */
/* The reveal effect is a composite: white surface fades in first, then
 * the bar drops from -30px, then the suggestions fade in. We use
 * transition-delay to stagger them without needing extra JS. */
body[data-wcsa-mtr="reveal"] .wcsa-focus-target.wcsa-fullscreen {
  opacity: 0 !important;
}
body[data-wcsa-mtr="reveal"] .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-mobile-row,
body[data-wcsa-mtr="reveal"] .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-input,
body[data-wcsa-mtr="reveal"] .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-submit,
body[data-wcsa-mtr="reveal"] .wcsa-focus-target.wcsa-fullscreen .wcsa-focus-close {
  transform: translateY(-30px) !important;
  opacity: 0 !important;
}
body[data-wcsa-mtr="reveal"] .wcsa-focus-target.wcsa-fullscreen .wcsa-suggestions {
  opacity: 0 !important;
}
body[data-wcsa-mtr="reveal"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen {
  opacity: 1 !important;
  transition: opacity 200ms ease !important;
}
body[data-wcsa-mtr="reveal"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-mobile-row,
body[data-wcsa-mtr="reveal"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-input,
body[data-wcsa-mtr="reveal"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-submit,
body[data-wcsa-mtr="reveal"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen .wcsa-focus-close {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1) 60ms, opacity 200ms ease 60ms !important;
}
body[data-wcsa-mtr="reveal"].wcsa-mtr-in .wcsa-focus-target.wcsa-fullscreen .wcsa-suggestions {
  opacity: 1 !important;
  transition: opacity 240ms ease 180ms !important;
}

/* Reduce-motion accessibility: respect the user's OS preference */
@media (prefers-reduced-motion: reduce) {
  body[data-wcsa-mtr] .wcsa-focus-target.wcsa-fullscreen,
  body[data-wcsa-mtr] .wcsa-focus-target.wcsa-fullscreen * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ─────────────────────────────────────────────────────────── */
/* C-56: Mobile focus mode CLOSE transitions (Pro)             */
/* ─────────────────────────────────────────────────────────── */
/*
 * Mirror of the open transitions. JS adds `.wcsa-mtr-out` on body
 * (instead of `.wcsa-mtr-in`) when the user closes the focus mode,
 * then waits for the animation duration before doing the DOM cleanup.
 *
 * The "out" rules set the END state back to the initial pre-open
 * state, with the same transition timing function for visual coherence.
 */

/* --- FADE OUT (200ms) ----------------------------------------------- */
body[data-wcsa-mtr="fade"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen {
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}

/* --- SLIDE OUT (280ms) ---------------------------------------------- */
body[data-wcsa-mtr="slide"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  transition: transform 280ms cubic-bezier(0.7, 0, 0.84, 0), opacity 200ms ease 80ms !important;
}

/* --- SCALE OUT (220ms) ---------------------------------------------- */
body[data-wcsa-mtr="scale"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen {
  transform: scale(0.96) !important;
  opacity: 0 !important;
  transform-origin: center top !important;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.36, 0, 0.66, -0.56) !important;
}

/* --- REVEAL OUT (320ms composite, reversed order) ------------------- */
body[data-wcsa-mtr="reveal"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen .wcsa-suggestions {
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}
body[data-wcsa-mtr="reveal"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-mobile-row,
body[data-wcsa-mtr="reveal"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-input,
body[data-wcsa-mtr="reveal"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen .wcsa-cb-submit,
body[data-wcsa-mtr="reveal"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen .wcsa-focus-close {
  transform: translateY(-30px) !important;
  opacity: 0 !important;
  transition: transform 260ms cubic-bezier(0.7, 0, 0.84, 0) 80ms, opacity 200ms ease 80ms !important;
}
body[data-wcsa-mtr="reveal"].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen {
  opacity: 0 !important;
  transition: opacity 200ms ease 200ms !important;
}

/* Reduce-motion accessibility also applies to the close transition */
@media (prefers-reduced-motion: reduce) {
  body[data-wcsa-mtr].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen,
  body[data-wcsa-mtr].wcsa-mtr-out .wcsa-focus-target.wcsa-fullscreen * {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────── */
/* Cronologia ricerche                                         */
/* ─────────────────────────────────────────────────────────── */

/* Cronologia ricerche: layout unico per tutti i temi */
.wcsa-suggestions li.wcsa-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px !important;
  margin: 0 !important;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
}

.wcsa-history-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wcsa-history-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-sizing: border-box;
  position: relative;
}

.wcsa-history-icon::before,
.wcsa-history-icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}

.wcsa-history-icon::before {
  width: 2px;
  height: 6px;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
}

.wcsa-history-icon::after {
  width: 4px;
  height: 2px;
  left: 50%;
  top: 7px;
  transform: translateX(0);
}

.wcsa-history-remove {
  border: none;
  background: none;
  padding: 0 4px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: inherit;
  opacity: 0.7;
}

.wcsa-history-remove:hover,
.wcsa-history-remove:focus {
  opacity: 1;
  text-decoration: underline;
}

/* ── Freccia cronologia (punta in basso-sinistra, stessa direzione diagonale invertita) ── */
.wcsa-history-arrow {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 4px;
  flex-shrink: 0;
}
.wcsa-arrow-history {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") no-repeat center center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: rotate(180deg);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.wcsa-suggestions li.wcsa-history-item:hover .wcsa-arrow-history,
.wcsa-suggestions li.wcsa-history-item.wcsa-selected .wcsa-arrow-history {
  opacity: 0.85;
}

/* Riga di loading nel dropdown autocomplete */
.wcsa-suggestions .wcsa-loading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  opacity: 0.85;
}

.wcsa-suggestions .wcsa-loading-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: wcsa-spin 0.6s linear infinite;
}

@keyframes wcsa-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Reset dei bottoni interni per non ereditare padding/line-height del tema */
.wcsa-suggestions .wcsa-history-item button {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit;
  line-height: 1.3;
  text-align: left;
}

/* Icona orologio */
.wcsa-suggestions .wcsa-history-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* Testo della history (usa una delle classi, a seconda di come l’abbiamo chiamata) */
.wcsa-suggestions .wcsa-history-label,
.wcsa-suggestions .wcsa-history-text {
  flex: 1 1 auto;
  margin-left: 8px;
  margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottone "Elimina" */
.wcsa-suggestions .wcsa-history-remove {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 4px;
  background: #f2f2f2;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  border: 0;
}

/* Tuning specifico per focus mode mobile (righe un filo più compatte) */
@media (max-width: 768px) {
  .wcsa-focus-mobile .wcsa-suggestions .wcsa-history-item {
    padding: 4px 8px !important;
  }

  .wcsa-focus-mobile .wcsa-suggestions .wcsa-history-remove {
    padding: 4px 8px;
  }
}

/* Pulsante "Chiedi alla IA" accanto al campo di ricerca */
.wcsa-ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wcsa-ai-button:hover {
  background: #e9e9e9;
  border-color: #bbb;
}

/*
  IA Mode (stile "pill" dentro il campo)
  Nota: per compatibilità con temi diversi, la spaziatura a destra dell'input
  viene calcolata in JS in base al padding-right originale + larghezza del pill.
*/
.wcsa-ai-input-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

/* Bottone IA (pill stile Google) */
/* ═══════════════════════════════════════════════════════════════
   AI PILL BUTTON — Stili blindati: nessun tema può sovrascrivere.
   Usa !important su OGNI proprietà per vincere su qualsiasi
   selettore di qualsiasi tema (Woodmart, Flatsome, Astra, ecc.)
   ═══════════════════════════════════════════════════════════════ */

/* 1) RESET COMPLETO — azzera tutto ciò che i temi applicano ai <button> */
.wcsa-ai-pill,
.wcsa-ai-pill.wcsa-ai-pill-floating,
button.wcsa-ai-pill,
button.wcsa-ai-pill-floating {
  /* Reset box model */
  margin: 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: none !important;

  /* Reset tipografia — temi come Woodmart forzano font/size/weight sui button */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  vertical-align: middle !important;
  word-spacing: normal !important;

  /* Reset background — il tema NON deve toccare il nostro sfondo */
  background: var(--wcsa-ai-bg, rgba(255,255,255,0.95)) !important;
  background-image: none !important;
  background-clip: padding-box !important;

  /* Reset colore testo */
  color: var(--wcsa-ai-color, #333) !important;

  /* Reset bordi */
  border-radius: var(--wcsa-ai-radius, 999px) !important;
  border-style: var(--wcsa-ai-border-style, solid) !important;
  border-width: var(--wcsa-ai-border-width, 1px) !important;
  border-color: var(--wcsa-ai-border-color, rgba(0,0,0,0.18)) !important;

  /* Reset ombre e outline */
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;

  /* Posizionamento: absolute dentro .wcsa-wrapper (position:relative) */
  /* Le coordinate top/right vengono impostate dal JS con offsetTop/offsetLeft */
  position: absolute !important;
  right: auto;
  top: auto;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;

  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  max-height: none !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  gap: 5px !important;

  /* Interazione */
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  pointer-events: auto !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  touch-action: manipulation !important;

  /* Transizioni solo per colori hover (no position, no opacity) */
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease !important;

  /* Reset vari che i temi possono applicare */
  filter: none !important;
  opacity: 1;
  clip: auto !important;
  clip-path: none !important;
  -webkit-tap-highlight-color: transparent !important;
  isolation: auto !important;
  contain: none !important;
  content-visibility: auto !important;
}

/* 2) HOVER — stesso livello di blindatura */
.wcsa-ai-pill:hover,
.wcsa-ai-pill.wcsa-ai-pill-floating:hover,
button.wcsa-ai-pill:hover,
button.wcsa-ai-pill-floating:hover {
  background: var(--wcsa-ai-bg-hover, rgba(245,245,245,0.95)) !important;
  border-color: var(--wcsa-ai-border-color-hover, rgba(0,0,0,0.28)) !important;
  color: var(--wcsa-ai-color-hover, #333) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3) FOCUS — rimuovi ring dei temi, aggiungi il nostro sottile */
.wcsa-ai-pill:focus,
.wcsa-ai-pill:focus-visible,
button.wcsa-ai-pill:focus,
button.wcsa-ai-pill:focus-visible {
  outline: 2px solid rgba(0,0,0,0.2) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* 4) ACTIVE — nessun effetto "pressed" dal tema */
.wcsa-ai-pill:active,
button.wcsa-ai-pill:active {
  background: var(--wcsa-ai-bg-hover, rgba(245,245,245,0.95)) !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

/* 4b) AI SPARKLE ICON — eredita il colore del testo (currentColor) */
.wcsa-ai-pill .wcsa-ai-icon,
button.wcsa-ai-pill .wcsa-ai-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  fill: currentColor !important;
  opacity: 0.85;
  transition: opacity 0.15s ease !important;
  pointer-events: none !important;
}
.wcsa-ai-pill:hover .wcsa-ai-icon,
button.wcsa-ai-pill:hover .wcsa-ai-icon {
  opacity: 1;
}
.wcsa-ai-pill .wcsa-ai-pill-label {
  display: inline !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5) ANIMATED EDGE MODE — Gradiente rotante SOLO nei bordi
   Tecnica: background multi-layer
     Layer 1: sfondo opaco (padding-box) → copre l'area interna
     Layer 2: conic-gradient (border-box) → visibile solo nel bordo
   Border-width segue il valore impostato nelle AI Settings
   ═══════════════════════════════════════════════════════════════════════ */
.wcsa-ai-pill.wcsa-ai-pill-animated,
button.wcsa-ai-pill.wcsa-ai-pill-animated {
  border-color: transparent !important;
  border-width: var(--wcsa-ai-border-width, 2px) !important;
  border-style: solid !important;

  background-image:
    linear-gradient(
      var(--wcsa-ai-bg-solid, #ffffff),
      var(--wcsa-ai-bg-solid, #ffffff)
    ),
    conic-gradient(
      from var(--wcsa-border-angle, 0deg),
      var(--wcsa-anim-c1, #6366f1),
      var(--wcsa-anim-c2, #8b5cf6),
      var(--wcsa-anim-c3, #ec4899),
      var(--wcsa-anim-c1, #6366f1)
    ) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;

  /* Solo rotazione bordo */
  animation: wcsaBorderRotate 2.5s linear infinite !important;
}

/* Hover: sfondo hover opaco, nessun effetto su background/testo */
.wcsa-ai-pill.wcsa-ai-pill-animated:hover,
button.wcsa-ai-pill.wcsa-ai-pill-animated:hover {
  background-image:
    linear-gradient(
      var(--wcsa-ai-bg-solid-hover, #f5f5f5),
      var(--wcsa-ai-bg-solid-hover, #f5f5f5)
    ),
    conic-gradient(
      from var(--wcsa-border-angle, 0deg),
      var(--wcsa-anim-c1, #6366f1),
      var(--wcsa-anim-c2, #8b5cf6),
      var(--wcsa-anim-c3, #ec4899),
      var(--wcsa-anim-c1, #6366f1)
    ) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  border-color: transparent !important;
  filter: none !important;
}

/* 5) BEFORE/AFTER pseudo-elementi — alcuni temi aggiungono decorazioni */
.wcsa-ai-pill::before,
.wcsa-ai-pill::after,
button.wcsa-ai-pill::before,
button.wcsa-ai-pill::after {
  content: none !important;
  display: none !important;
}

/* 6) MOBILE */
@media (max-width: 768px) {
  .wcsa-ai-pill,
  button.wcsa-ai-pill {
    font-size: 11px !important;
    min-height: 24px !important;
    padding: 0 9px !important;
  }
}

/* ─────────────────────────────────────────────────────────── */
/* AI Chat Panel                                               */
/* ─────────────────────────────────────────────────────────── */
.wcsa-ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  display: none;
  z-index: 2147483645;
}

.wcsa-ai-panel {
  position: fixed;
  display: none;
  z-index: 2147483646;
  max-width: calc(100vw - 16px);
}

.wcsa-ai-panel * {
  box-sizing: border-box;
}

/* Reset globale per TUTTI i button dentro il pannello chat — previene override dei temi */
.wcsa-ai-panel button,
.wcsa-ai-panel input[type="text"],
.wcsa-ai-panel input[type="submit"],
.wcsa-ai-panel button[type="button"],
.wcsa-ai-panel button[type="submit"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.wcsa-ai-panel-inner {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(70vh, 560px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wcsa-ai-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: #fafafa !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.wcsa-ai-header-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.wcsa-ai-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wcsa-ai-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.wcsa-ai-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wcsa-ai-panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #222 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wcsa-ai-panel-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  cursor: pointer !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  color: #555 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-family: inherit !important;
  transition: background 0.15s !important;
}

.wcsa-ai-panel-close:hover,
.wcsa-ai-panel-close:focus {
  background: rgba(0, 0, 0, 0.06) !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: #333 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.wcsa-ai-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.wcsa-ai-new-chat {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  color: #888 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.15s, color 0.15s !important;
}

.wcsa-ai-new-chat:hover,
.wcsa-ai-new-chat:focus {
  background: rgba(220, 53, 69, 0.1) !important;
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.wcsa-ai-new-chat svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ── Area messaggi chat (scrollabile) ── */
.wcsa-ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}

/* ── Bolla messaggio ── */
.wcsa-chat-bubble {
  max-width: 88%;
  animation: wcsaChatBubbleIn 0.25s ease-out;
}

@keyframes wcsaChatBubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wcsa-chat-bubble-text {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* AI bubble (sinistra) */
.wcsa-chat-bubble-ai {
  align-self: flex-start;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.wcsa-chat-bubble-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
}

.wcsa-chat-bubble-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.wcsa-chat-bubble-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wcsa-chat-bubble-ai .wcsa-chat-bubble-text {
  background: var(--wcsa-msg-ai-bg, #f0f2f5);
  color: var(--wcsa-msg-ai-text, #1a1a1a);
  border-bottom-left-radius: 4px;
}

/* User bubble (destra) */
.wcsa-chat-bubble-user {
  align-self: flex-end;
}

.wcsa-chat-bubble-user .wcsa-chat-bubble-text {
  background: var(--wcsa-msg-user-bg, #e8740e);
  color: var(--wcsa-msg-user-text, #ffffff);
  border-bottom-right-radius: 4px;
}

/* ── "Sto pensando..." animato ── */
.wcsa-chat-thinking .wcsa-thinking-dots {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13.5px;
  color: #888;
}

.wcsa-thinking-dots .wcsa-dot-1,
.wcsa-thinking-dots .wcsa-dot-2,
.wcsa-thinking-dots .wcsa-dot-3 {
  display: inline-block;
  animation: wcsaDotPulse 1.4s ease-in-out infinite;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
}

.wcsa-thinking-dots .wcsa-dot-2 {
  animation-delay: 0.2s;
}

.wcsa-thinking-dots .wcsa-dot-3 {
  animation-delay: 0.4s;
}

@keyframes wcsaDotPulse {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ── Schede prodotto SOTTO la bolla AI ── */
.wcsa-chat-products {
  margin: 6px 0 4px 34px; /* 34px = avatar (26px) + gap (8px), allineato col testo */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.wcsa-chat-product-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: box-shadow 0.15s ease;
  animation: wcsaChatBubbleIn 0.3s ease-out;
  flex: 1 1 auto;
  min-width: 180px;
  max-width: 100%;
}

.wcsa-chat-product-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wcsa-chat-product-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.wcsa-chat-product-info {
  min-width: 0;
  flex: 1;
}

.wcsa-chat-product-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  /* v1.0.0 — Color is now customizable from the admin (AI Settings →
     Chat bubble colors → Product title color). Falls back to the brand
     orange (#e8740e) if the CSS variable is not set, so existing installs
     look identical out of the box. */
  color: var(--wcsa-product-title-color, #e8740e);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wcsa-chat-product-name:hover {
  text-decoration: underline;
}

.wcsa-chat-product-price {
  font-size: 12px;
  color: #555;
  margin-top: 2px;
  font-weight: 500;
}

/* ── Footer con input ── */
.wcsa-ai-panel-footer {
  padding: 10px 14px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #fafafa !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.wcsa-ai-reply {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.wcsa-ai-reply-input {
  flex: 1 !important;
  min-width: 0 !important;
  border: 1px solid var(--wcsa-reply-border, rgba(0, 0, 0, 0.14)) !important;
  border-radius: var(--wcsa-reply-radius, 22px) !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  background: #fff !important;
  background-color: #fff !important;
  color: #222 !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.wcsa-ai-reply-input:focus {
  border-color: var(--wcsa-reply-border-active, #e8740e) !important;
  box-shadow: none !important;
  outline: none !important;
  background: #fff !important;
}

.wcsa-ai-reply-input:disabled {
  background: #f5f5f5 !important;
  color: #999 !important;
}

/* ════════════════════════════════════════════════════════════════════
 * iOS Safari auto-zoom fix
 * ════════════════════════════════════════════════════════════════════
 *
 * iOS Safari (e altri browser mobile come Chrome iOS) fa AUTO-ZOOM
 * sulla viewport quando l'utente tappa su un campo <input> o <textarea>
 * che ha font-size MINORE di 16px. È un "feature" di accessibility per
 * rendere il testo più leggibile, ma rompe il layout della chat AI:
 * dopo aver tappato l'input, l'utente deve fare pinch-zoom inverso
 * per rivedere il pannello chat completo.
 *
 * Fix standard: font-size MINIMO 16px sui campi input in mobile.
 * Lo applichiamo SOLO su mobile (max-width: 782px = WordPress mobile
 * breakpoint) per preservare il design originale 13.5px su desktop.
 *
 * Trigger: testato su iPhone Safari iOS 17+. Bug confermato anche
 * su Chrome iOS (usa WebKit) e Firefox iOS (idem).
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 782px) {
  .wcsa-ai-reply-input {
    font-size: 16px !important;
  }
}

.wcsa-ai-reply-send {
  border: none !important;
  border-style: none !important;
  border-width: 0 !important;
  background: var(--wcsa-submit-bg, #e8740e) !important;
  background-color: var(--wcsa-submit-bg, #e8740e) !important;
  background-image: none !important;
  color: var(--wcsa-submit-text, #fff) !important;
  border-radius: var(--wcsa-submit-radius, 10px) !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  line-height: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.wcsa-ai-reply-send:hover,
.wcsa-ai-reply-send:focus {
  background: var(--wcsa-submit-bg-hover, #d06500) !important;
  background-color: var(--wcsa-submit-bg-hover, #d06500) !important;
  color: var(--wcsa-submit-text-hover, #fff) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Placeholder overlay inner span ── */
.wcsa-plc-inner {
  display: inline-block;
  white-space: nowrap;
}

/* Mobile: il pulsante AI deve comparire solo in Focus Mode */
@media (max-width: 767px) {
  body:not(.wcsa-focus-active) .wcsa-ai-pill {
    display: none !important;
  }
}

/* ── Mobile fullscreen chat ── */
body.wcsa-ai-body-locked {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

.wcsa-ai-panel.wcsa-ai-mobile-fs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 2147483647 !important;
}

.wcsa-ai-panel.wcsa-ai-mobile-fs .wcsa-ai-panel-inner {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  height: 100% !important;
  max-height: 100% !important;
  /* Spazio per la tastiera iOS: usiamo dvh se supportato */
  height: 100dvh !important;
}

.wcsa-ai-panel.wcsa-ai-mobile-fs .wcsa-ai-chat-messages {
  min-height: 0 !important;
  flex: 1 !important;
}

.wcsa-ai-panel.wcsa-ai-mobile-fs .wcsa-ai-panel-footer {
  /* Su iOS la tastiera spinge il footer — padding-bottom safe area */
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

.wcsa-ai-panel.wcsa-ai-mobile-fs .wcsa-ai-panel-header {
  /* Safe area top (notch iPhone) */
  padding-top: max(10px, env(safe-area-inset-top)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   AI TAB STYLE BUTTON
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tab base: position:fixed impostato da JS, zero impatto sul DOM ── */
.wcsa-ai-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* position: fixed viene impostato inline da JS */
  /* z-index: calcolato dinamicamente da JS in base al contesto dell'anchor */
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  pointer-events: auto !important;

  /* Reset aggressivo per temi (Woodmart, Flatsome, ecc. applicano stili ai button) */
  min-height: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-align: center !important;
  vertical-align: baseline !important;
  box-sizing: border-box !important;
  float: none !important;
  border-radius: 0 !important; /* sovrascritto da above/below */
  text-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: #fff !important;

  /* Custom properties per colori (sovrascritte da JS) */
  --wcsa-tab-c1: #f5a623;
  --wcsa-tab-c2: #e8740e;
  --wcsa-tab-shadow: rgba(245, 166, 35, 0.35);
  --wcsa-tab-shadow-strong: rgba(245, 166, 35, 0.5);

  /* Stato dormiente: linguetta ben visibile */
  background: linear-gradient(135deg, var(--wcsa-tab-c1), var(--wcsa-tab-c2)) !important;
  color: #fff !important;
  height: 18px !important;
  width: 160px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px var(--wcsa-tab-shadow) !important;
  transition: height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-radius 0.3s ease !important;
}

/* ── Posizione ABOVE: bordi arrotondati sopra ── */
.wcsa-ai-tab.wcsa-ai-tab-above {
  border-radius: 10px 10px 0 0 !important;
}

/* ── Posizione BELOW: bordi arrotondati sotto ── */
.wcsa-ai-tab.wcsa-ai-tab-below {
  border-radius: 0 0 10px 10px !important;
}

/* ── Contenuto interno (nascosto nello stato dormiente) ── */
.wcsa-ai-tab-content {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
}

.wcsa-ai-tab-avatar {
  flex-shrink: 0 !important;
}

.wcsa-ai-tab-label {
  letter-spacing: 0.02em !important;
}

.wcsa-ai-tab-sparkle {
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
}

/* ── Stato PEEK (animazione periodica richiamo) ── */
.wcsa-ai-tab.wcsa-ai-tab-peek {
  height: 28px !important;
  width: 180px !important;
  box-shadow: 0 3px 14px var(--wcsa-tab-shadow-strong) !important;
}
/* Mostra parzialmente il contenuto durante peek */
.wcsa-ai-tab.wcsa-ai-tab-peek .wcsa-ai-tab-content {
  opacity: 0.7 !important;
}

/* ── Stato HOVER / TAP (completamente espanso con contenuto visibile) ── */
.wcsa-ai-tab.wcsa-ai-tab-hover,
.wcsa-ai-tab:hover {
  height: 36px !important;
  width: auto !important;
  min-width: 180px !important;
  box-shadow: 0 4px 16px var(--wcsa-tab-shadow-strong) !important;
}
.wcsa-ai-tab.wcsa-ai-tab-above.wcsa-ai-tab-hover,
.wcsa-ai-tab.wcsa-ai-tab-above:hover {
  border-radius: 12px 12px 0 0 !important;
}
.wcsa-ai-tab.wcsa-ai-tab-below.wcsa-ai-tab-hover,
.wcsa-ai-tab.wcsa-ai-tab-below:hover {
  border-radius: 0 0 12px 12px !important;
}

/* Mostra contenuto in hover */
.wcsa-ai-tab.wcsa-ai-tab-hover .wcsa-ai-tab-content,
.wcsa-ai-tab:hover .wcsa-ai-tab-content {
  opacity: 1 !important;
}

/* ── Pulse dormiente (leggero respiro) ── */
@keyframes wcsaTabPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; box-shadow: 0 2px 12px var(--wcsa-tab-shadow-strong); }
}

.wcsa-ai-tab:not(.wcsa-ai-tab-hover):not(:hover):not(.wcsa-ai-tab-peek) {
  animation: wcsaTabPulse 3s ease-in-out infinite !important;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .wcsa-ai-tab {
    width: 120px !important;
    height: 14px !important;
  }
  .wcsa-ai-tab.wcsa-ai-tab-peek {
    width: 140px !important;
    height: 22px !important;
  }
  .wcsa-ai-tab.wcsa-ai-tab-hover,
  .wcsa-ai-tab:hover {
    min-width: 150px !important;
    height: 34px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   GPU PROMOTION — Rendering performante per elementi position:fixed
   ═══════════════════════════════════════════════════════════════════════ */

/* GPU layer promotion: rendering indipendente dal main thread.
   Riduce micro-jank durante scroll e animazioni. */
.wcsa-ai-tab,
.wcsa-plc-overlay {
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
}

/* Il pill usa translateY(-50%) inline da JS, promuoviamo solo con will-change */
.wcsa-ai-pill {
  will-change: transform, opacity !important;
}

/* ── Mobile focus mode: forza clipping del testo animato ──────────────────
 * In mobile focus mode l'overlay deve clippare il testo animato (translateX)
 * prima del pill AI. Il translateZ(0) del layer GPU blocca overflow:hidden
 * sui figli animati con transform in alcuni browser.
 * Soluzione: rimuoviamo translateZ(0) e usiamo contain:paint che forza
 * il clipping indipendentemente dalla compositing layer strategy.
 * ──────────────────────────────────────────────────────────────────────── */
body.wcsa-focus-mobile .wcsa-plc-overlay {
  transform: none !important;    /* rimuove translateZ che blocca overflow clip */
  contain: paint !important;     /* forza clipping al bordo del div */
  overflow: hidden !important;   /* ridondante ma esplicito */
}


/* ═══════════════════════════════════════════════════════════════════════
   ANIMATED EDGE MODE — @keyframes
   ═══════════════════════════════════════════════════════════════════════ */

/* Rotazione del bordo gradiente (usa @property iniettato dal JS) */
@keyframes wcsaBorderRotate {
  to { --wcsa-border-angle: 360deg; }
}

/* Il pulse glow sui bordi è gestito interamente via JavaScript
   (box-shadow inline !important) per vincere su qualsiasi reset CSS */

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATED PLACEHOLDER — dissolvenza tra due frasi
   Overlay appeso al body, posizionato con getBoundingClientRect()
   ═══════════════════════════════════════════════════════════════════════ */
.wcsa-plc-overlay {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transition: opacity 0.8s ease !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * C-26 — Price block in dropdown
 *
 * Renders the WooCommerce price (with sale formatting) inline next to
 * the product title. The server sends item.price_html produced by
 * WooCommerce's get_price_html() which already includes <del>/<ins>
 * tags for regular/sale prices and the configured currency symbol.
 * ────────────────────────────────────────────────────────────────────── */
.wcsa-price {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.92em;
  font-weight: 600;
  color: #2d4f00; /* discreet green tone — readable on light bg */
  white-space: nowrap;
}
.wcsa-price del {
  color: #999;
  font-weight: 400;
  margin-right: 4px;
}
.wcsa-price ins {
  text-decoration: none;
  color: #c44d00; /* sale price color (orange-red) for contrast */
  font-weight: 700;
}
.wcsa-price .woocommerce-Price-amount {
  /* Reset any inherited weirdness from the theme */
  font-style: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * C-29 — Custom searchbar (3 styles: minimal / rounded / bold)
 *
 * Rendered by the [wcsa_search_autocomplete] shortcode. The autocomplete.js
 * layer auto-detects this form (role="search" + input[type="search"])
 * and attaches the dropdown like any theme searchbar.
 *
 * Common base + 3 variants. Each variant is opted-in via the class
 * .wcsa-style-{minimal|rounded|bold} on the <form>.
 * ═══════════════════════════════════════════════════════════════════════ */

/* --- Common base (applies to all 3 styles) ---
 * C-31: full-width by default so the bar fills any builder column/row
 * (WPBakery, Elementor, Divi, Gutenberg). No max-width cap, no auto-centering;
 * the builder is the source of truth for outer width and side margins.
 * min-width:0 prevents flex/grid parents from forcing intrinsic min content width.
 */
.wcsa-custom-bar {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0;
  position: relative !important;
  font-family: inherit;
  box-sizing: border-box !important;
}
.wcsa-custom-bar * {
  box-sizing: border-box;
}

/* C-32 / C-33: when the suggestions dropdown is anchored to our custom
 * searchbar form, force it to fill the FULL bar width (left edge to right
 * edge), regardless of content width or any theme stylesheet override that
 * targets `form ul` / `.search-form ul` (Storefront, Woodmart, etc.).
 * We use form.wcsa-custom-bar > ul.wcsa-suggestions (higher specificity)
 * plus !important on the layout-critical properties so the rule wins over
 * any theme reset. Scoped to .wcsa-custom-bar only — theme-native search
 * forms keep their existing dropdown behavior untouched.
 */
form.wcsa-custom-bar > ul.wcsa-suggestions,
.wcsa-custom-bar > .wcsa-suggestions {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* C-34: Aggressive reset for input + submit button so no browser-native
 * border, outline, focus ring, or box-shadow ever appears inside the bar.
 * The bar is a SINGLE unified element with one outer border; the lens icon
 * (now inside the submit button) is the only chrome on the right, with a
 * subtle vertical divider separating it from the input (YouTube/Amazon
 * pattern). On focus, only the outer border changes color and a soft halo
 * appears OUTSIDE the bar — no inner borders, no inner shadows.
 */
.wcsa-custom-bar .wcsa-cb-input,
.wcsa-custom-bar .wcsa-cb-submit {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  font-family: inherit !important;
}
.wcsa-custom-bar .wcsa-cb-input:focus,
.wcsa-custom-bar .wcsa-cb-input:focus-visible,
.wcsa-custom-bar .wcsa-cb-submit:focus,
.wcsa-custom-bar .wcsa-cb-submit:focus-visible,
.wcsa-custom-bar .wcsa-cb-submit:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Theme-armor: many themes force a min-height (and sometimes max-height) on
 * inputs and buttons for consistent tap targets. That floor would override
 * our height:100% input and height:60% submit, stretching the vertical
 * divider (the submit's border-left) to the full bar height. We neutralize it
 * per style class (3-class specificity) so the rule wins over any theme,
 * present or future. Scoped to .wcsa-custom-bar only — theme-native search
 * fields keep their own sizing untouched. */
.wcsa-custom-bar.wcsa-style-minimal .wcsa-cb-input,
.wcsa-custom-bar.wcsa-style-minimal .wcsa-cb-submit,
.wcsa-custom-bar.wcsa-style-rounded .wcsa-cb-input,
.wcsa-custom-bar.wcsa-style-rounded .wcsa-cb-submit,
.wcsa-custom-bar.wcsa-style-bold .wcsa-cb-input,
.wcsa-custom-bar.wcsa-style-bold .wcsa-cb-submit {
  min-height: 0 !important;
  max-height: none !important;
  align-self: center !important;
  line-height: normal !important;
}

.wcsa-custom-bar .wcsa-cb-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: normal !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
}
.wcsa-custom-bar .wcsa-cb-input::placeholder {
  color: #999;
  opacity: 1;
}

/* The submit button is now icon-only (no visible label). The text "Search"
 * lives as screen-reader-text inside the button + aria-label, for a11y.
 * C-43: icon resting color is themable via --wcsa-cb-icon (Pro only;
 * Lite users get the default #6b7280 via the fallback). */
.wcsa-custom-bar .wcsa-cb-submit {
  flex-shrink: 0 !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  cursor: pointer;
  color: var(--wcsa-cb-icon, #6b7280) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color .15s ease;
}
.wcsa-custom-bar .wcsa-cb-submit:hover {
  color: var(--wcsa-cb-accent, #8BC34A) !important;
}
.wcsa-custom-bar .wcsa-cb-submit:active {
  transform: translateY(1px);
}

/* The lens icon span sits inside the submit button. */
.wcsa-custom-bar .wcsa-cb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Legacy markup safety: if a cached page still renders the old text-label
 * span, hide it so we don't get a stray "Search" word inside the button. */
.wcsa-custom-bar .wcsa-cb-submit-label { display: none !important; }

/* ─── STYLE 1: Minimal ──────────────────────────────────────────────────
 * Clean, thin border, no shadow, square corners, lens icon inside the
 * submit button on the right with a subtle vertical divider.
 * ──────────────────────────────────────────────────────────────────── */
.wcsa-custom-bar.wcsa-style-minimal {
  border: 1px solid var(--wcsa-cb-border, #d1d5db) !important;
  border-radius: 4px !important;
  background: var(--wcsa-cb-bg, #fff) !important;
  padding: 0 0 0 14px !important;
  height: 42px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wcsa-custom-bar.wcsa-style-minimal:focus-within {
  border-color: var(--wcsa-cb-accent, #8BC34A) !important;
  box-shadow: 0 0 0 3px var(--wcsa-cb-halo, rgba(139, 195, 74, 0.22)) !important;
}
.wcsa-custom-bar.wcsa-style-minimal .wcsa-cb-input {
  height: 100% !important;
  padding: 0 8px !important;
}
.wcsa-custom-bar.wcsa-style-minimal .wcsa-cb-submit {
  height: 60% !important;
  padding: 0 14px !important;
  border-left: 1px solid var(--wcsa-cb-divider, #d1d5db) !important;
}

/* ─── STYLE 2: Rounded ──────────────────────────────────────────────────
 * Pill shape, light grey background, lens icon inside the submit button
 * on the right with a subtle vertical divider. Focus highlight with the
 * Biwem green halo (Google-like aesthetic).
 * ──────────────────────────────────────────────────────────────────── */
.wcsa-custom-bar.wcsa-style-rounded {
  background: var(--wcsa-cb-bg, #f3f4f6) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 0 0 0 22px !important;
  height: 48px !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wcsa-custom-bar.wcsa-style-rounded:focus-within {
  background: var(--wcsa-cb-bg, #fff) !important;
  border-color: var(--wcsa-cb-accent, #8BC34A) !important;
  box-shadow: 0 0 0 4px var(--wcsa-cb-halo, rgba(139, 195, 74, 0.22)) !important;
}
.wcsa-custom-bar.wcsa-style-rounded .wcsa-cb-input {
  height: 100% !important;
  padding: 0 8px !important;
}
.wcsa-custom-bar.wcsa-style-rounded .wcsa-cb-submit {
  height: 60% !important;
  padding: 0 16px 0 14px !important;
  border-left: 1px solid var(--wcsa-cb-divider, #d1d5db) !important;
}

/* ─── STYLE 3: Bold ─────────────────────────────────────────────────────
 * Soft drop shadow, rounded corners, lens icon inside the submit button
 * on the right with a subtle vertical divider. Focus halo in Biwem green
 * (premium e-commerce aesthetic).
 * ──────────────────────────────────────────────────────────────────── */
.wcsa-custom-bar.wcsa-style-bold {
  background: var(--wcsa-cb-bg, #fff) !important;
  border: 1px solid var(--wcsa-cb-border, #e5e7eb) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 0 0 0 18px !important;
  height: 52px !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.wcsa-custom-bar.wcsa-style-bold:focus-within {
  border-color: var(--wcsa-cb-accent, #8BC34A) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 4px var(--wcsa-cb-halo, rgba(139, 195, 74, 0.22)) !important;
}
.wcsa-custom-bar.wcsa-style-bold .wcsa-cb-input {
  height: 100% !important;
  padding: 0 8px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.wcsa-custom-bar.wcsa-style-bold .wcsa-cb-submit {
  height: 60% !important;
  padding: 0 16px !important;
  border-left: 1px solid var(--wcsa-cb-divider, #e5e7eb) !important;
}

/* --- Mobile responsiveness for all 3 styles ---
 * C-31: max-width override removed (base rule is already width:100% with no cap).
 * C-34: legacy submit-label rule kept as no-op (label is now hidden).
 */
@media (max-width: 480px) {
  .wcsa-custom-bar.wcsa-style-bold {
    height: 46px !important;
  }
  .wcsa-custom-bar.wcsa-style-rounded {
    height: 44px !important;
  }
}

/* Screen reader only text (used by labels) */
.wcsa-custom-bar .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v1.0.0 — Out-of-stock badge

   Small pill rendered next to the product title in the dropdown when the
   product is currently out of stock. Uses CSS variables that the admin
   sets in Display Options (background + text), so the badge stays
   on-brand without rebuilding the plugin.

   The badge sits inline next to the title and shrinks gracefully on
   small dropdowns — title text gets ellipsis before the badge does.
   ════════════════════════════════════════════════════════════════════════ */
.wcsa-suggestions li .wcsa-oos-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--wcsa-oos-bg, #fef2f2);
  color: var(--wcsa-oos-text, #991b1b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* Shadow DOM bar — MOBILE FULLSCREEN focus mode.                      */
/* The engine adds the class `wcsa-shadow-focus-mobile` to the HOST element  */
/* (<wcsa-shadow-bar>) and moves it to <body>. Two scopes are needed:        */
/*   1) LIGHT-DOM rule on the host element → the fullscreen white panel.     */
/*   2) :host(...) rules → applied INSIDE the shadow (this same file is      */
/*      injected there via <link>) to lay out the bar/row/input/buttons/     */
/*      dropdown. In the normal document :host matches nothing (harmless).   */
/* Mirrors the legacy `.wcsa-custom-bar.wcsa-fullscreen` rules above.        */
/* ═══════════════════════════════════════════════════════════════════════ */

/* (1) Host = fullscreen white panel */
wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 2147483645 !important;
  background: #fff !important;
}
/* Cover the WP admin bar (match the classic bar): the panel's very high
   z-index sits above the admin bar, so we pin top:0 even with body.admin-bar.
   WordPress keeps the .admin-bar class even when the bar auto-hides on scroll,
   so reserving 46/32px would leave an empty strip of page at the top. */
body.admin-bar wcsa-shadow-bar.wcsa-shadow-focus-mobile { top: 0 !important; }
@media (min-width: 783px) {
  body.admin-bar wcsa-shadow-bar.wcsa-shadow-focus-mobile { top: 0 !important; }
}

/* (2) Internal layout, scoped to the shadow via :host() */
:host(.wcsa-shadow-focus-mobile) .wcsa-custom-bar {
  background: transparent !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* The synthetic row that wraps input + submit + close */
:host(.wcsa-shadow-focus-mobile) .wcsa-cb-mobile-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  height: 42px;
  padding: 0 0 0 14px;
  --wcsa-row-divider: #d1d5db;
}
:host(.wcsa-shadow-focus-mobile) .wcsa-custom-bar.wcsa-style-minimal .wcsa-cb-mobile-row {
  background: #fff; border: 1px solid #d1d5db; border-radius: 4px; height: 42px;
  padding: 0 0 0 14px; box-shadow: none; --wcsa-row-divider: #d1d5db;
}
:host(.wcsa-shadow-focus-mobile) .wcsa-custom-bar.wcsa-style-rounded .wcsa-cb-mobile-row {
  background: #f3f4f6; border: 2px solid transparent; border-radius: 999px; height: 48px;
  padding: 0 0 0 22px; box-shadow: none; --wcsa-row-divider: #d1d5db;
}
:host(.wcsa-shadow-focus-mobile) .wcsa-custom-bar.wcsa-style-bold .wcsa-cb-mobile-row {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; height: 52px;
  padding: 0 0 0 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); --wcsa-row-divider: #e5e7eb;
}

/* Input: naked, fills the row */
:host(.wcsa-shadow-focus-mobile) .wcsa-cb-mobile-row .wcsa-cb-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #1a1a1a !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
:host(.wcsa-shadow-focus-mobile) .wcsa-cb-mobile-row .wcsa-cb-input:focus,
:host(.wcsa-shadow-focus-mobile) .wcsa-cb-mobile-row .wcsa-cb-input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
:host(.wcsa-shadow-focus-mobile) .wcsa-custom-bar.wcsa-style-bold .wcsa-cb-mobile-row .wcsa-cb-input {
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* Submit (lens) + close (X): icon-only, divider on the LEFT */
:host(.wcsa-shadow-focus-mobile) .wcsa-cb-mobile-row .wcsa-cb-submit,
:host(.wcsa-shadow-focus-mobile) .wcsa-cb-mobile-row .wcsa-focus-close {
  position: static !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 60% !important;
  padding: 0 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--wcsa-row-divider) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: var(--wcsa-cb-icon, #6b7280) !important;
  font-size: 16px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

/* Suggestions dropdown: full-width block below the row */
:host(.wcsa-shadow-focus-mobile) .wcsa-custom-bar > .wcsa-suggestions {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 0 !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* Shadow DOM bar fullscreen — OPEN/CLOSE transitions (Pro).           */
/* JS sets data-wcsa-mtr on <body> and toggles .wcsa-mtr-in / .wcsa-mtr-out. */
/* These animate the fullscreen PANEL (the host). The inner stagger used by  */
/* the legacy "reveal" cannot cross the shadow boundary, so for the shadow   */
/* bar "reveal" is a panel-level fade; fade/slide/scale play fully.          */
/* ═══════════════════════════════════════════════════════════════════════ */

/* --- OPEN --- */
body[data-wcsa-mtr="fade"] wcsa-shadow-bar.wcsa-shadow-focus-mobile { opacity: 0 !important; }
body[data-wcsa-mtr="fade"].wcsa-mtr-in wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  opacity: 1 !important;
  transition: opacity 200ms ease !important;
}
body[data-wcsa-mtr="slide"] wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
}
body[data-wcsa-mtr="slide"].wcsa-mtr-in wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease !important;
}
body[data-wcsa-mtr="scale"] wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  transform: scale(0.96) !important;
  opacity: 0 !important;
  transform-origin: center top !important;
}
body[data-wcsa-mtr="scale"].wcsa-mtr-in wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}
body[data-wcsa-mtr="reveal"] wcsa-shadow-bar.wcsa-shadow-focus-mobile { opacity: 0 !important; }
body[data-wcsa-mtr="reveal"].wcsa-mtr-in wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  opacity: 1 !important;
  transition: opacity 200ms ease !important;
}

/* --- CLOSE --- */
body[data-wcsa-mtr="fade"].wcsa-mtr-out wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}
body[data-wcsa-mtr="slide"].wcsa-mtr-out wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  transition: transform 280ms cubic-bezier(0.7, 0, 0.84, 0), opacity 200ms ease 80ms !important;
}
body[data-wcsa-mtr="scale"].wcsa-mtr-out wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  transform: scale(0.96) !important;
  opacity: 0 !important;
  transform-origin: center top !important;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.36, 0, 0.66, -0.56) !important;
}
body[data-wcsa-mtr="reveal"].wcsa-mtr-out wcsa-shadow-bar.wcsa-shadow-focus-mobile {
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}

/* Reduce-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  body[data-wcsa-mtr] wcsa-shadow-bar.wcsa-shadow-focus-mobile {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* Shadow DOM bar — "reveal" INNER stagger (premium).                  */
/* Mirrors the legacy reveal: panel fades in (handled by the host-level rule */
/* above), THEN the bar/row drops from -30px, THEN the suggestions fade in.  */
/* Driven by the HOST's data-wcsa-mtr attribute + .wcsa-mtr-in/out classes   */
/* (set by JS on the host), so these :host() rules animate elements INSIDE   */
/* the shadow — where body[data-wcsa-mtr] cannot reach. Same selector set,   */
/* timings and easings as the legacy reveal, applied to our bar's elements.  */
/* ═══════════════════════════════════════════════════════════════════════ */

/* OPEN — initial offset state */
:host([data-wcsa-mtr="reveal"]) .wcsa-cb-mobile-row,
:host([data-wcsa-mtr="reveal"]) .wcsa-cb-input,
:host([data-wcsa-mtr="reveal"]) .wcsa-cb-submit,
:host([data-wcsa-mtr="reveal"]) .wcsa-focus-close {
  transform: translateY(-30px) !important;
  opacity: 0 !important;
}
:host([data-wcsa-mtr="reveal"]) .wcsa-suggestions { opacity: 0 !important; }

/* OPEN — animate into place (staggered after the panel fade) */
:host([data-wcsa-mtr="reveal"].wcsa-mtr-in) .wcsa-cb-mobile-row,
:host([data-wcsa-mtr="reveal"].wcsa-mtr-in) .wcsa-cb-input,
:host([data-wcsa-mtr="reveal"].wcsa-mtr-in) .wcsa-cb-submit,
:host([data-wcsa-mtr="reveal"].wcsa-mtr-in) .wcsa-focus-close {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1) 60ms, opacity 200ms ease 60ms !important;
}
:host([data-wcsa-mtr="reveal"].wcsa-mtr-in) .wcsa-suggestions {
  opacity: 1 !important;
  transition: opacity 240ms ease 180ms !important;
}

/* CLOSE — reverse: suggestions fade, then the bar lifts back up */
:host([data-wcsa-mtr="reveal"].wcsa-mtr-out) .wcsa-suggestions {
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}
:host([data-wcsa-mtr="reveal"].wcsa-mtr-out) .wcsa-cb-mobile-row,
:host([data-wcsa-mtr="reveal"].wcsa-mtr-out) .wcsa-cb-input,
:host([data-wcsa-mtr="reveal"].wcsa-mtr-out) .wcsa-cb-submit,
:host([data-wcsa-mtr="reveal"].wcsa-mtr-out) .wcsa-focus-close {
  transform: translateY(-30px) !important;
  opacity: 0 !important;
  transition: transform 260ms cubic-bezier(0.7, 0, 0.84, 0) 80ms, opacity 200ms ease 80ms !important;
}

/* Reduce-motion: no inner animation */
@media (prefers-reduced-motion: reduce) {
  :host([data-wcsa-mtr]) .wcsa-cb-mobile-row,
  :host([data-wcsa-mtr]) .wcsa-cb-input,
  :host([data-wcsa-mtr]) .wcsa-cb-submit,
  :host([data-wcsa-mtr]) .wcsa-focus-close,
  :host([data-wcsa-mtr]) .wcsa-suggestions {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}