/**
 * CWS Search Flow widget — search bar, dropdown panel or centred modal
 * (desktop) and full-screen overlay (mobile). Loaded only on pages containing
 * the widget (registered handle + get_style_depends). Palette follows the
 * Search Flow design; every brand-facing color is overridable via Elementor
 * controls.
 */

.cws-searchflow {
    /* Read back by the script with getComputedStyle when the panel opens; the
       responsive "Open as" control overwrites it inside Elementor's own media
       queries. Declared here so the default is visible in one place. */
    --cws-sf-open-mode: dropdown;
    --cws-sf-accent: #0b7da9;
    --cws-sf-ink: #16333f;
    --cws-sf-muted: #9bacb4;
    --cws-sf-border: #e6eef1;
    --cws-sf-soft: #f4f8fa;
    --cws-sf-good: #5a9e2f;
    --cws-sf-badge: #7cb342;
    /* Magnifier-button ("icon only" Display mode) defaults. Every one is
       overridable from the Magnifier button Style section. */
    --cws-sf-trigger-size: 46px;
    --cws-sf-trigger-icon: 20px;
    --cws-sf-trigger-radius: 13px;
    /* Bare icon by default — no chip, no outline. The border stays declared at
       1.5px transparent so adding a Border color later doesn't resize it. */
    --cws-sf-trigger-bg: transparent;
    --cws-sf-trigger-fg: var(--cws-sf-ink);
    --cws-sf-trigger-border: transparent;
    --cws-sf-trigger-hover-bg: transparent;
    --cws-sf-trigger-hover-fg: var(--cws-sf-accent);
    /* Modal ("Open as: Centered modal") defaults — all overridable from the
       Search modal Style section. */
    --cws-sf-modal-width: 640px;
    --cws-sf-modal-top: 12vh;
    --cws-sf-modal-max-height: 78vh;
    --cws-sf-modal-radius: 18px;
    --cws-sf-modal-bg: #fff;
    --cws-sf-modal-backdrop: rgba(11, 32, 41, .55);
    --cws-sf-modal-blur: 3px;
    --cws-sf-close-bg: #eef3f5;
    --cws-sf-close-fg: #6b7c85;
    --cws-sf-close-hover-bg: #e1e9ec;
    --cws-sf-close-hover-fg: var(--cws-sf-ink);
    position: relative;
    /* 100% in bar mode, fit-content in icon mode — the responsive Display
       control writes the variable inside the matching media query. */
    width: var(--cws-sf-root-width, 100%);
    font-size: 15px;
}

.cws-searchflow__config { display: none; }

/* ---------- search bar ---------- */

.cws-searchflow__bar {
    display: var(--cws-sf-bar-display, flex);
    align-items: center;
    gap: 12px;
    height: 52px;
    margin: 0;
    padding: 0 8px 0 16px;
    background: var(--cws-sf-soft);
    border: 1.5px solid #e2eaed;
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.cws-searchflow.is-focused .cws-searchflow__bar {
    background: #fff;
    border-color: var(--cws-sf-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cws-sf-accent) 12%, transparent);
}
.cws-searchflow__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--cws-sf-muted);
    transition: color .2s;
}
.cws-searchflow.is-focused .cws-searchflow__icon { color: var(--cws-sf-accent); }
.cws-searchflow__icon svg { stroke: currentColor; }

/* border/radius/background/padding/shadow pinned with !important so the theme's
   global input[type=search] rule (1px #666 border, 3px radius, .5rem padding)
   can't redraw the field inside the bar. Elementor's Search field Style
   controls only touch color/typography, so these pins never fight them. */
.cws-searchflow__input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none;
    background: transparent !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--cws-sf-ink);
    padding: 0 !important;
    box-shadow: none !important;
}
.cws-searchflow__input:focus { outline: none; box-shadow: none; }
.cws-searchflow__input::placeholder { color: var(--cws-sf-muted); }
.cws-searchflow__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* background/color/border/padding pinned with !important so Elementor's global
   kit button styles (the green ".elementor-kit-N button" — background-color +
   color, often padding/border too) can't repaint these icon boxes. */
.cws-searchflow__clear {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0 !important;
    border-radius: 9px;
    background: #eef3f5 !important;
    color: #6b7c85 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: background .16s, color .16s;
}
.cws-searchflow__clear:hover { background: #e1e9ec !important; color: var(--cws-sf-ink) !important; }

.cws-searchflow__back {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0 !important;
    background: transparent !important;
    color: var(--cws-sf-ink) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* Modal close button. Defended with specificity, not the `!important` the two
   icon buttons above use: (0,2,0) beats both the Elementor kit's (0,1,1)
   button rule (background + color) and a theme's (0,1,0) [type=button] reset —
   which is why padding, border, display and box-sizing are all declared here
   too rather than left to default. Colours come from variables so the Search
   modal Style controls at {{WRAPPER}} ((0,4,0)) still win.

   Hidden by CSS rather than the [hidden] attribute: whether the dialog chrome
   exists is a property of the open mode, not a state the script toggles. */
.cws-searchflow .cws-searchflow__close {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--cws-sf-close-bg);
    color: var(--cws-sf-close-fg);
    cursor: pointer;
    transition: background .16s, color .16s;
}
.cws-searchflow .cws-searchflow__close:hover {
    background: var(--cws-sf-close-hover-bg);
    color: var(--cws-sf-close-hover-fg);
}
.cws-searchflow .cws-searchflow__close svg { stroke: currentColor; }

/* These three are toggled via the [hidden] attribute from JS, but their base
   rules set display (inline-flex / flex), which overrides the UA
   [hidden]{display:none} — so without this they show permanently even when JS
   (or the initial markup) marks them hidden. Restore the toggle. This is why
   the back arrow / clear button appear even when the script hasn't run. */
.cws-searchflow__back[hidden],
.cws-searchflow__clear[hidden],
.cws-searchflow__all[hidden] { display: none !important; }

/* ---------- collapsed magnifier trigger ("icon only" Display mode) ---------- */

/* Defended with specificity, not the `!important` the two icon buttons above
   use — those predate the armour doc and are deliberately left alone. (0,2,0)
   outranks both the Elementor kit's (0,1,1) button rule and a theme's (0,1,0)
   [type=button] reset, which would otherwise also steal the padding, border and
   display. Values come from variables so the Style controls at {{WRAPPER}}
   ((0,3,0)) still win. */
.cws-searchflow .cws-searchflow__trigger {
    display: var(--cws-sf-trigger-display, none);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--cws-sf-trigger-size);
    height: var(--cws-sf-trigger-size);
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--cws-sf-trigger-border);
    border-radius: var(--cws-sf-trigger-radius);
    background: var(--cws-sf-trigger-bg);
    color: var(--cws-sf-trigger-fg);
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
/* Border colour is deliberately not touched on hover — it stays whatever the
   Border color control set, so a hover background can't blank it. */
.cws-searchflow .cws-searchflow__trigger:hover {
    background: var(--cws-sf-trigger-hover-bg);
    color: var(--cws-sf-trigger-hover-fg);
}
.cws-searchflow .cws-searchflow__trigger svg {
    width: var(--cws-sf-trigger-icon);
    height: var(--cws-sf-trigger-icon);
    stroke: currentColor;
}

/* ---------- dropdown panel ---------- */

.cws-searchflow__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #edf1f3;
    border-radius: 16px;
    box-shadow: 0 26px 60px -18px rgba(18, 48, 60, .42), 0 2px 8px rgba(18, 48, 60, .08);
    overflow: hidden;
    z-index: 9990;
}
.cws-searchflow[data-motion="rich"] .cws-searchflow__panel:not([hidden]) {
    animation: cwsSfDropIn .2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cwsSfDropIn {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.cws-searchflow__scroll {
    max-height: 440px;
    overflow: auto;
    overscroll-behavior: contain;
}

.cws-searchflow__label {
    margin: 0 0 10px;
    padding: 0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cws-sf-muted);
}
.cws-searchflow__state { padding: 18px 20px; }
.cws-searchflow[data-motion="rich"] .cws-searchflow__state:not([hidden]) {
    animation: cwsSfFadeUp .24s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cwsSfFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- chips (recent / try-these) ---------- */

.cws-searchflow__section + .cws-searchflow__section { margin-top: 20px; }

.cws-searchflow__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cws-searchflow__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--cws-sf-soft);
    border: 1px solid var(--cws-sf-border);
    font-size: 13.5px;
    font-weight: 600;
    color: #2c4a56;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cws-searchflow__chip:hover { background: #eaf4f8; border-color: #cfe4ec; }
.cws-searchflow__chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #a7b7bf;
}
.cws-searchflow__chip-x:hover { color: var(--cws-sf-ink); }

/* ---------- popular / suggestion list rows ---------- */

.cws-searchflow__list { display: flex; flex-direction: column; gap: 2px; }
.cws-searchflow__listrow {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 12px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    color: #22424e;
    transition: background .14s;
}
.cws-searchflow__listrow:hover,
.cws-searchflow__listrow.is-active { background: #f5f9fb; }
.cws-searchflow__listrow-ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #eaf4f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cws-sf-accent);
}
.cws-searchflow__listrow-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cws-searchflow__listrow-arrow { flex: 0 0 auto; color: #c3d1d7; display: inline-flex; }
.cws-searchflow mark {
    background: none;
    font-weight: 800;
    color: var(--cws-sf-ink);
}

/* ---------- loading skeletons ---------- */

.cws-searchflow__spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cws-sf-muted);
}
.cws-searchflow__spinner svg { color: var(--cws-sf-accent); animation: cwsSfSpin .8s linear infinite; }
@keyframes cwsSfSpin { to { transform: rotate(360deg); } }

.cws-searchflow__skelrow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
}
.cws-searchflow__skcol { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.cws-searchflow__sk {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef2f4 8%, #e2e8eb 22%, #eef2f4 40%);
    background-size: 840px 100%;
    animation: cwsSfShimmer 1.25s infinite linear;
}
.cws-searchflow__sk--thumb { width: 58px; height: 58px; border-radius: 12px; flex: 0 0 auto; }
.cws-searchflow__sk--price { width: 74px; height: 24px; border-radius: 8px; flex: 0 0 auto; }
@keyframes cwsSfShimmer {
    0%   { background-position: -420px 0; }
    100% { background-position: 420px 0; }
}

/* ---------- results ---------- */

.cws-searchflow__results {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cws-searchflow__row { margin: 0; padding: 0; }
.cws-searchflow__rowlink {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 10px;
    border-radius: 14px;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.cws-searchflow__rowlink:hover,
.cws-searchflow__row.is-active .cws-searchflow__rowlink { background: #f5f9fb; }
.cws-searchflow[data-motion="rich"] .cws-searchflow__rowlink:hover { transform: translateX(3px); }

.cws-searchflow__thumbwrap { position: relative; flex: 0 0 auto; }
.cws-searchflow__thumb {
    width: 62px;
    height: 62px;
    border-radius: 13px;
    object-fit: cover;
    background: #f1f5f7;
    display: block;
}
.cws-searchflow__thumb--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c3d1d7;
}
.cws-searchflow__badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: var(--cws-sf-badge);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(124, 179, 66, .4);
}

/* Row-wrap rather than a plain block: the tag row and the stock line are
   siblings (the JS keeps them apart so the mobile restack can drop the stock
   line below the price), and this is what keeps them on one line here. Brand
   and title each claim a full row of their own. */
.cws-searchflow__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.cws-searchflow__brand,
.cws-searchflow__title { flex: 0 0 100%; }
.cws-searchflow__brand {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--cws-sf-accent);
    margin-bottom: 3px;
}
.cws-searchflow__title {
    font-size: 14.5px;
    font-weight: 600;
    color: #1b3a45;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 7px;
}
.cws-searchflow__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
}
.cws-searchflow__tag {
    font-size: 11.5px;
    font-weight: 700;
    color: #4d6771;
    background: #eef3f5;
    border-radius: 6px;
    padding: 3px 8px;
}
.cws-searchflow__stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 4px;
    flex: 0 0 auto;
}
.cws-searchflow__stock.is-in { color: var(--cws-sf-good); }
.cws-searchflow__stock.is-out { color: #b0bcc2; }
.cws-searchflow__stock::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.cws-searchflow__priceside { flex: 0 0 auto; text-align: right; }
.cws-searchflow__price {
    font-size: 18px;
    font-weight: 800;
    color: var(--cws-sf-ink);
    letter-spacing: -.4px;
    white-space: nowrap;
}
.cws-searchflow__price del { font-size: 12.5px; font-weight: 600; color: var(--cws-sf-muted); margin-right: 5px; }
.cws-searchflow__price ins { text-decoration: none; }
.cws-searchflow__vat {
    font-size: 11px;
    color: var(--cws-sf-muted);
    margin-top: 1px;
}

/* ---------- view all ---------- */

.cws-searchflow__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    border-top: 1px solid #eef2f4;
    padding: 15px;
    background: #f6fafb;
    color: var(--cws-sf-accent);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s;
    box-sizing: border-box;
}
.cws-searchflow__all:hover { background: #eaf4f8; color: var(--cws-sf-accent); }

/* ---------- no results ---------- */

.cws-searchflow__empty { text-align: center; padding: 34px 24px 26px; }
.cws-searchflow__empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #f1f5f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a7b7bf;
    margin-bottom: 14px;
}
.cws-searchflow[data-motion="rich"] .cws-searchflow__empty-icon { animation: cwsSfPop .22s; }
@keyframes cwsSfPop {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
}
.cws-searchflow__empty-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--cws-sf-ink);
}
.cws-searchflow__empty-hint {
    margin: 6px auto 20px;
    max-width: 340px;
    font-size: 14px;
    color: #7c8d95;
}
.cws-searchflow__empty .cws-searchflow__chips { justify-content: center; }

/* ---------- mobile full-screen overlay ---------- */

.cws-searchflow.is-overlay {
    position: fixed;
    inset: 0;
    z-index: 999990;
    width: auto;
    max-width: none;
    margin: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px 14px 0;
    box-sizing: border-box;
}
.cws-searchflow.is-overlay .cws-searchflow__back { display: inline-flex; }
/* The back arrow takes the leading slot in the overlay, so the magnifier next
   to it is a second search glyph eating width the input needs on a phone. */
.cws-searchflow.is-overlay .cws-searchflow__icon { display: none; }
/* Icon mode hides the bar and shows the trigger; inside the overlay that flips
   back, whatever the Display control set for this breakpoint. */
.cws-searchflow.is-overlay .cws-searchflow__trigger { display: none; }
.cws-searchflow.is-overlay .cws-searchflow__bar {
    display: flex;
    flex: 0 0 auto;
    height: 46px;
    border-radius: 13px;
}
.cws-searchflow.is-overlay .cws-searchflow__panel {
    position: static;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: auto;
    max-width: none;
    margin-top: 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.cws-searchflow.is-overlay .cws-searchflow__scroll {
    flex: 1;
    max-height: none;
    min-height: 0;
}
.cws-searchflow.is-overlay .cws-searchflow__all { flex: 0 0 auto; }

body.cws-searchflow-lock { overflow: hidden; }

/* ---------- desktop modal ("Open as: Centered modal") ----------
 *
 * A command palette: one card, the search field as its flat header row, the
 * results panel as its body, over a dimmed backdrop.
 *
 * The shell is `display: contents` in every other mode, so it generates no box
 * and the bar and the panel stay direct layout children of the root — the
 * dropdown's absolute positioning and the overlay's flex column both keep
 * working untouched. Only inside `.is-modal` does it become a real element.
 *
 * The root itself is the backdrop. That takes it out of flow, so the script
 * inserts a measured spacer next to it for as long as the modal is open —
 * without one, a header bar (or magnifier) would vanish from the layout behind
 * the translucent backdrop and shift everything beside it.
 */

.cws-searchflow__modal { display: contents; }

.cws-searchflow.is-modal {
    position: fixed;
    inset: 0;
    z-index: 999980;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 20px;
    background: var(--cws-sf-modal-backdrop);
    -webkit-backdrop-filter: blur(var(--cws-sf-modal-blur));
    backdrop-filter: blur(var(--cws-sf-modal-blur));
    /* A card taller than the viewport (long results, short laptop screen)
       scrolls the backdrop rather than overflowing off-screen. */
    overflow: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.cws-searchflow.is-modal .cws-searchflow__modal {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--cws-sf-modal-width);
    max-height: var(--cws-sf-modal-max-height);
    margin: var(--cws-sf-modal-top) 0 24px;
    background: var(--cws-sf-modal-bg);
    border-radius: var(--cws-sf-modal-radius);
    box-shadow: 0 44px 90px -26px rgba(10, 30, 40, .55), 0 4px 14px rgba(10, 30, 40, .14);
    overflow: hidden;
}

/* The bar becomes the card's header row: flat, no chip, one hairline under it.
   Equal specificity to the `.is-focused` focus-ring rule above ((0,3,0)) and
   deliberately placed after it, so the ring does not draw inside the card.
   The Search field Style controls sit at (0,4,0) and still win — a site that
   sets a field background keeps it here too. */
.cws-searchflow.is-modal .cws-searchflow__bar {
    display: flex;
    flex: 0 0 auto;
    height: 64px;
    padding: 0 12px 0 20px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cws-sf-border);
    border-radius: 0;
    box-shadow: none;
}
.cws-searchflow.is-modal .cws-searchflow__close { display: inline-flex; }
/* Icon mode hides the bar and shows the trigger; inside the modal that flips
   back, whatever the Display control set for this breakpoint. */
.cws-searchflow.is-modal .cws-searchflow__trigger { display: none; }
.cws-searchflow.is-modal .cws-searchflow__input { font-size: 16.5px; }

.cws-searchflow.is-modal .cws-searchflow__panel {
    position: static;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.cws-searchflow.is-modal .cws-searchflow__scroll {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}
.cws-searchflow.is-modal .cws-searchflow__all { flex: 0 0 auto; }

/* The card animates as one piece, so the panel's own drop-in is cancelled.
   (0,5,0) — the rule it has to beat carries two attribute selectors. */
.cws-searchflow[data-motion="rich"].is-modal .cws-searchflow__panel:not([hidden]) { animation: none; }
.cws-searchflow[data-motion="rich"].is-modal { animation: cwsSfBackdropIn .18s ease-out; }
.cws-searchflow[data-motion="rich"].is-modal .cws-searchflow__modal {
    animation: cwsSfModalIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cwsSfBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cwsSfModalIn {
    from { opacity: 0; transform: translateY(-14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Phones never reach modal mode (the overlay owns everything below the Mobile
   overlay breakpoint), but a short landscape window can — drop the top offset
   so the card keeps its results. */
@media (max-height: 620px) {
    .cws-searchflow.is-modal .cws-searchflow__modal {
        margin-top: 24px;
        max-height: calc(100vh - 48px);
    }
}

/* ---------- result rows on narrow screens ----------
 *
 * The desktop row is three columns (thumb | text | price column). On a phone
 * the price column eats the width the text needs: the title clamps after two
 * or three words and every tag chip drops onto a line of its own. The Search
 * Flow design stacks instead — thumb on the left, one column beside it
 * carrying brand, title, tags, price and stock in that order.
 *
 * Grid, because the price has to sit in the *text* column (indented past the
 * thumbnail) while being a sibling of `__body` in the DOM. `__body` goes
 * `display: contents` so its children become grid items next to the price
 * cell, and `order` pulls the price ahead of the stock line. The five explicit
 * rows are exactly those five pieces, and the thumbnail spans all of them so
 * the text starts level with its top edge; a piece that is switched off
 * (no brand, thumbnails/stock off) leaves a zero-height row behind.
 *
 * 768px is the default of the widget's Mobile breakpoint control — the value
 * that decides where the overlay takes over. A site that moves that control
 * only changes where the *overlay* starts; the stacking stays tied to the
 * viewport, which is what the layout actually depends on.
 */
@media (max-width: 768px) {
    .cws-searchflow__rowlink {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: repeat(5, auto);
        align-items: start;
        gap: 0;
        padding: 15px 8px;
        border-radius: 0;
    }
    /* Hairline between rows instead of the desktop card hover — the design's
       mobile list is a plain separated list. border-top, not bottom, so the
       last row doesn't draw a line straight above the "view all" button. */
    .cws-searchflow__row + .cws-searchflow__row .cws-searchflow__rowlink {
        border-top: 1px solid #f2f5f7;
    }
    .cws-searchflow__thumbwrap {
        grid-column: 1;
        grid-row: 1 / -1;
        margin-right: 14px;
    }
    .cws-searchflow__thumb { width: 64px; height: 64px; }
    /* No box of its own here — its children are the grid items. */
    .cws-searchflow__body { display: contents; }
    .cws-searchflow__brand,
    .cws-searchflow__title,
    .cws-searchflow__meta,
    .cws-searchflow__priceside,
    .cws-searchflow__stock { grid-column: 2; }
    .cws-searchflow__title {
        -webkit-line-clamp: 3;
        margin-bottom: 8px;
    }
    .cws-searchflow__meta { margin-bottom: 8px; }
    .cws-searchflow__priceside {
        order: 1;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 8px;
        text-align: left;
    }
    .cws-searchflow__vat { margin-top: 0; }
    .cws-searchflow__stock {
        order: 2;
        margin: 8px 0 0;
    }
    /* The stacked row has no right-hand price column for the skeleton to
       promise, so the loading state drops that block too. */
    .cws-searchflow__sk--price { display: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .cws-searchflow__panel:not([hidden]),
    .cws-searchflow__state:not([hidden]),
    .cws-searchflow.is-modal,
    .cws-searchflow.is-modal .cws-searchflow__modal,
    .cws-searchflow__empty-icon { animation: none !important; }
    .cws-searchflow__rowlink:hover { transform: none !important; }
    .cws-searchflow__sk { animation: none; }
}
.cws-searchflow[data-motion="subtle"] .cws-searchflow__rowlink:hover { transform: none; }

/* ============================================================
 * Specificity armour — Elementor kit link styling
 * ============================================================
 *
 * The kit ships `.elementor-kit-N a { color: … }` alongside its button rule —
 * one class plus one element, specificity (0,1,1), which beats every
 * single-class rule above (0,1,0). `.cws-searchflow__all` and
 * `.cws-searchflow__rowlink` are real <a> elements (searchflow.php:623 and
 * js/cws-suite-searchflow.js:321), so both lose their colours without this.
 *
 * The fix here is specificity, not `!important`, even though the icon-button
 * rules further up this file DO use `!important`. Those predate this block and
 * are left alone deliberately; do not copy their approach for anything new —
 * see docs/architecture/elementor-kit-armour.md.
 *
 * Only `color` is re-asserted. The kit's <a> rule sets colour and nothing else,
 * so the backgrounds on these links are not at risk and repeating them here
 * would just be a second place to keep them in sync.
 *
 * The modal's close <button> is the other element the kit would repaint, and it
 * is defended where it is defined (`.cws-searchflow .cws-searchflow__close`,
 * (0,2,0)) rather than restated here — that rule also has to carry the box
 * properties a theme's [type=button] reset would steal, which this block does
 * not deal with. Nothing below may raise the specificity of a `display`
 * declaration: `.cws-searchflow__close` is hidden by CSS, and an armour rule
 * re-asserting display at the end of the file would show it in every mode.
 */

.cws-searchflow .cws-searchflow__all {
    color: var(--cws-sf-accent);
}

.cws-searchflow .cws-searchflow__all:hover {
    color: var(--cws-sf-accent);
}