/* Style naglowka i stopki — wspolne dla calego serwisu.
 *
 * Powstalo z trzech blokow <style> w `header.html` (dwa) i `footer.html` (jeden),
 * 27.08.2026. Bloki jechaly w kazdej odslonie kazdej strony: 12 975 B surowo,
 * 2 928 B po gzipie. Na stronie produktu boli to najbardziej, bo dokument leci
 * z `no-store` i nic sie nie cachuje.
 *
 * TAG <link> MUSI ZOSTAC W <body>, tam gdzie stal pierwszy blok <style>.
 * Reguly sa bezwarstwowe, wiec miedzy soba rozstrzyga je KOLEJNOSC, a jedna
 * z nich — `.dark-mode #main-header.header-scrolled` — jest zdefiniowana
 * TAKZE w `dark-mode.css`. Dzis wygrywa ta stad, bo stoi pozniej w dokumencie.
 * Przeniesienie linku do <head> (np. do `head_common.html`, ktory wchodzi przed
 * `styles.css`) odwrocilo by ten pojedynek i naglowek po przewinieciu zmienilby
 * kolor w trybie ciemnym.
 */

.fr-search-help-button {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px;
    color: #94a3b8; background: transparent; border: 1px solid #cbd5e1;
    border-radius: 999px; font: 750 12px/1 Outfit, sans-serif;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.fr-search-help-button:hover { color: #475569; background: #f1f5f9; border-color: #94a3b8; }
.fr-search-help-button:focus-visible { outline: 2px solid #94a3b8; outline-offset: 2px; }
.dark-mode .fr-search-help-button { color: #94a3b8; background: transparent; border-color: #52525b; }
.dark-mode .fr-search-help-button:hover { color: #d4d4d8; background: #27272a; border-color: #71717a; }

.fr-suggest-panel {
    background: rgba(255, 255, 255, .98);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .14);
    overflow: hidden;
    backdrop-filter: blur(18px);
}
.fr-suggest-scroll { max-height: min(50vh, 430px); overflow-y: auto; padding: 8px; }
.fr-suggest-guide {
    display: grid; gap: 4px; margin: 0 0 8px; padding: 16px 18px; border-radius: 13px;
    color: #fff; background: linear-gradient(135deg, #7f0525 0%, var(--color-accent) 55%, #b20b38 100%);
}
.fr-suggest-guide strong { font: 700 16px/1.3 Outfit, sans-serif; }
.fr-suggest-guide > span:last-child { color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.5; }
.fr-suggest-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fr-suggest-section { padding: 10px 8px; }
.fr-suggest-section + .fr-suggest-section { border-top: 1px solid #f1f5f9; }
.fr-suggest-section-muted { background: #f8fafc; border-radius: 12px; }
.fr-suggest-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 2px 4px 9px; color: #64748b; font-size: 10px; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase;
}
.fr-suggest-heading small { color: #94a3b8; font-size: 9px; letter-spacing: .03em; text-transform: none; }
.fr-suggest-discovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fr-suggest-discovery {
    display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; padding: 9px;
    color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
}
.fr-suggest-discovery:hover { color: var(--color-accent-hover); border-color: #dca6b4; }
.fr-suggest-discovery > i { color: var(--color-accent); text-align: center; }
.fr-suggest-discovery strong, .fr-suggest-discovery small { display: block; }
.fr-suggest-discovery strong { font: 650 12px/1.2 Outfit, sans-serif; }
.fr-suggest-discovery small { margin-top: 2px; color: #94a3b8; font-size: 9px; }
.fr-suggest-intent-row { padding: 5px 7px 3px; }
.fr-suggest-intent {
    display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px;
    color: #64748b; background: #f8fafc; border-radius: 9px;
}
.fr-suggest-intent:hover { color: #334155; background: #f1f5f9; }
.fr-suggest-intent-top { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.fr-suggest-chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fr-suggest-chips::-webkit-scrollbar { display: none; }
.fr-suggest-chip { flex: 0 0 auto; }
.fr-suggest-chip { padding: 3px 7px; color: #475569; background: #fff; border: 1px solid #dbe3ec; border-radius: 999px; font-size: 9px; font-weight: 700; }
.fr-suggest-chip-availability { color: #18745a; border-color: #c5e8dc; background: #f2fbf7; }
.fr-suggest-chip-ignored { color: #94a3b8; border-style: dashed; text-decoration: line-through; }
.fr-suggest-intent-chevron { flex: 0 0 auto; margin-left: auto; color: #94a3b8; font-size: 8px; }
.fr-suggest-product-heading { padding: 12px 12px 6px; letter-spacing: .08em; }
.fr-suggest-product {
    display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 11px;
    padding: 9px 10px; cursor: pointer; border-radius: 12px; transition: .15s ease;
}
.fr-suggest-product:hover, .fr-suggest-product.is-selected { background: #f6f8fb; }
.fr-suggest-product-image { display: grid; place-items: center; width: 54px; height: 54px; background: #fff; border: 1px solid #eef2f7; border-radius: 11px; overflow: hidden; }
.fr-suggest-product-image img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.fr-suggest-product-copy { min-width: 0; }
.fr-suggest-product-copy > strong { display: block; overflow: hidden; color: #172033; font: 700 13px/1.35 Outfit, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.fr-suggest-product-meta, .fr-suggest-product-signals { display: flex; align-items: center; gap: 5px; min-width: 0; color: #7c8798; font-size: 10px; }
.fr-suggest-product-meta { margin-top: 3px; }
.fr-suggest-product-meta b { overflow: hidden; color: #566174; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.fr-suggest-product-signals { margin-top: 5px; color: #64748b; }
.fr-suggest-product-signals > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-suggest-product-signals .fa-star { color: #e6a526; }
.fr-suggest-product-side { display: grid; justify-items: end; gap: 4px; min-width: 78px; color: #263247; }
.fr-suggest-product-side > strong { font: 700 12px/1 Outfit, sans-serif; }
.fr-suggest-available { color: #17825f; font-size: 9px; font-weight: 750; }
.fr-suggest-unavailable { color: #7c8798; font-size: 9px; font-weight: 750; }
.fr-suggest-chevron { display: none; color: var(--color-accent); font-size: 9px; }
.fr-suggest-mobile-price { display: none; color: #334155; font-weight: 750; }
.fr-suggest-mobile-unavailable { display: none; color: #7c8798; font-weight: 700; }
.fr-suggest-empty { display: flex; align-items: center; gap: 12px; margin: 8px; padding: 14px; color: #64748b; background: #f8fafc; border-radius: 12px; }
.fr-suggest-empty > i { color: var(--color-accent); }
.fr-suggest-empty span, .fr-suggest-empty strong { display: block; }
.fr-suggest-empty span { font-size: 11px; }
.fr-suggest-empty strong { margin-bottom: 2px; color: #334155; font-size: 12px; }
.fr-suggest-all {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; color: #334155; text-align: left; background: rgba(248,250,252,.98); border-top: 1px solid #e2e8f0;
}
.fr-suggest-all:hover { color: var(--color-accent); background: #f1f5f9; }
.fr-suggest-all strong { font: 700 12px/1.3 Outfit, sans-serif; }
.fr-suggest-all-icon {
    display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto;
    color: #64748b; background: #fff; border: 1px solid #dbe3ec; border-radius: 999px;
    font-size: 9px; transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.fr-suggest-all:hover .fr-suggest-all-icon { color: var(--color-accent); border-color: #d8a2af; transform: translateX(2px); }

.dark-mode .fr-suggest-panel { background: rgba(24,24,27,.98); border-color: rgba(255,255,255,.12); }
.dark-mode .fr-suggest-section + .fr-suggest-section { border-color: rgba(255,255,255,.08); }
.dark-mode .fr-suggest-section-muted, .dark-mode .fr-suggest-product:hover, .dark-mode .fr-suggest-product.is-selected, .dark-mode .fr-suggest-empty { background: rgba(255,255,255,.045); }
.dark-mode .fr-suggest-discovery { color: #cbd5e1; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.dark-mode .fr-suggest-intent { color: #cbd5e1; background: rgba(255,255,255,.045); }
.dark-mode .fr-suggest-chip { color: #d4d4d8; background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.14); }
.dark-mode .fr-suggest-chip-availability { color: #92e6c8; border-color: rgba(146,230,200,.28); background: rgba(8,112,82,.16); }
.dark-mode .fr-suggest-chip-ignored { color: #8b8b93; border-color: rgba(255,255,255,.16); }
.dark-mode .fr-suggest-product-image { border-color: rgba(255,255,255,.1); }
.dark-mode .fr-suggest-product-copy > strong, .dark-mode .fr-suggest-empty strong { color: #f8fafc; }
.dark-mode .fr-suggest-product-meta b, .dark-mode .fr-suggest-product-side { color: #cbd5e1; }
.dark-mode .fr-suggest-product-signals, .dark-mode .fr-suggest-mobile-price, .dark-mode .fr-suggest-mobile-unavailable, .dark-mode .fr-suggest-unavailable { color: #a1a1aa; }
.dark-mode .fr-suggest-all { color: #e4e4e7; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.dark-mode .fr-suggest-all:hover { color: #fff; background: rgba(255,255,255,.07); }
.dark-mode .fr-suggest-all-icon { color: #a1a1aa; background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.12); }
@media (min-width: 641px) {
    .fr-suggest-scroll { max-height: min(58vh, 520px); padding: 10px; }
    .fr-suggest-product-heading { padding: 14px 13px 8px; font-size: 11px; }
    .fr-suggest-product {
        grid-template-columns: 62px minmax(0, 1fr) auto;
        gap: 13px;
        padding: 11px 12px;
    }
    .fr-suggest-product-image { width: 62px; height: 62px; }
    .fr-suggest-product-copy > strong { font-size: 15px; }
    .fr-suggest-product-meta, .fr-suggest-product-signals { gap: 6px; font-size: 11px; }
    .fr-suggest-product-meta { margin-top: 4px; }
    .fr-suggest-product-signals { margin-top: 6px; }
    .fr-suggest-product-side { min-width: 92px; }
    .fr-suggest-product-side > strong { font-size: 13px; }
    .fr-suggest-available { font-size: 10px; }
    .fr-suggest-all { padding: 13px 18px; }
    .fr-suggest-all strong { font-size: 13px; }
}
@media (max-width: 640px) {
    .fr-suggest-panel { border-radius: 14px; }
    .fr-suggest-scroll { max-height: min(45vh, 360px); padding: 6px; }
    .fr-suggest-section { padding: 7px 5px; }
    .fr-suggest-guide { padding: 13px 14px; }
    .fr-suggest-guide strong { font-size: 14px; }
    .fr-suggest-discovery-grid { grid-template-columns: 1fr 1fr; }
    .fr-suggest-product { grid-template-columns: 46px minmax(0,1fr) 18px; gap: 8px; }
    .fr-suggest-product-image { width: 46px; height: 46px; }
    .fr-suggest-product-side { min-width: 0; }
    .fr-suggest-product-side > strong, .fr-suggest-available, .fr-suggest-unavailable { display: none; }
    .fr-suggest-chevron { display: block; }
    .fr-suggest-mobile-price, .fr-suggest-mobile-unavailable { display: inline; }
    .fr-suggest-product-heading { padding: 10px 10px 5px; }
    .fr-suggest-all { padding: 10px 12px; }
    .fr-suggest-all-icon { width: 25px; height: 25px; }
}

#main-header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-header.header-scrolled {
    @apply py-1 shadow-xl shadow-slate-200/20 dark:shadow-none;
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) saturate(180%);
}
.dark-mode #main-header.header-scrolled {
    background-color: color-mix(in oklab, var(--fr-canvas) 92%, transparent) !important;
    border-bottom-color: var(--fr-line-subtle) !important;
}

/* Active/Focus states for search */
.search-input-focus {
    @apply ring-4 ring-accent/5 border-accent/30 bg-white dark:bg-neutral-800 !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-slate-200 dark:bg-slate-800 rounded-full;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-accent/50;
}

/* Animation for basket */
@keyframes nudge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.basket-animate {
    animation: nudge 0.3s ease-in-out;
}

/* exact hero styling: same warm base + same subtle radial glow */
.fr-footer {
  background-color: #f8f9fb;
  background-image: radial-gradient(circle at 72% 18%, rgba(155, 6, 44, .045), transparent 26rem);
  border-top-color: rgba(36, 30, 24, .07);
}
.dark-mode .fr-footer {
  background-color: var(--fr-canvas);
  background-image: radial-gradient(circle at 72% 18%, color-mix(in oklab, var(--fr-accent) 12%, transparent), transparent 26rem);
  border-top-color: var(--fr-line-subtle);
}
