/* Search Bar Optimization */
:root {
    --cta-bg-color: #CF0000;
    --cta-hover-bg-color: #9f0000;
    --cta-text-color: #FFF;
    --cta-border-radius: 5px;
}

/* Globalny reset dla dropdownu */
#header .tvsearch-result,
#header .tvcmssearch-dropdown,
#header .tvcmssearch-dropdown * {
    box-sizing: border-box !important;
}

/* Nadpisanie kontenera rodzica */
#header .tvsearch-result {
    width: auto !important;
    right: 0 !important;
    left: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* Kontener główny dropdownu */
#header .tvcmssearch-dropdown {
    padding: 10px 0 !important;
    border-bottom: 4px solid var(--cta-bg-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    border-radius: 0 0 8px 8px !important;
    background: #fff !important;
    width: 600px !important;
    max-width: 95vw !important;
    right: 0 !important;
    left: auto !important;
    z-index: 999 !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important;
}

.tvsearch-dropdown-total-wrapper {
    padding: 0 15px 10px 15px !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
    width: 100% !important;
    display: block !important;
}

.tvsearch-dropdown-total {
    font-weight: 500 !important;
    color: #888 !important;
    font-size: 13px !important;
}

.tvsearch-all-dropdown-wrapper {
    max-height: 450px !important;
    overflow-y: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wymuszenie pełnej szerokości */
#header .tvsearch-all-dropdown-wrapper .tvsearch-dropdown-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    float: none !important;
    display: block !important;
    clear: both !important;
}

#header .tvsearch-all-dropdown-wrapper .tvsearch-dropdown-wrapper:last-child {
    border-bottom: none !important;
}

#header .tvsearch-all-dropdown-wrapper .tvsearch-dropdown-wrapper:hover {
    background-color: #fcfcfc !important;
}

/* Stylizacja linku a */
#header .tvsearch-all-dropdown-wrapper .tvsearch-dropdown-wrapper a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    width: 100% !important;
    padding: 10px 15px !important;
    border: none !important;
    margin: 0 !important;
}

/* Kontener zdjęcia – placeholder jako tło kontenera (SVG) */
.tvsearch-dropdown-img-block {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    margin-right: 15px !important;
    flex: 0 0 50px !important;
    background-color: #f5f5f5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 22px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Obrazek produktu – przykrywa placeholder */
.tvsearch-dropdown-img-block img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    background-color: #fff !important; /* Białe tło Przykrywa placeholder SVG pod spodem */
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* Ukrycie obrazka "brak zdjęcia" Presty – odsłania placeholder SVG z tła kontenera */
/* Selector celuje TYLKO w Presta no-image: URL kończy się na "/p/-small_default.jpg"
   (brak ID produktu przed "-small_default") */
.tvsearch-dropdown-img-block img[src$="/p/-small_default.jpg"],
.tvsearch-dropdown-img-block img[src*="/p/-small_default.jpg?"],
.tvsearch-dropdown-img-block img[src*="/p/0-small_default.jpg"] {
    display: none !important;
}

.tvsearch-dropdown-content-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    overflow: hidden !important;
}

.tvsearch-dropdown-title {
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    padding-right: 15px !important;
    flex-grow: 1 !important;
}

.tvsearch-dropdown-wrapper:hover .tvsearch-dropdown-title {
    color: var(--cta-bg-color) !important;
}

.product-price-and-shipping {
    margin-left: auto !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.tvsearch-all-dropdown-wrapper .product-price-and-shipping .price {
    font-weight: 600 !important;
    color: #000 !important;
    font-size: 16px !important;
}

.tvsearch-dropdown-wrapper:hover .price {
    color: var(--cta-bg-color) !important;
}

.tvsearch-more-search-wrapper {
    padding: 12px 15px !important;
    text-align: center !important;
    background: #fff !important;
    clear: both !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

.tvsearch-more-search.btn {
    background-color: var(--cta-bg-color) !important;
    color: var(--cta-text-color) !important;
    border-radius: var(--cta-border-radius) !important;
    padding: 8px 25px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    border: none !important;
    width: auto !important;
    display: inline-block !important;
}

/* Ukrywanie gwiazdek */
.tvsearch-dropdown-wrapper .comments_note,
.tvsearch-dropdown-wrapper .star_content,
.tvsearch-dropdown-wrapper .tvsearch-dropdown-rating,
.tvsearch-dropdown-wrapper .tvsearch-dropdown-content-box .star {
    display: none !important;
}

/* Przycisk zamknięcia X - podniesiony wyżej */
.tvsearch-dropdown-close-wrapper {
    cursor: pointer !important;
    position: absolute !important;
    right: 15px !important;
    top: 5px !important; /* Podniesiony z 10px na 5px */
    color: #bbb !important;
    z-index: 1001 !important; /* Wyżej niż wszystko */
}

/* Scrollbar styling */
.tvsearch-all-dropdown-wrapper::-webkit-scrollbar {
    width: 5px;
}
.tvsearch-all-dropdown-wrapper::-webkit-scrollbar-track {
    background: #f9f9f9;
}
.tvsearch-all-dropdown-wrapper::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 5px;
}

/* =========================================================
   Product Card – Image Placeholder
   Ten sam mechanizm co w wyszukiwarce:
   1. Kontener .tvproduct-image-slider ma placeholder SVG jako tło
   2. <img> ma białe tło → przykrywa placeholder gdy zdjęcie istnieje
   3. Gdy URL to domyślne zdjęcie Presty → img ukryta → widać placeholder
   ========================================================= */

/* Placeholder SVG jako tło kontenera */
.tvproduct-image-slider {
    background-color: #f5f5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80px 80px;
}

/* Główny obrazek – białe tło przykrywa placeholder gdy zdjęcie istnieje.
   Używamy opacity zamiast display:none, aby kontener nie tracił wysokości
   (inaczej tło-placeholder też znikałoby razem ze zdjęciem). */
.tvproduct-image-slider > img,
.tvproduct-image-slider img.js-qv-product-cover {
    background-color: #fff;
}

/* "Ukrycie" domyślnego zdjęcia PrestaShop przez opacity:0 + visibility:hidden.
   Zachowujemy wymiary (layout nie pęka), kontener zachowuje wysokość,
   dzięki czemu tło SVG (placeholder) pozostaje widoczne.
   Wzorzec: {iso_code}-default-{size}.jpg – unikalny dla obrazków "brak zdjęcia".
   Normalne produkty mają format: {id}-large_default.jpg (bez "-default-"). */
.tvproduct-image-slider img[src*="-default-large_default"],
.tvproduct-image-slider img[src*="-default-medium_default"],
.tvproduct-image-slider img[src*="-default-home_default"],
.tvproduct-image-slider img[src*="-default-small_default"],
.tvproduct-image-slider img[src*="/img/p/pl-default-"],
.tvproduct-image-slider img[src*="/img/p/en-default-"],
.tvproduct-image-slider img[src*="/img/p/de-default-"],
.tvproduct-image-slider img[src*="/img/p/fr-default-"] {
    opacity: 0 !important;
    visibility: hidden !important;
    background-color: transparent !important;
    /* Wymuś pełną szerokość + kwadratowe proporcje (jak large_default 800×800)
       żeby kontener miał dokładnie taką samą wysokość co normalne zdjęcie */
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
}

/* Kontener: gdy zawiera domyślne zdjęcie Presty – wymuś kwadratowe proporcje.
   Selektor :has() – nowoczesne przeglądarki Chrome 105+, Firefox 121+, Safari 15.4+ */
.tvproduct-image-slider:has(img[src*="-default-large_default"]),
.tvproduct-image-slider:has(img[src*="-default-medium_default"]),
.tvproduct-image-slider:has(img[src*="-default-home_default"]),
.tvproduct-image-slider:has(img[src*="-default-small_default"]),
.tvproduct-image-slider:has(img[src*="/img/p/pl-default-"]),
.tvproduct-image-slider:has(img[src*="/img/p/en-default-"]),
.tvproduct-image-slider:has(img[src*="/img/p/de-default-"]),
.tvproduct-image-slider:has(img[src*="/img/p/fr-default-"]) {
    aspect-ratio: 1 / 1;
    min-height: 300px; /* fallback dla starszych przeglądarek bez :has() */
}

/* =========================================================
   Product Listing – Image Placeholder (a.thumbnail.product-thumbnail)
   Bezpieczne podejście: placeholder TYLKO gdy produkt nie ma zdjęcia.
   Normalne produkty (z cover) NIE są dotknięte – brak zmian na ich obrazkach.
   ========================================================= */

/* Placeholder SVG jako tło kontenera – TYLKO gdy brak zdjęcia (selector :has()).
   Normalne produkty nie mają odpowiadającego URL → brak tła → brak ingerencji.
   Kontener nie otrzymuje żadnych wymiarów - jego rozmiar wyznacza ukryty img. */
a.thumbnail.product-thumbnail:has(img[src*="-default-large_default"]),
a.thumbnail.product-thumbnail:has(img[src*="-default-medium_default"]),
a.thumbnail.product-thumbnail:has(img[src*="-default-home_default"]),
a.thumbnail.product-thumbnail:has(img[src*="-default-small_default"]),
a.thumbnail.product-thumbnail:has(img[src*="/img/p/pl-default-"]),
a.thumbnail.product-thumbnail:has(img[src*="/img/p/en-default-"]),
a.thumbnail.product-thumbnail:has(img[src*="/img/p/de-default-"]),
a.thumbnail.product-thumbnail:has(img[src*="/img/p/fr-default-"]) {
    background-color: #f5f5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23cccccc' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30px 30px;
    /* Ogranicz kontener do dokładnego rozmiaru zdjęcia home_default (188×188px).
       Bez tego img width:100% dziedziczy pełną szerokość kolumny (~377px). */
    width: 188px !important;
    max-width: 188px !important;
    display: block !important;
    margin: 0 auto !important;    /* Wyśrodkuj jak normalne zdjęcie (margin: auto na img) */
}

/* Domyślne zdjęcie PrestaShop – ukryj (opacity+visibility zachowuje box-model).
   Wymiary 188×188px (home_default w tym sklepie) narzucone wprost – niezależnie
   od loading="lazy" (który blokuje załadowanie pliku i zeruje wymiary intrinsic).
   Kontener a dziedziczy te wymiary i tło-placeholder jest widoczne.
   Nie dotykamy .tvproduct-hover-img ani innych obrazków normalnych produktów. */
a.thumbnail.product-thumbnail img[src*="-default-large_default"],
a.thumbnail.product-thumbnail img[src*="-default-medium_default"],
a.thumbnail.product-thumbnail img[src*="-default-home_default"],
a.thumbnail.product-thumbnail img[src*="-default-small_default"],
a.thumbnail.product-thumbnail img[src*="/img/p/pl-default-"],
a.thumbnail.product-thumbnail img[src*="/img/p/en-default-"],
a.thumbnail.product-thumbnail img[src*="/img/p/de-default-"],
a.thumbnail.product-thumbnail img[src*="/img/p/fr-default-"] {
    opacity: 0 !important;
    visibility: hidden !important;
    display: block !important;
    width: 100% !important;          /* Wypełnij kontener a.thumbnail */
    aspect-ratio: 1 / 1 !important;  /* Kwadrat jak home_default (188×188) */
    min-height: 188px !important;    /* Fallback dla przeglądarek bez aspect-ratio */
}