/* ══════════════════════════════════════════════════════════════════════ FitExpert – Filtr produktů v kategorii Verze: 1.0 Instalace: Shoptet admin → Vzhled → Úprava šablony → Vlastní CSS nebo odkaz na tento soubor v šablony ══════════════════════════════════════════════════════════════════════ */ :root { --fe-blue: #239ceb; --fe-blue-hover: #1997e5; --fe-blue-light: #e8f5fd; --fe-red: #e8001d; --fe-green: #22c55e; --fe-border: #d8d8d8; --fe-bg-bar: #e6f3fb; --fe-bg-group: #fff; --fe-text: #1a1a1a; --fe-text-muted: #777; --fe-radius: 4px; } /* ── MOBILNÍ TLAČÍTKO (skryto na desktopu) ─────────────────────────── */ .fe-mobile-btn { display: none; width: 100%; padding: 13px 18px; background: #fff; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); font-size: 14px; font-weight: 600; color: var(--fe-text); cursor: pointer; font-family: inherit; text-align: left; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fe-mobile-btn .fe-mobile-badge { font-size: 13px; color: var(--fe-blue); font-weight: 700; display: none; } /* ── FILTR LIŠTA ────────────────────────────────────────────────────── */ /* Žádné podtržení na odkazech uvnitř filtru */ .fe-filter-bar a, .fe-filter-bar a:hover, .fe-filter-bar a:visited { text-decoration: none !important; } .fe-filter-bar { background: var(--fe-bg-bar); border: 1.5px solid rgba(35,156,235,.28); border-radius: 12px; box-shadow: 0 2px 18px rgba(35,156,235,.10); display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 20px; } /* ── SUPER-SKUPINA (dvě karty spojené bez oddělovače) ───────────────── */ .fe-super-group { display: flex; align-items: stretch; } /* ── KARTA SKUPINY ──────────────────────────────────────────────────── */ .fe-group { background: var(--fe-bg-group); border-radius: 9px; display: flex; flex-direction: column; padding: 6px 12px; gap: 5px; flex-shrink: 0; } .fe-group--grow { flex: 1; } .fe-glabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #aaa; white-space: nowrap; line-height: 1; } /* ── DOSTUPNOST – segmented toggle (Vše / Na skladě) ───────────────── */ .fe-stock-toggle { display: flex; align-items: center; background: #f0f0f0; border-radius: 3px; padding: 2px; } .fe-st-btn { padding: 8px 18px; border: none; background: transparent; border-radius: 2px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--fe-text-muted); font-family: inherit; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; letter-spacing: .2px; text-decoration: none; display: inline-block; line-height: normal; } .fe-st-btn:hover { color: var(--fe-text); } .fe-st-btn.is-active { background: var(--fe-blue); color: #fff; box-shadow: 0 1px 4px rgba(35,156,235,.4); } /* ── VELIKOSTNÍ CHIPY ───────────────────────────────────────────────── */ .fe-sizes-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .fe-sc { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; padding: 7px 12px; border: 1.5px solid var(--fe-border); border-radius: var(--fe-radius); background: #fff; cursor: pointer; transition: all .15s; user-select: none; text-decoration: none; } .fe-sc:hover { border-color: var(--fe-blue); background: var(--fe-blue-light); } .fe-sc__name { font-size: 13px; font-weight: 700; color: var(--fe-text); line-height: 1; } .fe-sc__count { font-size: 10px; color: var(--fe-text-muted); margin-top: 2px; } .fe-sc.is-active { border-color: var(--fe-blue) !important; background: var(--fe-blue); } .fe-sc.is-active .fe-sc__name { color: #fff; } .fe-sc.is-active .fe-sc__count { color: rgba(255,255,255,.65); } /* ── ŠTÍTKY (AKCE / Novinka / Na skladě standalone) ─────────────────── */ .fe-tags-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .fe-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--fe-radius); border: 1.5px solid var(--fe-border); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fe-text-muted); transition: all .15s; font-family: inherit; white-space: nowrap; text-decoration: none; } .fe-tag:hover { border-color: currentColor; } .fe-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .fe-tag.akce:hover { color: #c40000; background: #fff5f5; border-color: #f50000; } .fe-tag.akce.is-active { color: #fff; background: #f50000; border-color: #f50000; } .fe-tag.akce .fe-tag-dot { background: #f50000; } .fe-tag.akce.is-active .fe-tag-dot { background: rgba(255,255,255,.7); } .fe-tag.novinka:hover { color: #1e2781; background: #eff0fb; border-color: #2632a2; } .fe-tag.novinka.is-active { color: #fff; background: #2632a2; border-color: #2632a2; } .fe-tag.novinka .fe-tag-dot { background: #2632a2; } .fe-tag.novinka.is-active .fe-tag-dot { background: rgba(255,255,255,.7); } .fe-tag.sklad:hover { color: var(--fe-blue); background: var(--fe-blue-light); border-color: var(--fe-blue); } .fe-tag.sklad.is-active { color: #fff; background: var(--fe-blue); border-color: var(--fe-blue); } /* ── DROPDOWN (Značky, Dle ceny) ────────────────────────────────────── */ .fe-dd { position: relative; } .fe-dd-btn { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1.5px solid var(--fe-border); border-radius: var(--fe-radius); background: #fff; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--fe-text); white-space: nowrap; transition: all .15s; font-family: inherit; } .fe-dd-btn:hover, .fe-dd-btn.is-open, .fe-dd-btn.is-active { border-color: var(--fe-blue); color: var(--fe-blue); background: var(--fe-blue-light); } .fe-dd-btn.is-active { font-weight: 700; } .fe-dd-chevron { font-size: 10px; transition: transform .15s; color: var(--fe-text-muted); } .fe-dd-btn.is-open .fe-dd-chevron { transform: rotate(180deg); } .fe-dd-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); padding: 16px; min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 400; } .fe-dd-panel.is-open { display: block; } .fe-dd-panel__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--fe-text-muted); margin-bottom: 12px; } .fe-brand-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer; border-radius: var(--fe-radius); } .fe-brand-item:hover { background: #f5f5f5; } .fe-brand-item input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--fe-blue); } .fe-brand-item label { cursor: pointer; flex: 1; font-size: 13px; } .fe-brand-count { font-size: 12px; color: var(--fe-text-muted); } .fe-price-range-hint { font-size: 12px; color: #aaa; margin-bottom: 8px; } .fe-price-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .fe-price-inp { width: 90px; padding: 8px 10px; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); font-size: 13px; font-family: inherit; } .fe-price-ok { padding: 8px 16px; background: var(--fe-blue); color: #fff; border: none; border-radius: var(--fe-radius); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; } .fe-price-ok:hover { background: var(--fe-blue-hover); } /* ── SECONDARY ROW (Značky + Cena vedle sebe) ───────────────────────── */ .fe-secondary-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* ── RESET ──────────────────────────────────────────────────────────── */ .fe-group--reset { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; padding: 4px 2px 4px 0; background: transparent; } .fe-btn-reset { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #fff5f5; color: var(--fe-red); border: 1.5px solid #ffc9c9; border-radius: var(--fe-radius); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s; text-decoration: none; } .fe-btn-reset:hover { background: #ffe0e0; border-color: var(--fe-red); } /* ══════════════════════════════════════════════════════════════════════ MOBILNÍ ROZLOŽENÍ ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .fe-mobile-btn { display: flex; } .fe-filter-bar { display: none; } .fe-filter-bar.is-open { display: flex; flex-direction: column; gap: 2px; padding: 8px; } .fe-super-group { flex-direction: column; } .fe-group { width: 100%; } .fe-group--reset { padding: 6px 0 2px; justify-content: stretch; } .fe-group--reset .fe-btn-reset { width: 100%; justify-content: center; } .fe-sizes-row { flex-wrap: wrap; } .fe-secondary-row { flex-wrap: wrap; } }