/**
 * PrestaHU
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Commercial License
 * you can't distribute, modify or sell this code
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file
 * If you need help please contact info@presta.hu
 *
 * @author    PrestaHU <info@presta.hu>
 * @copyright PrestaHU
 * @license   commercial
 */

/* Search window + live results: opened by the theme's header search icon; categories and brands,
   product cards and a sticky "all results" link, in the webshop's own colours. */
.pshu-search {
  /* The webshop's look (theme_ecolife): its brand colour (--hovercolor, brown) and dark text */
  --pshu-search-text: #253237;
  --pshu-search-muted: #5f6368;
  --pshu-search-line: #e3ddd6;
  --pshu-search-field: #fff;
  --pshu-search-soft: #f8f5f1;
  --pshu-search-accent: var(--hovercolor, #9c6d3a);
  --pshu-search-accent-strong: #7a4f24;
  --pshu-search-accent-soft: #f4ece3;
  --pshu-search-hover: #f6efe7;
  --pshu-search-on-accent: #fff;
  --pshu-search-sale: #c62828;
  --pshu-search-radius: 4px;
  --pshu-search-card-radius: 8px;
  --pshu-search-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  color: var(--pshu-search-text);
}

.pshu-search *,
.pshu-search *::before,
.pshu-search *::after { box-sizing: border-box; }

/* Field */
.pshu-search__form {
  position: relative;
  display: block;
  margin: 0;
}

.pshu-search__input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 88px 0 16px;
  border: 1px solid var(--pshu-search-line);
  border-radius: var(--pshu-search-radius);
  background: var(--pshu-search-field);
  color: var(--pshu-search-text);
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pshu-search__input::placeholder {
  color: var(--pshu-search-muted);
  opacity: 1;
}

.pshu-search__input::-webkit-search-cancel-button,
.pshu-search__input::-webkit-search-decoration { display: none; }

.pshu-search__input:hover { border-color: #b9c0c8; }

/* Focus ring as a shadow, following the rounded field. */
.pshu-search .pshu-search__input:focus {
  outline: none;
  background: #fff;
  border-color: var(--pshu-search-accent-strong);
  box-shadow: 0 0 0 3px rgba(31, 143, 201, .25);
}

.pshu-search__submit,
.pshu-search__close {
  position: absolute;
  top: 4px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease;
}

.pshu-search__submit {
  right: 4px;
  background: var(--pshu-search-accent);
  color: var(--pshu-search-on-accent);
}

.pshu-search__submit:hover { background: var(--pshu-search-accent-strong); }

.pshu-search__close {
  right: 44px;
  background: transparent;
  color: var(--pshu-search-muted);
  font-size: 22px;
  line-height: 1;
}

.pshu-search__close:hover { background: var(--pshu-search-soft); color: var(--pshu-search-text); }
.pshu-search__close[hidden] { display: none; }

.pshu-search__submit:focus-visible,
.pshu-search__close:focus-visible {
  outline: 2px solid var(--pshu-search-text);
  outline-offset: 2px;
}

/* Loading: a thin moving line along the bottom edge of the field. */
.pshu-search__form::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pshu-search-accent), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
}

.pshu-search.is-loading .pshu-search__form::after {
  opacity: 1;
  animation: pshu-search-loading 1s linear infinite;
}

@keyframes pshu-search-loading {
  from { background-position: -50% 0; }
  to { background-position: 150% 0; }
}

/* Results card: categories and brands on the left, a product grid on the right (wide screens). */
.pshu-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1050;
  width: min(1100px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--pshu-search-line);
  border-radius: var(--pshu-search-card-radius);
  box-shadow: 0 24px 56px rgba(18, 18, 18, .16), 0 2px 6px rgba(18, 18, 18, .06);
  text-align: left;
  animation: pshu-search-in .16s var(--pshu-search-ease);
}

.pshu-search__panel[hidden] { display: none; }

.pshu-search__panel.has-side {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}

.pshu-search__panel.is-empty { width: min(480px, calc(100vw - 32px)); }

@keyframes pshu-search-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.pshu-search__side {
  position: sticky;
  top: 0;
  align-self: stretch;
  padding: 12px 12px 16px;
  border-right: 1px solid var(--pshu-search-line);
  background: var(--pshu-search-soft);
}

.pshu-search__main {
  min-width: 0;
  padding: 12px 12px 0;
}

.pshu-search__group { display: block; }
.pshu-search__group + .pshu-search__group { margin-top: 12px; }

/* Result count for screen readers only. */
.pshu-search__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pshu-search__head {
  padding: 6px 12px 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--pshu-search-muted);
}

.pshu-search__list { display: block; }

.pshu-search__option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--pshu-search-text);
  text-decoration: none;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .12s ease;
}

.pshu-search__option:hover,
.pshu-search__option[aria-selected="true"] {
  background: var(--pshu-search-hover);
  color: var(--pshu-search-text);
  text-decoration: none;
}

.pshu-search__option[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--pshu-search-accent); }

/* Text inside the options keeps its own colour: the theme recolours hovered links
   ("a:hover", "#header a:hover") with a blue used nowhere else. */
.pshu-search__label,
.pshu-search__name,
.pshu-search__current { color: var(--pshu-search-text); }
.pshu-search__count,
.pshu-search__regular { color: var(--pshu-search-muted); }
.pshu-search__all-text,
.pshu-search__all-icon,
.pshu-search__arrow { color: var(--pshu-search-text); }

/* Categories and brands */
.pshu-search__term {
  font-size: 15px;
  font-weight: 500;
}

.pshu-search__side .pshu-search__option:hover,
.pshu-search__side .pshu-search__option[aria-selected="true"] { background: #fff; }

.pshu-search__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pshu-search__count {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--pshu-search-muted);
  font-variant-numeric: tabular-nums;
}

/* Products: two columns of cards with a large picture. */
.pshu-search__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
}

.pshu-search__product {
  align-items: center;
  gap: 16px;
  padding: 10px;
  scroll-margin: 8px 0 72px;
}

.pshu-search__media {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
}

.pshu-search__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.pshu-search__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pshu-search__name {
    font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
}

.pshu-search__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-variant-numeric: tabular-nums;
}

.pshu-search__current {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.pshu-search__product.has-discount .pshu-search__current { color: var(--pshu-search-sale); }

.pshu-search__regular {
  font-size: 15px;
  font-weight: 400;
  color: var(--pshu-search-muted);
}

/* All results: a link that stays visible at the bottom of the results column. */
.pshu-search__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 4px -12px 0;
  padding: 8px 12px 10px;
  background: #fff;
  border-top: 1px solid var(--pshu-search-line);
}

.pshu-search__panel.is-empty .pshu-search__footer { margin: 0; border-top: 0; }

/* "#header a" in the theme sets link colours with an ID selector. */
.pshu-search .pshu-search__all,
#header .pshu-search .pshu-search__all {
  gap: 10px;
  color: var(--pshu-search-text);
  font-weight: 600;
}

.pshu-search .pshu-search__all:hover,
.pshu-search .pshu-search__all[aria-selected="true"],
#header .pshu-search .pshu-search__all:hover,
#header .pshu-search .pshu-search__all[aria-selected="true"] {
  background: var(--pshu-search-accent-soft);
  color: var(--pshu-search-text);
}

.pshu-search__all-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.pshu-search__arrow { width: 18px; height: 18px; flex: 0 0 18px; margin-left: auto; }

/* No results */
.pshu-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px 8px;
  text-align: center;
  color: var(--pshu-search-muted);
}

.pshu-search__empty-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--pshu-search-field);
  color: var(--pshu-search-muted);
}

.pshu-search__empty-text {
  font-size: 15px;
  color: var(--pshu-search-text);
}

.pshu-search mark {
  padding: 0;
  background: none;
  color: inherit;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .pshu-search__panel,
  .pshu-search.is-loading .pshu-search__form::after { animation: none; }
  .pshu-search *,
  .pshu-search__input { transition: none; }
}

/* Tablets and narrow desktops: one column of products, the side list stays on the left. */
@media (max-width: 1023px) {
  .pshu-search__panel.has-side { grid-template-columns: 220px minmax(0, 1fr); }
  .pshu-search__grid { grid-template-columns: minmax(0, 1fr); }
  .pshu-search__media { flex-basis: 72px; width: 72px; height: 72px; }
}

@media (max-width: 767px) {
  .pshu-search__input { height: 48px; }
  .pshu-search__submit,
  .pshu-search__close { width: 40px; height: 40px; }
  .pshu-search__close { right: 48px; }

  .pshu-search__panel,
  .pshu-search__panel.is-empty {
    top: calc(100% + 6px);
    width: 100%;
    max-width: none;
    max-height: 74vh;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 16px 16px;
  }

  /* Phones: categories and brands above the products. */
  .pshu-search__panel.has-side { display: block; }

  .pshu-search__side {
    position: static;
    padding: 8px 8px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--pshu-search-line);
  }

  .pshu-search__main { padding: 8px 8px 0; }
  .pshu-search__head { padding: 6px 12px 4px; font-size: 14px; }
  .pshu-search__option { min-height: 48px; }
  .pshu-search__product { padding: 8px; gap: 12px; }
  .pshu-search__media { flex-basis: 64px; width: 64px; height: 64px; }
  .pshu-search__current { font-size: 17px; }
  .pshu-search__footer { margin: 4px -8px 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------ */
/* Search window: opened from the header field or icon, centred on the */
/* page over a dimmed backdrop; full screen on phones.                 */
/* ------------------------------------------------------------------ */

html.pshu-search-locked { overflow: hidden; }

/* The theme's header field only opens the window: it keeps the text cursor, its icon a pointer. */
form.pos-search .pos-search__input[readonly] { cursor: text; }
form.pos-search .pos-search__toggle[role="button"] { position: relative; z-index: 1; cursor: pointer; }
/* The icon itself is about 24px: an invisible 44px touch target around it, the look unchanged. */
form.pos-search .pos-search__toggle[role="button"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
form.pos-search .pos-search__toggle[role="button"]:focus-visible { outline: 2px solid var(--hovercolor, #9c6d3a); outline-offset: 2px; }

.pshu-search-modal {
  width: min(1100px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 12vh);
  margin: 6vh auto auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #121212;
  box-shadow: 0 32px 80px rgba(18, 18, 18, .28), 0 2px 8px rgba(18, 18, 18, .08);
  overflow: hidden;
}

.pshu-search-modal[open] {
  display: flex;
  flex-direction: column;
  animation: pshu-search-modal-in .18s cubic-bezier(.2, .8, .2, 1);
}

.pshu-search-modal::backdrop {
  background: rgba(18, 24, 33, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@keyframes pshu-search-modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.pshu-search--modal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.pshu-search-modal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--pshu-search-line);
}

.pshu-search-modal__bar .pshu-search__form { flex: 1 1 auto; min-width: 0; }
.pshu-search--modal .pshu-search__input { height: 52px; padding-left: 18px; font-size: 18px; }
.pshu-search--modal .pshu-search__submit,
.pshu-search--modal .pshu-search__close { top: 6px; width: 40px; height: 40px; }
.pshu-search--modal .pshu-search__submit { right: 6px; }
.pshu-search--modal .pshu-search__close { right: 50px; }

.pshu-search-modal__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pshu-search-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease;
}

.pshu-search-modal__close:hover { background: var(--pshu-search-soft); color: var(--pshu-search-text); }
.pshu-search-modal__close:focus-visible { outline: 2px solid var(--pshu-search-text); outline-offset: 2px; }

/* Inside the window the list fills the window below the field. */
.pshu-search--modal .pshu-search__panel,
.pshu-search--modal .pshu-search__panel.is-empty {
  position: static;
  width: auto;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.pshu-search--modal .pshu-search__panel.is-empty { width: auto; }

/* Quick searches: recent and popular expressions as chips. */
.pshu-search__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 8px; }

.pshu-search .pshu-search__chip,
#header .pshu-search .pshu-search__chip {
  min-height: 38px;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--pshu-search-line);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
}

.pshu-search .pshu-search__chip:hover,
.pshu-search .pshu-search__chip[aria-selected="true"] { border-color: var(--pshu-search-accent); background: var(--pshu-search-accent-soft); }

.pshu-search__chip-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--pshu-search-muted); }
.pshu-search__chip-text { color: var(--pshu-search-text); white-space: nowrap; }

.pshu-search__head { display: flex; align-items: baseline; gap: 12px; }

/* A text button in the heading row; the negative margin keeps the row height while the touch
   target stays 44px high. */
.pshu-search .pshu-search__clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0 -12px auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--pshu-search-accent-strong);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.pshu-search .pshu-search__clear:hover { color: var(--pshu-search-text); }

@media (prefers-reduced-motion: reduce) {
  .pshu-search-modal[open] { animation: none; }
}

@media (max-width: 767px) {
  .pshu-search-modal {
    width: 100vw;
    max-height: none;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .pshu-search-modal__bar { padding: 10px 8px 10px 12px; }
  .pshu-search--modal .pshu-search__input { height: 48px; font-size: 16px; }
  .pshu-search--modal .pshu-search__submit,
  .pshu-search--modal .pshu-search__close { top: 4px; }
  .pshu-search--modal .pshu-search__panel,
  .pshu-search--modal .pshu-search__panel.is-empty { width: auto; max-height: none; border-radius: 0; }
  .pshu-search__chips { padding: 0 8px 8px; }
  .pshu-search .pshu-search__chip { min-height: 44px; }

  /* Phones: quick searches and products first, the main categories as chips below them. */
  .pshu-search__panel.is-discover.has-side { display: flex; flex-direction: column; }
  .pshu-search__panel.is-discover .pshu-search__main { order: 1; padding-bottom: 8px; }
  .pshu-search__panel.is-discover .pshu-search__side { order: 2; border-bottom: 0; border-top: 1px solid var(--pshu-search-line); }
  .pshu-search__panel.is-discover .pshu-search__side .pshu-search__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px 4px; }
  .pshu-search__panel.is-discover .pshu-search__term {
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--pshu-search-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
  }
  .pshu-search__panel.is-discover .pshu-search__term .pshu-search__count { margin-left: 0; }
}