/* =========================================
1. ZMIENNE I KONFIGURACJA KOLORÓW
========================================= */
:root {
/* Paleta Jasna (Light Mode) */
--bg-body: #f4f6f9;
--bg-card: #ffffff;
--bg-header: #ffffff;
--text-main: #2c3e50;
--text-muted: #7f8c8d;
--border-color: #e2e8f0;
--primary: #d00000; /* Czerwień z meta tagów */
--primary-hover: #b00000;
--accent: #2980b9;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
--radius: 8px;
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Paleta Ciemna (Dark Mode) - Automatyczna detekcja */
@media (prefers-color-scheme: dark2) {
:root {
--bg-body: #121212;
--bg-card: #1e1e1e;
--bg-header: #1e1e1e;
--text-main: #e0e0e0;
--text-muted: #a0a0a0;
--border-color: #333333;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
--shadow-md: 0 4px 6px rgba(0,0,0,0.4);
}
}

/* =========================================
2. GLOBALNY RESET I BAZA
========================================= */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: var(--font-main);
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.6;
font-size: 16px;
transition: background-color 0.3s ease, color 0.3s ease;
}

a {
text-decoration: none;
color: inherit;
transition: color 0.2s;
}

img {
max-width: 100%;
height: auto;
display: block;
}

/* =========================================
3. UKŁAD STRONY (.page)
========================================= */
.page {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
}

/* =========================================
4. NAGŁÓWEK (.top)
========================================= */
.top {
background-color: var(--bg-header);
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--shadow-sm);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
position: relative; /* Dla menu dropdown */
}

/* Logo */
.t_l img {

width: auto;
}

/* Sekcja szukania (.t_r) */
.t_r {
display: flex;
flex: 1;
max-width: 600px;
gap: 10px;
}

/* Input wyszukiwania (#ll) */
input#ll {
flex: 1;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
background-color: var(--bg-body);
color: var(--text-main);
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}

input#ll:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(208, 0, 0, 0.1);
}

/* Przycisk szukania (.bbb) */
button.bbb {
background-color: var(--primary);
color: white;
border: none;
padding: 0 25px;
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.5px;
transition: background-color 0.2s, transform 0.1s;
}

button.bbb:hover {
background-color: var(--primary-hover);
}

button.bbb:active {
transform: scale(0.98);
}

/* Wyniki wyszukiwania na żywo (#livesearch) */
#livesearch {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-card);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
z-index: 1000;
border-radius: var(--radius);
margin: 10px auto 0 auto; /* Wyśrodkowanie jeśli potrzeba */
}

/* =========================================
5. MENU (.menu)
========================================= */
.menu {
width: 100%;
margin-top: 10px;
}

/* Stylizacja selecta */
.menu select {
width: 100%;
padding: 15px;
background-color: var(--text-main); /* Ciemne tło w light mode dla kontrastu */
color: var(--bg-card);
border: none;
border-radius: var(--radius);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
appearance: none; /* Usuwa domyślną strzałkę systemową */
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 15px top 50%;
background-size: 12px auto;
}

@media (prefers-color-scheme: dark) {
.menu select {
background-color: #333;
color: #fff;
}
}

/* =========================================
6. SEKCJONOWANIE PRODUKTÓW (.polecane)
========================================= */
.polecane {
margin-bottom: 60px;
}

.polecane h2 {
font-size: 1.8rem;
margin-bottom: 25px;
font-weight: 700;
color: var(--text-main);
border-left: 5px solid var(--primary);
padding-left: 15px;
}

/* Kontener siatki produktów - zastępujemy stare floaty */
.polecane {
display: grid;
/* Automatyczna siatka: karty mają min. 220px, max rozciągają się */
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 25px;
}

/* Wyjątek dla nagłówka, żeby zajmował całą szerokość siatki */
.polecane > h2 {
grid-column: 1 / -1;
}

/* =========================================
7. KARTA PRODUKTU (.pol, .pp)
========================================= */
.pol {
background-color: var(--bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid var(--border-color);
overflow: hidden;
height: 100%; /* Wyrównanie wysokości kart */
}

.pol:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--primary);
}

.pp {
padding: 15px;
height: 100%;
display: flex;
flex-direction: column;
}

.pp a {
display: flex;
flex-direction: column;
height: 100%;
color: var(--text-main);
}

/* Tytuł produktu (.title) */
.title {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 15px;
line-height: 1.4;
height: 2.8em; /* Ograniczenie do 2 linii */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

/* Obrazek (.p_img) */
img.p_img {
width: 100%;
height: 180px;
object-fit: contain; /* Obrazek cały widoczny bez przycinania */
margin-bottom: 15px;
padding: 10px;
background-color: var(--bg-card); /* Tło pod PNG z przezroczystością */
}

/* Sekcja ceny (.cena2) */
.cena2 {
margin-top: auto; /* Dopychanie ceny do dołu karty */
display: flex;
flex-direction: column;
align-items: flex-start;
}

/* Stara cena (.price_old) */
.price_old {
text-decoration: line-through;
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 2px;
}

/* Aktualna cena (.pp2) */
.pp2 {
color: var(--primary);
font-size: 1.3rem;
font-weight: 800;
}

/* Opcjonalny przycisk w karcie, jeśli dodasz go w przyszłości */
.button {
margin-top: 10px;
background-color: var(--bg-body);
color: var(--text-main);
text-align: center;
padding: 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
transition: background 0.2s;
}

.pol:hover .button {
background-color: var(--primary);
color: white;
}

/* =========================================
8. RESPANSYWNOŚĆ (MOBILE)
========================================= */
@media (max-width: 768px) {
.top {
flex-direction: column;
align-items: stretch;
}

.t_l {
text-align: center;

}

.t_r {
max-width: 100%;
}

input#ll {
width: 100%;
}

.polecane {
grid-template-columns: repeat(2, 1fr); /* 2 kolumny na tablecie/dużym telefonie */
gap: 15px;
}
}

@media (max-width: 480px) {
.polecane {
grid-template-columns: 1fr; /* 1 kolumna na małym telefonie */
}

.t_r {
flex-direction: column;
}

button.bbb {
width: 100%;
padding: 12px;
}
}