/* * VIPlekáreň Search — frontend štýly * * Farby, radius a písmo sa preberajú z premenných Woodmartu, takže našepkávač * vyzerá ako zvyšok eshopu aj keď sa téma preladí. Fallbacky sú aktuálne * hodnoty z viplekaren.sk (zelená #83b735, radius 5px, Lato). * * Panel je zámerne kompaktný — pôvodná verzia mala 50px obrázky a 15px text, * čo sa do hlavičky nezmestilo. */ .vpl-search, .vpl-search__panel { --vpl-accent: var(--wd-primary-color, #83b735); --vpl-title: var(--wd-title-color, #242424); --vpl-text: var(--wd-link-color, #333); --vpl-muted: #767676; --vpl-border: #e6e6e6; --vpl-hover: #f6f7f5; --vpl-radius: var(--wd-brd-radius, 5px); --vpl-field-brd: var(--wd-form-brd-color, #0a5aa1); } .vpl-search { position: relative; width: 100%; font-family: var(--wd-text-font, inherit); font-size: 14px; line-height: 1.4; color: var(--vpl-text); } /* ── Vstupné pole ───────────────────────────────────────────────────────── */ .vpl-search__field { display: flex; align-items: center; background: #fff; border: 1px solid var(--vpl-field-brd); border-radius: var(--vpl-radius); transition: box-shadow .15s ease; } .vpl-search__field:focus-within { box-shadow: 0 0 0 3px rgba(131, 183, 53, .18); } .vpl-search__icon { display: flex; align-items: center; padding-left: 11px; color: var(--vpl-muted); flex-shrink: 0; pointer-events: none; } .vpl-search__input, .vpl-search input.vpl-search__input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 9px 8px !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; color: inherit !important; border-radius: 0 !important; height: auto !important; } .vpl-search__input::placeholder { color: var(--wd-form-placeholder-color, #8aa2b8); opacity: 1; } .vpl-search__input::-webkit-search-cancel-button, .vpl-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .vpl-search__clear { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%; background: #eee; color: #666; cursor: pointer; flex-shrink: 0; } .vpl-search__clear:hover { background: #e0e0e0; color: #222; } .vpl-search__submit { flex-shrink: 0; margin: 3px; padding: 7px 16px; border: 0; border-radius: calc(var(--vpl-radius) - 2px); background: var(--vpl-accent); color: var(--btn-accented-color, #fff); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background .15s; } .vpl-search__submit:hover { background: var(--btn-accented-bgcolor-hover, #6ca300); } /* ── Panel s výsledkami ─────────────────────────────────────────────────── */ /* * Panel visí na s position:fixed a JS mu dopočíta pozíciu. * Dôvod: hlavička Woodmartu má vlastný stacking context a sticky správanie, * ktoré by absolútne pozicovaný panel orezalo. */ .vpl-search__panel { position: fixed; z-index: 2147483000; box-sizing: border-box; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; font-family: var(--wd-text-font, inherit); font-size: 14px; line-height: 1.45; color: var(--vpl-text); background: #fff; border: 1px solid var(--vpl-border); border-radius: var(--vpl-radius); box-shadow: 0 8px 28px -8px rgba(0, 0, 0, .22); animation: vpl-in .13s ease-out; } .vpl-search__panel[hidden] { display: none; } @keyframes vpl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .vpl-search__panel { animation: none; } } .vpl-group { padding: 11px 14px 4px; font-family: var(--wd-title-font, inherit); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #9a9a9a; } /* Riadok výsledku */ .vpl-row { display: flex; align-items: center; gap: 11px; padding: 9px 14px; box-sizing: border-box; width: 100%; color: var(--vpl-text); text-decoration: none !important; cursor: pointer; transition: background .1s; } .vpl-row:hover, .vpl-row.is-active { background: var(--vpl-hover); color: var(--vpl-title); outline: none; } .vpl-row__img { /* border-box, aby rámik nerozšíril obrázok na 48px — skeleton má 46px a bez toho pri načítaní výsledkov riadok o dva pixely poskočí. */ box-sizing: border-box; width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; background: #fafafa; border: 1px solid #f0f0f0; border-radius: 3px; } .vpl-row__body { flex: 1 1 auto; min-width: 0; } .vpl-row__name { display: block; font-family: var(--wd-entities-title-font, inherit); font-size: 14.5px; font-weight: 500; color: var(--vpl-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpl-row__meta { display: block; margin-top: 1px; font-size: 12px; color: var(--vpl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpl-row__price { flex-shrink: 0; margin-left: auto; padding-left: 10px; text-align: right; font-size: 14.5px; font-weight: 700; color: var(--vpl-title); white-space: nowrap; } /* Zľava kompaktne v jednom riadku, nie pod sebou. */ .vpl-row__price del { margin-right: 5px; font-size: 12px; font-weight: 400; color: #a0a0a0; text-decoration: line-through; } .vpl-row__price ins { text-decoration: none; background: none; color: var(--vpl-accent); } .vpl-row__price .woocommerce-Price-amount { font-size: inherit; } /* „s DPH" a čítačkové popisky sú v našepkávači len šum. */ .vpl-row__price .woocommerce-price-suffix, .vpl-row__price .screen-reader-text { display: none !important; } .vpl-row__count { flex-shrink: 0; margin-left: auto; padding: 2px 9px; font-size: 11.5px; font-weight: 600; color: var(--vpl-muted); background: #f2f2f2; border-radius: 999px; white-space: nowrap; } .vpl-badge-oos { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #b45309; background: #fdf1d6; border-radius: 3px; vertical-align: 1px; } /* Pätička panelu */ /* Hlavná akcia panela — má byť vidieť na prvý pohľad, preto plná farba. */ .vpl-seeall { display: block; padding: 13px 14px; margin-top: 8px; text-align: center; font-family: var(--wd-title-font, inherit); font-size: 14.5px; font-weight: 700; color: var(--btn-accented-color, #fff) !important; background: var(--vpl-accent); text-decoration: none !important; transition: background .12s; } .vpl-seeall:hover, .vpl-seeall.is-active { background: var(--btn-accented-bgcolor-hover, #6ca300); color: var(--btn-accented-color, #fff) !important; } .vpl-note { padding: 7px 12px; font-size: 13px; color: var(--vpl-muted); background: #fafafa; border-bottom: 1px solid #f0f0f0; } .vpl-note strong { color: var(--vpl-title); } .vpl-empty { padding: 26px 16px; text-align: center; color: var(--vpl-muted); font-size: 13.5px; } .vpl-empty strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--vpl-title); } mark.vpl-hl { background: none; color: inherit; font-weight: 700; padding: 0; } /* ── Skeleton počas načítania ───────────────────────────────────────────── */ .vpl-skeleton { padding: 6px 0; } .vpl-skeleton__row { display: flex; align-items: center; gap: 11px; padding: 9px 14px; } .vpl-sk { background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 37%, #f2f2f2 63%); background-size: 400% 100%; animation: vpl-shimmer 1.2s linear infinite; border-radius: 3px; } .vpl-sk--img { width: 46px; height: 46px; flex-shrink: 0; } .vpl-sk--line { height: 10px; } .vpl-sk--w70 { width: 70%; } .vpl-sk--w40 { width: 40%; margin-top: 6px; } @keyframes vpl-shimmer { to { background-position: -400% 0; } } @media (prefers-reduced-motion: reduce) { .vpl-sk { animation: none; } } /* ── História hľadania ──────────────────────────────────────────────────── */ .vpl-row--history .vpl-row__name { font-weight: 400; } .vpl-row__clock { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; color: #9a9a9a; } .vpl-history-clear { display: block; width: 100%; padding: 9px 14px; border: 0; border-top: 1px solid #f0f0f0; background: none; font-family: inherit; font-size: 12.5px; color: var(--vpl-muted); text-align: center; cursor: pointer; } .vpl-history-clear:hover { background: var(--vpl-hover); color: var(--vpl-title); } /* Skryje natívny našepkávač Woodmartu na poliach, ktoré sme prevzali. */ .vpl-taken-over .wd-search-results, .vpl-taken-over .wd-dropdown-results { display: none !important; } /* ── Mobil ──────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .vpl-search__submit { padding: 7px 12px; font-size: 12px; } .vpl-search__panel { max-height: 66vh; } .vpl-row { padding: 9px 12px; gap: 10px; } .vpl-row__img { width: 42px; height: 42px; } .vpl-row__name { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .vpl-row__price { font-size: 13.5px; } .vpl-seeall { font-size: 14px; padding: 12px; } } /* ── Stránka s výsledkami ───────────────────────────────────────────────── */ /* Oznam o oprave preklepu nad výpisom produktov. */ .vpl-page-note { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--wd-primary-color, #83b735); background: #f7f9f4; font-size: 14px; color: #4a4a4a; } .vpl-page-note strong { color: var(--wd-title-color, #242424); } /* ── Mobil: hľadanie ako samostatná obrazovka ───────────────────────────── */ /* * Rozbaľovacie okienko pod poľom v hlavičke je na telefóne tesné a lekárenská * premávka je prevažne mobilná. Panel preto vyplní zvyšok obrazovky a pozadie * sa stmaví, nech nič neodvádza pozornosť. */ .vpl-backdrop { position: fixed; inset: 0; z-index: 2147482999; background: rgba(0, 0, 0, .38); animation: vpl-fade .15s ease-out; /* Ťah prstom po pozadí nesmie rolovať stránku pod ním. */ touch-action: none; overscroll-behavior: contain; } .vpl-backdrop[hidden] { display: none !important; } @keyframes vpl-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vpl-backdrop { animation: none; } } html.vpl-no-scroll, html.vpl-no-scroll body { overflow: hidden; } .vpl-search__panel.vpl-panel--mobile { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; animation: none; } .vpl-search__panel.vpl-panel--mobile .vpl-row { padding: 12px 14px; } .vpl-search__panel.vpl-panel--mobile .vpl-row__img { width: 50px; height: 50px; } .vpl-search__panel.vpl-panel--mobile .vpl-row__name { font-size: 15px; } .vpl-search__panel.vpl-panel--mobile .vpl-seeall { position: sticky; bottom: 0; margin-top: 0; } /* ── Fullscreen hľadanie na mobile ────────────────────────────────────────── * Samostatná obrazovka s vlastným poľom. Stránka pod ňou nech si roluje, * ako chce — obrazovky sa to netýka. 100dvh sleduje klávesnicu. */ .vpl-fs { position: fixed; inset: 0; z-index: 2147483200; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #fff; --vpl-accent: var(--wd-primary-color, #83b735); --vpl-title: var(--wd-title-color, #242424); --vpl-text: var(--wd-link-color, #333); --vpl-muted: #767676; --vpl-border: #e6e6e6; --vpl-hover: #f6f7f5; --vpl-radius: var(--wd-brd-radius, 5px); --vpl-field-brd: var(--wd-form-brd-color, #0a5aa1); font-family: var(--wd-text-font, inherit); color: var(--vpl-text); } .vpl-fs[hidden] { display: none !important; } .vpl-fs__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--vpl-border); background: #fff; } /* * `all: unset` zhodí VŠETKY štýly témy pre