/* ================================================================
LOFT HEAVEN – Główny arkusz stylów
================================================================
SYSTEM PALET KOLORÓW
Aby zmienić paletę strony wystarczy odkomentować jedną z linii
na dole sekcji :root lub dodać klasę do :
Domyślna (złoto + czerń): brak klasy
html.palette-2 → Miedź + grafit
html.palette-3 → Zieleń + antracyt
html.palette-4 → Bordo + beż
html.palette-5 → Granat + srebro
html.palette-6 → Rdzawa cegła + piasek
================================================================ */
/* ── PALETA 1: GOLD + BLACK (domyślna) ─────────────────────────── */
:root {
/* ── Paleta 1 – Loft Heaven Signature ──────────────────────── */
--gold: #E4BB4F; /* Złoto Loft – główny akcent */
--gold-dark: #CA7A28; /* Miedź – hover, aktywne */
--gold-light: #f0d080; /* Jasne złoto – tła, subtelności */
--gold-warm: #8E3D03; /* Rdzawa brąz – nagłówki, premium */
--black: #040403; /* Głęboka czerń */
--dark-grey: #262725; /* Ciemny grafit – nawigacja, karty */
--mid-grey: #535955; /* Średni szary – opisy, ikony */
--light-grey: #f5f2ec; /* Ciepłe tło strony */
--white: #ffffff;
--ok: #27ae60;
--accent: var(--gold);
--accent-dark: var(--gold-dark);
--bg-dark: var(--dark-grey);
--text-main: var(--dark-grey);
--text-muted: var(--mid-grey);
}
/* ── PALETY AKCENTÓW – kody kolorów do użycia na stronie ───────── */
/* Te kolory używaj do badge, etykiet stanów, kategorii itp.
Podstawa strony zostaje złoto + czerń. */
:root {
--acc-silver: #9ca3af; /* Srebrno-szary – stany neutralne */
--acc-silver-d: #6b7280;
--acc-green: #4a7c59; /* Zieleń leśna – sukces, eco, outdoor */
--acc-green-d: #3a6447;
--acc-bordo: #8b1a1a; /* Bordo – wyprzedaż, mocne akcenty */
--acc-bordo-d: #6e1515;
--acc-navy: #4a6fa5; /* Granat – premium, newsy */
--acc-navy-d: #3a5a8a;
--acc-copper: #a0522d; /* Rdzawa cegła – drewno, natura */
--acc-copper-d: #8b4513;
}
$1
FUNDAMENTY
================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--light-grey);
color: var(--text-main, var(--dark-grey));
width: 100%;
max-width: 100%;
overflow-x: clip;
margin: 0;
padding: 0;
}
main {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* ================================================================
SEKCJA PRODUKTÓW
================================================================ */
.section-header { text-align: center; margin: 50px 0 30px; }
.section-title {
font-size: 28px; text-transform: uppercase;
letter-spacing: 2px; color: var(--black);
position: relative; padding-bottom: 15px;
}
.section-title::after {
content: ''; position: absolute; bottom: 0; left: 50%;
transform: translateX(-50%); width: 60px; height: 3px;
background: var(--gold);
}
.section-header p { color: #777; margin-top: 10px; font-size: 14px; }
/* KARTA PRODUKTU */
.product-card {
background: #fff;
border-radius: 12px;
transition: all .35s cubic-bezier(.165,.84,.44,1);
border: 1px solid #ede9e0;
box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 8px 28px rgba(228,187,79,.13);
height: 100%;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 16px 40px rgba(228,187,79,.22);
border-color: #d8d0c0;
}
.product-image { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4/3; border-radius: 12px 12px 0 0; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.product-card:hover .product-image img { transform: scale(1.07); }
.product-image::after { content: ''; position: absolute; inset: 0; background: rgba(228,187,79,0); transition: background .4s ease; z-index: 1; pointer-events: none; }
.product-card:hover .product-image::after { background: rgba(228,187,79,.1); }
.product-card a { text-decoration: none; color: inherit; display: block; }
.product-card a.btn-see-product { color: #1a1a1a !important; display: flex; }
/* ── BADGE NA KARCIE PRODUKTU – kolory z palety akcentów ────── */
.badge.new {
position: absolute; top: 12px; left: 12px;
background: rgba(11,11,11,.82); backdrop-filter: blur(5px);
color: #fff; padding: 5px 13px; border-radius: 50px;
z-index: 10; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
}
/* Automatyczne warianty kolorystyczne po treści badge:
Nowość → granat
Wyprzedaż → bordo
Bestseller → złoto
-20% → bordo (widoczny procent)
*/
.badge.new[data-type="nowosc"] { background: var(--acc-navy); }
.badge.new[data-type="wyprzedaz"] { background: var(--acc-bordo); }
.badge.new[data-type="bestseller"]{ background: var(--gold); color: #111; }
.badge.new[data-type="eco"] { background: var(--acc-green); }
.badge.new[data-type="premium"] { background: var(--acc-copper); }
/* Badge procentu rabatu (jeśli jest old_price) */
.badge.discount {
position: absolute; top: 12px; right: 12px;
background: var(--acc-bordo); color: #fff;
padding: 6px 12px; border-radius: 50px;
z-index: 10; font-size: 12px; font-weight: 800;
letter-spacing: .3px; box-shadow: 0 2px 8px rgba(139,26,26,.35);
}
/* ── TAG STANU MAGAZYNOWEGO ──────────────────────────────────── */
.stock-tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 6px;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .3px;
margin-top: 6px; align-self: center;
}
.stock-tag::before {
content: ''; width: 6px; height: 6px;
border-radius: 50%; display: inline-block;
}
.stock-tag.in { background: #d8f0e0; color: var(--acc-green-d); }
.stock-tag.in::before { background: var(--acc-green); }
.stock-tag.low { background: #fce6d4; color: var(--acc-copper-d); }
.stock-tag.low::before { background: var(--acc-copper); }
.stock-tag.out { background: #ffe5e5; color: var(--acc-bordo); }
.stock-tag.out::before { background: var(--acc-bordo); }
.stock-tag.order { background: #e0edff; color: var(--acc-navy-d); }
.stock-tag.order::before { background: var(--acc-navy); }
.product-info { padding: 14px 16px 16px; text-align: left; flex-grow: 1; }
.product-info .category { color: var(--gold); font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.product-name { font-size: .95rem; margin: 3px 0 4px; font-weight: 700; transition: .3s; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card:hover .product-name { color: var(--gold); }
.conf-tag { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 5px 0 2px; opacity: .85; cursor: help; }
.price { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 4px; min-height: 2rem; }
.current-price { font-size: 1.15rem; font-weight: 800; color: var(--black); }
.old-price { font-size: .82rem; color: #bbb; text-decoration: line-through; }
/* ================================================================
HERO BANNER
================================================================ */
.hero-banner {
position: relative; width: 100%;
height: 70vh; min-height: 500px;
background: url('img/hero-banner.png') no-repeat center center;
background-size: cover;
display: flex; align-items: center; margin-bottom: 50px;
}
.hero-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%);
z-index: 1;
}
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-text { max-width: 600px; color: var(--white); }
.hero-subtitle { color: var(--gold); text-transform: uppercase; letter-spacing: 3px; font-weight: 600; font-size: 14px; display: block; margin-bottom: 15px; }
.hero-text h1, .mid-banner h2 { font-size: 48px; line-height: 1.2; margin-bottom: 20px; font-weight: 600; }
.hero-text h1 span, .mid-banner h2 span { color: var(--gold); }
.hero-text p { font-size: 16px; line-height: 1.6; color: #ccc; margin-bottom: 35px; }
.hero-btns { display: flex; gap: 20px; }
.btn-primary { background: var(--gold); color: var(--black); padding: 15px 35px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 13px; border-radius: 5px; transition: 0.3s; }
.btn-primary:hover { background: var(--white); transform: translateY(-3px); }
.btn-outline { border: 2px solid var(--white); color: var(--white); padding: 13px 35px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 13px; border-radius: 5px; transition: 0.3s; }
.btn-outline:hover { background: var(--white); color: var(--black); }
/* ================================================================
MOBILNA NAWIGACJA DOLNA
================================================================ */
.mobile-bottom-nav {
display: none;
position: fixed; bottom: 0; left: 0; width: 100%; height: 56px;
background: var(--black); border-top: 1px solid #222;
z-index: 5000; justify-content: space-around; align-items: center;
padding: 0 10px;
}
@media (max-width: 768px) {
.mobile-bottom-nav { display: flex; }
.desktop-only { display: none !important; }
.mobile-only { display: block !important; }
body { padding-bottom: 60px; }
}
.mobile-only { display: none; }
/* ================================================================
RESPONSYWNOŚĆ
================================================================ */
@media (max-width: 768px) {
.top-bar { flex-wrap: wrap; padding: 15px 20px; gap: 10px; }
.logo { order: 1; }
.logo img { height: 45px; }
.user-actions { order: 2; margin-left: auto; gap: 20px; }
.menu-toggle { display: block; order: 3; margin-left: 10px; }
.search-box { order: 4; flex: 100%; max-width: 100%; margin-top: 10px; }
.main-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; }
.main-nav.active { display: block; }
.menu-list { flex-direction: column; }
.mega-sub-menu { position: relative; opacity: 1; transform: none; display: none; padding: 10px 20px; }
.has-mega-menu.open .mega-sub-menu { display: block; }
.has-mega-menu.open > a .arrow { transform: rotate(180deg) !important; opacity: 1 !important; }
.hero-banner, .mid-banner { height: 50vh; text-align: center; }
.hero-overlay { background: rgba(0,0,0,0.6); }
.hero-text { margin: 0 auto; }
.hero-text h1, .mid-banner h2 { font-size: 32px; }
.hero-btns { justify-content: center; flex-direction: column; gap: 10px; }
.hero-btns a { width: 100%; }
.mid-banner { width: 100%; margin-left: 0; background-attachment: scroll; }
.section-title { font-size: 22px; }
}
/* ================================================================
DEMO PRZEŁĄCZNIKA PALET (tylko do testów — usuń w produkcji)
================================================================ */
.palette-switcher {
position: fixed; bottom: 80px; right: 12px;
background: #fff; border-radius: 12px; padding: 10px;
box-shadow: 0 4px 24px rgba(0,0,0,.18); z-index: 9999;
display: flex; flex-direction: column; gap: 6px;
border: 1px solid #eee;
}
.palette-switcher-title {
font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
color: #aaa; font-weight: 700; text-align: center; margin-bottom: 2px;
}
.palette-btn {
width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
cursor: pointer; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
outline: none;
}
.palette-btn:hover, .palette-btn.active { border-color: #1a1a1a; transform: scale(1.15); }
.palette-btn[data-p="1"] { background: linear-gradient(135deg,#E4BB4F,#CA7A28); }
.palette-btn[data-p="2"] { background: linear-gradient(135deg,#9ca3af,#1f2937); }
.palette-btn[data-p="3"] { background: linear-gradient(135deg,#4a7c59,#1e2a1e); }
.palette-btn[data-p="4"] { background: linear-gradient(135deg,#8b1a1a,#2a1a1a); }
.palette-btn[data-p="5"] { background: linear-gradient(135deg,#4a6fa5,#0f1929); }
.palette-btn[data-p="6"] { background: linear-gradient(135deg,#a0522d,#2d1a0e); }
/* ================================================================
HEADER – jednolinijkowy kompaktowy sticky (logo | nav | ikony)
================================================================ */
html { margin: 0; padding: 0; overflow-x: hidden; }
body { margin: 0; padding: 0; overflow-x: clip; }
.site-header {
position: sticky !important;
top: 0 !important;
z-index: 10010 !important;
width: 100% !important;
background: #0d0d0d !important;
border-bottom: 1px solid rgba(228,187,79,.22) !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* ── Wiersz headera ───────────────────────────────────────────── */
.hdr-inner {
display: flex !important;
align-items: center !important;
height: 60px !important;
gap: 0;
}
/* ── Logo ─────────────────────────────────────────────────────── */
.hdr-logo-link { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; margin-left: 28px; margin-right: 20px; }
.hdr-logo-img { height: 52px; display: block; }
/* ── Nawigacja środek ─────────────────────────────────────────── */
.main-nav {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
background: transparent !important;
padding: 0 !important;
position: static !important;
overflow: visible !important;
}
.menu-list {
display: flex !important;
align-items: center !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 0 !important;
}
.menu-list > li {
height: 100%;
display: flex;
align-items: center;
position: relative;
}
.menu-list > li > a {
display: flex !important;
align-items: center !important;
height: 100% !important;
padding: 0 16px !important;
color: #fff !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: .02em !important;
transition: color .2s !important;
white-space: nowrap;
position: relative;
}
.menu-list > li > a::after {
content: '';
position: absolute;
bottom: 0; left: 14px; right: 14px;
height: 2px;
background: var(--gold, #E4BB4F);
transform: scaleX(0);
transition: transform .25s ease;
border-radius: 2px 2px 0 0;
}
.menu-list > li:hover > a { color: var(--gold, #E4BB4F) !important; }
.menu-list > li:hover > a::after { transform: scaleX(1); }
.menu-list > li > a .arrow { font-size: 8px; margin-left: 6px; transition: transform .2s; opacity: .7; }
.menu-list > li:hover > a .arrow { transform: rotate(180deg); opacity: 1; }
/* ── Mega menu ────────────────────────────────────────────────── */
.mega-sub-menu {
position: fixed !important;
top: 92px !important;
left: 0 !important;
width: 100% !important;
background: #141414 !important;
border-top: 1px solid rgba(228,187,79,.15) !important;
border-bottom: 3px solid var(--gold) !important;
padding: 28px 0 32px !important;
z-index: 10009 !important;
box-shadow: 0 20px 50px rgba(0,0,0,.65) !important;
display: none;
opacity: 0;
transform: translateY(-8px);
transition: opacity .22s ease, transform .22s ease;
}
.has-mega-menu:hover .mega-sub-menu,
.has-mega-menu.open .mega-sub-menu {
display: block !important;
opacity: 1 !important;
transform: translateY(0) !important;
}
.mega-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.mega-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.mega-section-title { color: var(--gold); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
.mega-see-all { color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .18s; }
.mega-see-all:hover { color: var(--gold); }
.mega-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mega-cat-tile { display: flex; flex-direction: column; text-decoration: none; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); transition: background .22s, transform .22s, border-color .22s; }
.mega-cat-tile:hover { background: rgba(228,187,79,.09); transform: translateY(-3px); border-color: rgba(228,187,79,.35); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.mega-cat-tile-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.mega-cat-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; filter: brightness(.8); }
.mega-cat-tile:hover .mega-cat-tile-img img { transform: scale(1.07); filter: brightness(1); }
.mega-cat-tile-ph { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: rgba(255,255,255,.22); font-size: 32px; }
.mega-cat-tile-name { padding: 8px 12px 4px; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3; transition: color .18s; }
.mega-cat-tile:hover .mega-cat-tile-name { color: var(--gold); }
.mega-cat-tile-count { padding: 0 12px 9px; font-size: 10px; color: rgba(255,255,255,.45); }
/* ── Ikony prawe ──────────────────────────────────────────────── */
.hdr-right-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
margin-left: 20px;
margin-right: 24px;
}
.hdr-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 10px;
border: none;
background: transparent;
color: #fff;
cursor: pointer;
text-decoration: none;
transition: background .18s, color .18s;
position: relative;
flex-shrink: 0;
}
.hdr-icon-btn svg { stroke: currentColor; flex-shrink: 0; display: block; }
.hdr-icon-btn:hover { background: rgba(255,255,255,.09); color: var(--gold, #E4BB4F); }
.hdr-icon-label { display: none; }
/* Zalogowany — ikona złota + mała złota kropka */
.hdr-icon-btn--logged { color: var(--gold, #E4BB4F); }
.hdr-icon-btn--logged::after {
content: '';
position: absolute;
bottom: 6px;
right: 6px;
width: 5px;
height: 5px;
background: var(--gold, #E4BB4F);
border-radius: 50%;
border: 1.5px solid #0d0d0d;
}
.hdr-icon-btn--logged:hover { color: #fff; }
/* Koszyk — jedyne wyróżnione CTA w nagłówku */
.hdr-icon-btn--cart {
background: rgba(228,187,79,.13);
border: 1px solid rgba(228,187,79,.28);
margin-left: 6px;
color: var(--gold, #E4BB4F);
}
.hdr-icon-btn--cart:hover { background: rgba(228,187,79,.25); border-color: rgba(228,187,79,.55); }
.hdr-cart-badge { position: absolute; top: 3px; right: 3px; background: var(--gold,#E4BB4F); color: #111; font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #0d0d0d; }
/* ── Mobile / desktop utility ─────────────────────────────────── */
.mobile-bottom-nav { display: none; }
.desktop-only { display: flex; }
.mobile-only { display: none; }
/* ── Responsive ≤ 991px ───────────────────────────────────────── */
@media (max-width: 991px) {
.desktop-only { display: none !important; }
.mobile-only { display: flex !important; }
.hdr-inner { height: 54px !important; }
.hdr-logo-img { height: 48px; }
.hdr-logo-link { margin-right: 0; margin-left: 16px; }
.hdr-right-actions { margin-left: auto; margin-right: 8px; }
.hdr-icon-btn--cart { display: none !important; }
/* Drawer nawigacyjny */
.main-nav {
position: fixed !important;
top: 0 !important; left: -100% !important;
width: 80% !important; max-width: 320px !important;
height: 100% !important;
background: #1a1a1a !important;
z-index: 10005 !important;
padding: 0 !important;
overflow-y: auto !important;
transition: left .32s cubic-bezier(.4,0,.2,1) !important;
box-shadow: 4px 0 32px rgba(0,0,0,.4) !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
#main-navigation.active { left: 0 !important; }
.menu-list { flex-direction: column !important; height: auto !important; align-items: stretch !important; padding: 8px 0 !important; }
.menu-list > li { height: auto !important; display: block !important; }
.menu-list > li > a { height: auto !important; padding: 14px 22px !important; font-size: 14px !important; border-bottom: 1px solid #252525 !important; letter-spacing: .5px !important; }
.menu-list > li > a::after { display: none; }
/* Mega menu w drawerze */
.mega-sub-menu {
position: static !important; top: auto !important; width: auto !important;
background: #141414 !important; padding: 6px 0 12px !important;
box-shadow: none !important; border-bottom: 2px solid #E4BB4F !important;
display: none !important; opacity: 1 !important; transform: none !important;
}
#main-navigation .has-mega-menu.open .mega-sub-menu { display: block !important; }
#main-navigation .has-mega-menu:not(.open) .mega-sub-menu { display: none !important; }
.mega-inner { padding: 0 !important; }
.mega-header-row { display: none !important; }
.mega-cats-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.mega-cat-tile { flex-direction: row !important; align-items: center !important; border-radius: 0 !important; background: none !important; border: none !important; border-bottom: 1px solid #1e1e1e !important; transform: none !important; }
.mega-cat-tile:hover { transform: none !important; box-shadow: none !important; background: rgba(255,255,255,.04) !important; }
.mega-cat-tile-img { width: 44px !important; height: 44px !important; aspect-ratio: auto !important; flex-shrink: 0 !important; border-radius: 6px !important; overflow: hidden !important; margin: 8px 14px !important; }
.mega-cat-tile-ph { width: 44px !important; height: 44px !important; aspect-ratio: auto !important; border-radius: 6px !important; margin: 8px 14px !important; font-size: 18px !important; }
.mega-cat-tile-name { padding: 0 14px 0 0 !important; font-size: 13px !important; }
.close-menu { display: flex; align-items: center; gap: 10px; width: 100%; padding: 18px 20px; border-bottom: 1px solid #2a2a2a; color: #fff; font-size: 17px; font-weight: 700; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; }
.close-menu i { font-size: 20px; margin-left: auto; }
.nav-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10004; backdrop-filter: blur(2px); }
.nav-mobile-overlay.active { display: block; }
.mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 56px; background: #000; border-top: 1px solid #1a1a1a; z-index: 10003; padding: 4px 0; justify-content: space-around; align-items: center; }
body { padding-bottom: 60px; }
}
/* ── Search popup ─────────────────────────────────────────────── */
.search-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 19999; display: none; backdrop-filter: blur(2px); }
.search-popup-overlay.active { display: block; }
.search-popup { position: fixed; top: 0; right: 0; width: 100%; max-width: 480px; height: 100vh; background: #fff; z-index: 20000; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); overflow-y: auto; display: flex; flex-direction: column; box-shadow: -4px 0 40px rgba(0,0,0,.2); }
.search-popup.active { transform: translateX(0); }
.search-popup-form { display: flex; padding: 14px 16px; gap: 8px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; align-items: center; }
.search-popup-form input { flex: 1; padding: 12px 16px; border: 2px solid #eee; border-radius: 10px; font-size: 14px; font-family: inherit; outline: none; transition: .2s; }
.search-popup-form input:focus { border-color: #1a1a1a; }
.spc-submit-btn { padding: 0; width: 44px; height: 44px; background: #1a1a1a; color: #fff; border: none; border-radius: 10px; cursor: pointer; font-size: 15px; transition: .2s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.spc-submit-btn:hover { background: #d4af37; color: #111; }
.spc-close-btn { padding: 0; width: 44px; height: 44px; background: #f0f0f0; color: #666; border: none; border-radius: 10px; cursor: pointer; font-size: 22px; line-height: 1; transition: .2s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.spc-close-btn:hover { background: #e0e0e0; color: #111; }
.search-popup-cats, .search-popup-suggest { padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.spc-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #aaa; margin-bottom: 10px; }
.spc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.spc-cat { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; padding: 8px; border-radius: 10px; border: 1px solid #eee; transition: .2s; text-align: center; }
.spc-cat:hover { border-color: #1a1a1a; background: #fafafa; }
.spc-cat img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 7px; display: block; }
.spc-cat-placeholder { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 7px; color: #ccc; font-size: 26px; }
.spc-cat span { font-size: 11px; font-weight: 600; color: #333; line-height: 1.2; }
.spc-products { display: flex; flex-direction: column; gap: 8px; }
.spc-product { display: flex; gap: 10px; align-items: center; text-decoration: none; padding: 8px; border-radius: 9px; transition: .2s; }
.spc-product:hover { background: #f5f5f5; }
.spc-product img { width: 52px; height: 40px; object-fit: cover; border-radius: 7px; flex-shrink: 0; border: 1px solid #eee; }
.spc-product-name { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 2px; }
.spc-product-price { font-size: 12px; color: #d4af37; font-weight: 700; }
/* ================================================================
INDEX – SWIPER, KARTY PRODUKTÓW, MID-BANNER
(przeniesione z index.php)
================================================================ */
.swiper { width: 100%; padding: 10px 0 36px !important; overflow: visible; }
.swiper-slide {
transition: transform .3s, opacity .3s;
opacity: 1;
display: flex !important;
align-self: stretch !important;
}
.swiper-slide > * {
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
}
.swiper-wrapper {
align-items: stretch !important;
}
.product-card {
flex: 1 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
width: 100%;
}
.product-card .product-info {
flex: 1 !important;
display: flex;
flex-direction: column;
}
.product-card .btn-see-product { margin-top: 12px; }
.swiper-slide-active { opacity: 1; }
.swiper-wrap { position: relative; padding: 0 44px; }
@media(max-width:767px) {
.swiper-wrap {
padding: 0;
margin: 0 -15px;
}
.sw-btn { display: none; }
}
.sw-btn { position: absolute; top: 50%; transform: translateY(-60%); z-index: 10; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.95); border: 1px solid #e8dcc8; box-shadow: 0 2px 12px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s; color: #1a1a1a; font-size: 13px; }
.sw-btn:hover { background: var(--gold,#E4BB4F); border-color: var(--gold,#E4BB4F); color: #111; box-shadow: 0 4px 16px rgba(212,175,55,.35); }
.sw-btn.swiper-button-disabled { opacity: .25; pointer-events: none; }
.sw-btn-prev { left: 0; }
.sw-btn-next { right: 0; }
@media(max-width:640px) { .sw-btn { width: 30px; height: 30px; font-size: 11px; } }
.mid-banner { position: relative; width: 100%; height: 70vh; min-height: 500px; background: linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.3) 100%),url('img/banner2.png') no-repeat center center; background-size: cover; background-attachment: fixed; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; margin: 60px 0; }
.card-spacer { display: none; }
/* ── UKŁAD 2-KOLUMNOWY: nazwa+cena | featuresy ───────────────── */
.card-main-row {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 6px;
flex: 1;
}
.card-main-left {
flex: 1;
min-width: 0;
}
.card-feat-col {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
padding-top: 1px;
}
.card-feat {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 20px;
background: #f3f3f3;
color: #555;
line-height: 1;
}
.card-feat svg { flex-shrink: 0; width: 10px; height: 10px; }
.card-feat-dot {
width: 5px;
height: 5px;
border-radius: 50%;
display: block;
flex-shrink: 0;
}
.card-feat--in { background: #e8f5ee; color: var(--acc-green-d); }
.card-feat--in .card-feat-dot { background: var(--acc-green); }
.card-feat--low { background: #fef0e6; color: var(--acc-copper-d); }
.card-feat--low .card-feat-dot { background: var(--acc-copper); }
.card-feat--out { background: #fde8e8; color: var(--acc-bordo); }
.card-feat--out .card-feat-dot { background: var(--acc-bordo); }
.card-feat--order { background: #e8eef8; color: var(--acc-navy-d); }
.card-feat--order .card-feat-dot { background: var(--acc-navy); }
.card-feat--conf { background: rgba(228,187,79,.12); color: #8a6800; }
.card-feat--delivery { background: #f3f3f3; color: #666; }
.btn-see-product {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 14px;
padding: 11px 0;
background: transparent;
color: var(--mid-grey) !important;
border-radius: 8px;
text-decoration: none !important;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
transition: background .2s, color .2s, border-color .2s;
border: 1.5px solid var(--mid-grey);
width: 100%;
box-sizing: border-box;
}
.btn-see-product:hover {
background: var(--gold);
border-color: var(--gold);
color: #111 !important;
}
.empty-state { text-align: center; padding: 80px 20px; color: #ccc; }
.empty-state i { font-size: 52px; margin-bottom: 16px; display: block; }
/* ================================================================
INDEX – SEKCJA KATEGORII
================================================================ */
.home-cats-section { padding: 60px 0; }
.home-cats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-top: 28px;
}
.home-cat-tile {
display: block;
text-decoration: none;
border-radius: 14px;
overflow: hidden;
position: relative;
aspect-ratio: 3/4;
background: #e8e4de;
transition: transform .28s ease, box-shadow .28s ease;
}
.home-cat-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.13); }
.home-cat-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.home-cat-tile:hover img { transform: scale(1.06); }
.home-cat-tile-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg, #e8e4de, #d6d0c8); display: flex; align-items: center; justify-content: center; font-size: 36px; color: #bbb; }
.home-cat-tile-label {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 36px 14px 14px;
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.2;
}
.home-cat-tile-count { display: block; font-size: 10px; font-weight: 400; opacity: .75; margin-top: 2px; }
.home-cats-all { text-align: center; margin-top: 28px; }
.home-cats-all a { display: inline-flex; align-items: center; gap: 6px; color: #888; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #ddd; padding-bottom: 2px; transition: color .2s, border-color .2s; }
.home-cats-all a:hover { color: var(--gold,#E4BB4F); border-color: var(--gold,#E4BB4F); }
@media(max-width:600px) {
.home-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.home-cat-tile { aspect-ratio: 1; }
}
/* ================================================================
INDEX – SEKCJA POMIESZCZEŃ (identyczny styl jak kategorie)
================================================================ */
.rooms-home-section { padding: 60px 0; background: #fff; }
.rooms-home-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-top: 28px;
}
.room-tile {
display: block;
text-decoration: none;
border-radius: 14px;
overflow: hidden;
position: relative;
aspect-ratio: 3/4;
background: #e8e4de;
transition: transform .28s ease, box-shadow .28s ease;
}
.room-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.13); }
.room-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.room-tile:hover img { transform: scale(1.06); }
.room-tile-placeholder {
width: 100%; height: 100%;
background: linear-gradient(145deg, #e8e4de, #d6d0c8);
display: flex; align-items: center; justify-content: center;
font-size: 42px;
}
.room-tile-name {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 36px 14px 14px;
background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.2;
}
@media(max-width:600px) {
.rooms-home-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.room-tile { aspect-ratio: 1; }
}
/* ================================================================
INDEX – SEKCJA BLOGA
(przeniesione z index.php)
================================================================ */
.blog-home-section { padding: 60px 0 80px; background: #f9f9f9; }
.blog-home-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 28px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 900px) {
.blog-home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.blog-home-grid { grid-template-columns: 1fr; }
}
/* Jeśli jest tylko 1 wpis - wyśrodkuj go i ogranicz szerokość */
.blog-home-grid:has(> :only-child) {
grid-template-columns: minmax(320px, 480px);
justify-content: center;
}
.blog-home-card { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #eee; transition: .3s; display: flex; flex-direction: column; }
.blog-home-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,.08); }
.blog-home-card-img { aspect-ratio: 16/9; overflow: hidden; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #ddd; }
.blog-home-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.blog-home-card:hover .blog-home-card-img img { transform: scale(1.06); }
.blog-home-card-body { padding: 18px; flex-grow: 1; display: flex; flex-direction: column; }
.blog-home-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 6px; }
.blog-home-title { font-size: .95rem; font-weight: 800; line-height: 1.35; margin-bottom: 8px; color: #111; text-decoration: none; display: block; }
.blog-home-card:hover .blog-home-title { color: var(--gold); }
.blog-home-excerpt { font-size: 12px; color: #777; line-height: 1.6; flex-grow: 1; margin-bottom: 12px; }
.blog-home-meta { font-size: 11px; color: #bbb; margin-bottom: 10px; }
.btn-blog-read { display: inline-flex; align-items: center; gap: 5px; background: var(--mid-grey); color: #fff; padding: 8px 16px; border-radius: 7px; text-decoration: none; font-size: 11px; font-weight: 700; transition: .2s; align-self: flex-start; }
.btn-blog-read:hover { background: var(--gold); color: #111; }
.blog-home-more { text-align: center; margin-top: 28px; }
.btn-blog-all { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--mid-grey); color: var(--mid-grey); padding: 12px 28px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 13px; transition: .2s; }
.btn-blog-all:hover { background: var(--gold); border-color: var(--gold); color: #111; }
/* ================================================================
STRONA KONTAKT
(przeniesione z kontakt.php)
================================================================ */
.kontakt-page { padding: 60px 0 80px; }
.kontakt-hero { background: #1a1a1a; color: #fff; padding: 56px 0 44px; margin-bottom: 44px; text-align: center; }
.kontakt-hero h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 10px; }
.kontakt-hero h1 span { color: #d4af37; }
.kontakt-hero p { color: #888; font-size: 15px; max-width: 540px; margin: 0 auto; }
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: flex-start; }
@media(max-width:768px) { .kontakt-grid { grid-template-columns: 1fr; } }
.kcard { background: #fff; border-radius: 16px; padding: 28px; border: 1px solid #eee; }
.kcard-title { font-size: 15px; font-weight: 800; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.kcard-title i { color: #d4af37; }
.contact-info-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #f0f0f0; }
.contact-info-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ci-icon { width: 42px; height: 42px; background: #1a1a1a; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-icon i { color: #d4af37; font-size: 16px; }
.ci-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #aaa; font-weight: 700; margin-bottom: 3px; }
.ci-value { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.ci-value a { color: #1a1a1a; text-decoration: none; transition: .2s; }
.ci-value a:hover { color: #d4af37; }
.kform-group { margin-bottom: 14px; }
.kform-group label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #999; margin-bottom: 5px; }
.kform-group input, .kform-group textarea, .kform-group select { width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 9px; font-size: 14px; font-family: inherit; transition: .2s; background: #fff; box-sizing: border-box; }
.kform-group input:focus, .kform-group textarea:focus { outline: none; border-color: #1a1a1a; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.kform-group textarea { min-height: 110px; resize: vertical; }
.btn-send { width: 100%; padding: 15px; background: var(--mid-grey); color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: .3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-send:hover { background: var(--gold); color: #111; }
.form-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 10px; padding: 14px 18px; font-size: 13px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.form-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 10px; padding: 14px 18px; font-size: 13px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.why-box { background: #f9f6f0; border: 1px solid #e8e2d8; border-radius: 12px; padding: 18px 20px; margin-top: 16px; }
.why-box h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 10px; }
.why-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.why-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #555; line-height: 1.5; }
.why-list i { color: #d4af37; font-size: 11px; margin-top: 2px; flex-shrink: 0; }
#lh-chat-fab { position: fixed; bottom: 84px; right: 18px; z-index: 9990; width: 56px; height: 56px; border-radius: 50%; background: #d4af37; color: #111; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(0,0,0,.25); transition: .3s; }
@media(min-width:992px) { #lh-chat-fab { bottom: 28px; right: 28px; } }
#lh-chat-fab:hover { transform: scale(1.08); }
#lh-chat-fab i { font-size: 22px; }
#lh-chat-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #e74c3c; color: #fff; font-size: 10px; font-weight: 800; display: none; align-items: center; justify-content: center; border: 2px solid #fff; }
#lh-chat-window { position: fixed; bottom: 154px; right: 18px; z-index: 9991; width: 340px; max-height: 500px; background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.18); display: none; flex-direction: column; overflow: hidden; border: 1px solid #eee; }
@media(min-width:992px) { #lh-chat-window { bottom: 100px; right: 28px; } }
@media(max-width:400px) { #lh-chat-window { width: calc(100vw - 24px); right: 12px; } }
#lh-chat-window.active { display: flex; }
.lh-chat-header { background: #1a1a1a; color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.lh-chat-header-left { display: flex; align-items: center; gap: 10px; }
.lh-chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: #d4af37; color: #111; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.lh-chat-hname { font-weight: 700; font-size: 14px; }
.lh-chat-status { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 5px; }
.lh-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #27ae60; animation: chatPulse 2s infinite; }
@keyframes chatPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.lh-chat-close { background: none; border: none; color: #aaa; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.lh-chat-close:hover { color: #fff; }
.lh-chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f7f7; min-height: 120px; }
.lh-msg { max-width: 82%; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-break: break-word; }
.lh-msg-bot { background: #fff; color: #1a1a1a; border-radius: 4px 12px 12px 12px; align-self: flex-start; border: 1px solid #eee; }
.lh-msg-user { background: #1a1a1a; color: #fff; border-radius: 12px 4px 12px 12px; align-self: flex-end; }
.lh-msg-time { font-size: 10px; color: #bbb; margin-top: 3px; }
.lh-chat-ask-form { padding: 12px 14px; flex-shrink: 0; border-top: 1px solid #eee; background: #fff; }
.lh-ask-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #aaa; letter-spacing: .5px; margin-bottom: 8px; }
.lh-ask-input { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; font-family: inherit; margin-bottom: 8px; box-sizing: border-box; outline: none; }
.lh-ask-input:focus { border-color: #1a1a1a; }
.lh-chat-input-row { display: flex; gap: 8px; padding: 10px 14px 14px; background: #fff; flex-shrink: 0; border-top: 1px solid #eee; }
.lh-chat-input { flex: 1; padding: 10px 13px; border: 1px solid #ddd; border-radius: 10px; font-size: 13px; font-family: inherit; outline: none; transition: .2s; background: #f9f9f9; }
.lh-chat-input:focus { border-color: #1a1a1a; background: #fff; }
.lh-chat-send { width: 38px; height: 38px; border-radius: 10px; border: none; background: #1a1a1a; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .2s; }
.lh-chat-send:hover { background: #d4af37; color: #111; }
.lh-offline-bar { padding: 10px 14px; background: #fff8e1; border-top: 1px solid #ffe082; font-size: 12px; color: #856404; text-align: center; flex-shrink: 0; display: none; }
/* ================================================================
STRONA KONTO / DASHBOARD
(przeniesione z konto.php)
================================================================ */
.auth-page { padding: 40px 0 80px; background: linear-gradient(135deg,#f8f6f2 0%,#f0ede8 100%); min-height: 70vh; }
.auth-wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.auth-box { background: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 8px 48px rgba(0,0,0,.12); }
@media(max-width:700px) { .auth-box { grid-template-columns: 1fr; } }
.auth-form-side { padding: 44px 40px; }
@media(max-width:500px) { .auth-form-side { padding: 28px 22px; } }
.auth-promo-side { background: linear-gradient(160deg,#1a1a1a 0%,#0b0b0b 100%); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
@media(max-width:700px) { .auth-promo-side { order: -1; padding: 22px 24px; border-radius: 0; } .auth-promo-side h2 { font-size: 1.2rem; margin-bottom: 8px; } .auth-promo-side p { display: none; } .auth-promo-side .promo-icon-big { display: none; } .auth-promo-side .promo-quote { display: none; } .promo-list { flex-direction: row; flex-wrap: wrap; gap: 6px; } .promo-list li { font-size: 11px; background: rgba(255,255,255,.07); border-radius: 6px; padding: 5px 10px; gap: 6px; } }
.auth-promo-side::before { content: ''; position: absolute; width: 300px; height: 300px; background: radial-gradient(circle,rgba(212,175,55,.08) 0%,transparent 70%); top: -80px; right: -80px; border-radius: 50%; }
.auth-promo-side::after { content: ''; position: absolute; width: 200px; height: 200px; border: 20px solid rgba(212,175,55,.06); border-radius: 50%; bottom: -50px; right: -50px; }
.auth-promo-side h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: 14px; line-height: 1.3; }
.auth-promo-side h2 span { color: #d4af37; }
.auth-promo-side p { font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 20px; }
.promo-icon-big { font-size: 36px; margin-bottom: 16px; display: block; }
.promo-quote { background: rgba(212,175,55,.08); border-left: 3px solid #d4af37; padding: 12px 14px; font-size: 12px; color: #aaa; font-style: italic; line-height: 1.6; border-radius: 0 8px 8px 0; margin-top: 20px; }
.promo-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.promo-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #bbb; line-height: 1.5; }
.promo-list i { color: #d4af37; font-size: 13px; width: 16px; margin-top: 1px; flex-shrink: 0; }
.auth-tabs { display: flex; gap: 0; border-bottom: 2px solid #eee; margin-bottom: 28px; }
.auth-tab { flex: 1; padding: 10px 0; text-align: center; cursor: pointer; color: #aaa; font-weight: 700; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; text-decoration: none; }
.auth-tab:hover { color: #1a1a1a; }
.auth-tab.active { color: #1a1a1a; border-bottom-color: #d4af37; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 5px; }
.form-group input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; transition: .2s; font-family: inherit; }
.form-group input:focus { outline: none; border-color: #1a1a1a; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:400px) { .form-row-2 { grid-template-columns: 1fr; } }
.btn-auth { width: 100%; background: var(--mid-grey); color: #fff; border: none; padding: 15px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: .3s; margin-top: 6px; }
.btn-auth:hover { background: var(--gold); color: #111; }
.auth-error { background: #f8d7da; color: #842029; border: 1px solid #f5c6cb; border-radius: 8px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.auth-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 8px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.dashboard-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: flex-start; }
@media(max-width:768px) { .dashboard-grid { grid-template-columns: 1fr; } }
.dashboard-sidebar { background: #fff; border-radius: 16px; padding: 0; border: 1px solid #eee; overflow: hidden; position: sticky; top: 100px; }
@media(max-width:1024px) { .dashboard-sidebar { position: static; } }
.user-avatar-box { background: #1a1a1a; padding: 24px 20px; text-align: center; color: #fff; }
.user-avatar { width: 64px; height: 64px; border-radius: 50%; background: #d4af37; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #111; margin: 0 auto 12px; }
.user-avatar-name { font-size: 15px; font-weight: 700; }
.user-avatar-email { font-size: 11px; color: #888; margin-top: 3px; }
.dashboard-nav { padding: 8px 0; }
.dashboard-nav a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 13px; font-weight: 600; color: #555; text-decoration: none; transition: .15s; border-left: 3px solid transparent; }
.dashboard-nav a:hover { color: #1a1a1a; background: #fafafa; }
.dashboard-nav a.on { color: #1a1a1a; background: #fafafa; border-left-color: #d4af37; }
.dashboard-nav a i { width: 16px; text-align: center; color: #bbb; }
.dashboard-nav a.on i { color: #d4af37; }
.dash-panel { display: none; }
.dash-panel.show { display: block; }
.card { background: #fff; border-radius: 14px; padding: 22px; margin-bottom: 16px; border: 1px solid #eee; }
.card-title { font-size: 15px; font-weight: 800; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.card-title i { color: #d4af37; }
.fg { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; margin-bottom: 14px; }
.fl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #999; margin-bottom: 4px; }
.fg input { width: 100%; padding: 10px 13px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; font-family: inherit; }
.fg input:focus { outline: none; border-color: #1a1a1a; }
.btn-save { padding: 11px 22px; background: var(--mid-grey); color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: .2s; }
.btn-save:hover { background: var(--gold); color: #111; }
.order-card { border: 1px solid #eee; border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: .2s; }
.order-card:hover { border-color: #d4c4a0; }
.oc-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; cursor: pointer; background: #fafafa; transition: .2s; gap: 12px; }
.oc-head:hover { background: #f5f0e8; }
.oc-head-left { display: flex; flex-direction: column; gap: 3px; }
.oc-number { font-weight: 800; font-size: 14px; font-family: monospace; color: #1a1a1a; letter-spacing: .5px; }
.oc-date { font-size: 11px; color: #aaa; }
.oc-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oc-status { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.oc-total { font-size: 15px; font-weight: 800; color: #1a1a1a; white-space: nowrap; }
.oc-arrow { font-size: 11px; color: #aaa; transition: transform .25s; }
.oc-head.open .oc-arrow { transform: rotate(180deg); color: var(--gold,#E4BB4F); }
.order-preview { padding: 14px 16px; border-top: 1px solid #f0f0f0; background: #fff; }
.op-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.op-item:last-child { border-bottom: none; }
.op-item img { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; flex-shrink: 0; border: 1px solid #eee; }
.op-item-info { flex: 1; min-width: 0; }
.op-item-name { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.op-item-opts { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-item-price { font-size: 13px; font-weight: 700; white-space: nowrap; color: #1a1a1a; padding-left: 8px; }
.op-shipping { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; padding: 10px 0; border-top: 1px solid #f0f0f0; margin-top: 4px; }
.op-shipping i { color: var(--gold,#E4BB4F); }
.op-shipping span { margin-left: auto; font-weight: 600; }
.op-total-row { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-top: 2px solid #eee; margin-top: 4px; }
.op-address { font-size: 12px; color: #888; padding-top: 8px; border-top: 1px solid #f5f5f5; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.op-address i { color: var(--gold,#E4BB4F); flex-shrink: 0; }
.order-mini-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; gap: 8px; }
.order-mini-row:last-child { border-bottom: none; }
.order-mini-no { font-weight: 700; font-family: monospace; font-size: 13px; }
.order-mini-date { font-size: 11px; color: #aaa; }
.order-mini-total { font-weight: 800; font-size: 14px; }
.order-status-badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; }
.os-new { background: #cfe2ff; color: #0a58ca; }
.os-confirmed { background: #d1e7dd; color: #0f5132; }
.os-in_production { background: #fff3cd; color: #664d03; }
.os-shipped { background: #d0f0fd; color: #055160; }
.os-delivered { background: #d4edda; color: #155724; }
.os-cancelled { background: #f8d7da; color: #842029; }
@media(max-width:500px) { .auth-form-side { padding: 22px 18px; } .auth-tabs { gap: 0; } }
/* ================================================================
STRONA KOSZYK
(przeniesione z koszyk.php)
================================================================ */
.cart-page { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; }
.cart-page h1 { font-size: 2rem; font-weight: 800; margin-bottom: 8px; }
.cart-page .subtitle { color: #888; font-size: 14px; margin-bottom: 36px; }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: flex-start; }
@media(max-width:900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-items { display: flex; flex-direction: column; gap: 16px; }
.cart-item { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 20px; display: flex; gap: 20px; align-items: flex-start; transition: .2s; }
.cart-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.cart-item-img { width: 110px; height: 85px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f9f9f9; }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name { font-size: 16px; font-weight: 800; margin-bottom: 6px; color: #1a1a1a; }
.cart-item-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.opt-tag { background: #f4f4f4; border-radius: 6px; padding: 3px 10px; font-size: 11px; color: #555; font-weight: 600; }
.cart-item-breakdown { font-size: 11px; color: #aaa; margin-bottom: 10px; }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.item-price { font-size: 1.3rem; font-weight: 800; color: #1a1a1a; }
.item-unit { font-size: 11px; color: #aaa; }
.qty-box { display: flex; align-items: center; gap: 0; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.qty-btn { width: 34px; height: 34px; border: none; background: #f8f8f8; font-size: 18px; cursor: pointer; transition: .2s; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.qty-btn:hover { background: #1a1a1a; color: #fff; }
.qty-input { width: 44px; height: 34px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; text-align: center; font-size: 15px; font-weight: 700; outline: none; }
.btn-remove { background: none; border: none; color: #ccc; cursor: pointer; padding: 6px; border-radius: 8px; transition: .2s; font-size: 16px; }
.btn-remove:hover { color: #dc3545; background: #fff0f0; }
.summary-below-form { background: #f9f7f3; border: 1px solid #eee; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.sbf-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; margin-bottom: 8px; }
.sbf-row:last-child { margin-bottom: 0; }
.sbf-total { border-top: 2px solid #eee; padding-top: 10px; margin-top: 6px; font-size: 1.2rem; font-weight: 800; color: #1a1a1a; }
.cbb-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; margin-bottom: 6px; }
.cbb-val { font-weight: 600; color: #1a1a1a; }
.cbb-total { border-top: 2px solid #eee; padding-top: 10px; margin-top: 6px; font-size: 1.2rem; font-weight: 800; color: #1a1a1a; }
.cart-empty { text-align: center; padding: 80px 20px; }
.cart-empty i { font-size: 64px; color: #ddd; margin-bottom: 20px; }
.cart-empty h2 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.cart-empty p { color: #888; margin-bottom: 28px; }
.cart-summary { background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 28px; position: sticky; top: 110px; }
.cart-summary h2 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 12px; color: #555; }
.summary-row.total { border-top: 2px solid #eee; padding-top: 14px; margin-top: 4px; font-size: 1.5rem; font-weight: 800; color: #1a1a1a; }
.order-form { margin-top: 24px; }
.order-form h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 14px; }
.form-field { margin-bottom: 12px; }
.form-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #aaa; margin-bottom: 5px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; font-family: inherit; transition: .2s; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: #1a1a1a; }
.form-field textarea { min-height: 70px; resize: vertical; }
.btn-order { width: 100%; padding: 18px; background: var(--mid-grey); color: #fff; border: none; border-radius: 12px; font-weight: 700; text-transform: uppercase; font-size: 15px; cursor: pointer; transition: .3s; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-order:hover { background: var(--gold); }
.btn-order:disabled { background: #ccc; cursor: not-allowed; }
.btn-continue { display: inline-flex; align-items: center; gap: 8px; color: #888; font-size: 13px; text-decoration: none; margin-top: 16px; font-weight: 600; transition: .2s; }
.btn-continue:hover { color: #1a1a1a; }
.security-badges { display: flex; justify-content: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.sec-badge { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 5px; }
.sec-badge i { color: #d4af37; }
.shipping-trigger { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 2px solid #ddd; border-radius: 10px; cursor: pointer; background: #fff; transition: .2s; margin-bottom: 2px; }
.shipping-trigger:hover { border-color: #1a1a1a; background: #fafafa; }
.shipping-trigger.open { border-color: #E4BB4F; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: #eee; }
.shipping-trigger-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #555; font-weight: 500; }
.shipping-trigger-left.chosen { color: #1a1a1a; font-weight: 700; }
.shipping-trigger-arrow { font-size: 11px; color: #aaa; transition: transform .2s; }
.shipping-trigger.open .shipping-trigger-arrow { transform: rotate(180deg); color: #E4BB4F; }
.shipping-list { border: 2px solid #E4BB4F; border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; background: #fff; }
.shipping-error { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 14px; background: #fff3f3; border: 1px solid #f5c6cb; border-radius: 8px; color: #842029; font-size: 13px; font-weight: 600; }
.shipping-error i { color: #dc3545; }
.shipping-methods { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.shipping-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid #eee; border-radius: 10px; cursor: pointer; transition: .2s; background: #fff; }
.shipping-option:hover { border-color: #bbb; background: #fafafa; }
.shipping-option input[type=radio] { display: none; }
.shipping-option.selected { border-color: #1a1a1a; background: #f8f8f8; }
.shipping-option-inner { flex: 1; }
.shipping-option-name { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.shipping-option-desc { font-size: 11px; color: #888; }
.shipping-option-price { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-top: 4px; }
.shipping-check { width: 22px; height: 22px; border-radius: 50%; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; opacity: 0; transition: .2s; flex-shrink: 0; }
.shipping-option.selected .shipping-check { opacity: 1; }
.empty-cart-state { text-align: center; padding: 60px 20px 40px; max-width: 480px; margin: 0 auto; }
.empty-cart-icon { margin-bottom: 24px; }
.empty-cart-title { font-size: 1.6rem; font-weight: 800; color: #1a1a1a; margin-bottom: 10px; }
.empty-cart-sub { font-size: 14px; color: #888; line-height: 1.7; margin-bottom: 28px; }
.empty-cart-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.ecb-primary { display: inline-flex; align-items: center; gap: 8px; background: #1a1a1a; color: #fff; padding: 14px 26px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px; transition: .2s; }
.ecb-primary:hover { background: #E4BB4F; color: #111; }
.ecb-secondary { display: inline-flex; align-items: center; gap: 8px; border: 2px solid #1a1a1a; color: #1a1a1a; padding: 12px 24px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px; transition: .2s; }
.ecb-secondary:hover { background: #1a1a1a; color: #fff; }
.empty-cart-perks { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.ecp-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #888; font-weight: 600; }
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a1a1a; color: #fff; padding: 16px 28px; border-radius: 12px; font-size: 15px; font-weight: 700; opacity: 0; transition: .3s; z-index: 99999; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: #27ae60; }
.toast.ok { background: #27ae60; }
.toast.error { background: #dc3545; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.shipping-trigger.shake { animation: shake .4s ease; }
.loading-overlay { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.6); z-index: 9999; align-items: center; justify-content: center; }
.loading-overlay.show { display: flex; }
.spinner { width: 40px; height: 40px; border: 3px solid #eee; border-top-color: #1a1a1a; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ================================================================
STRONA PRODUKTU
(przeniesione z product.php)
================================================================ */
.product-page { padding: 12px 16px 60px 20px; background: #fff; max-width: 1300px; margin: 0 auto; }
@media(min-width:992px) { .product-page { display: flex; gap: 50px; padding: 40px 20px; align-items: flex-start; } .product-visuals { width: 60%; } .product-page .product-info { width: 40%; } .mobile-header { background: none !important; padding: 0 !important; margin-bottom: 15px !important; } }
.mobile-header {
padding: 20px 0 10px;
background: transparent;
border: none;
border-radius: 0;
margin-bottom: 10px;
text-align: left;
}
.cat-lbl {
color: var(--gold, #d4af37);
font-weight: 700;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1.5px;
display: block;
margin-bottom: 12px;
}
.mobile-header h1 {
font-size: 1.9rem;
font-weight: 800;
margin: 0 0 16px;
color: #111;
line-height: 1.15;
letter-spacing: -0.5px;
}
.badge-tag {
display: inline-block;
background: transparent;
color: var(--gold, #d4af37);
font-size: 10px;
font-weight: 800;
padding: 3px 10px;
border: 1.5px solid var(--gold, #d4af37);
border-radius: 20px;
text-transform: uppercase;
letter-spacing: .5px;
margin-left: 0;
vertical-align: middle;
}
.avail-tag { padding: 8px 0 22px; font-size: 13px; color: var(--acc-green, #27ae60); font-weight: 600; display: flex; align-items: center; gap: 8px; text-align: left; }
.main-img {
width: 100%;
aspect-ratio: 4/3;
max-height: 65vh;
background: #f9f9f9;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 18px;
cursor: zoom-in;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
box-sizing: border-box;
}
.main-img img { width: 100%; height: 100%; object-fit: cover; transition: .4s; display: block; }
.gallery {
display: flex;
gap: 10px;
padding: 0;
margin-bottom: 25px;
overflow-x: auto;
scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery .thumb {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
border: 2px solid transparent;
flex-shrink: 0;
transition: .2s;
opacity: .7;
}
.gallery .thumb:hover { opacity: 1; }
.gallery .thumb.active {
border-color: var(--gold, #E4BB4F);
opacity: 1;
box-shadow: 0 2px 8px rgba(228,187,79,.3);
}
.thumb { width: 100px; height: 75px; border-radius: 8px; border: 2px solid #eee; object-fit: cover; cursor: pointer; transition: .2s; flex-shrink: 0; }
.thumb.active { border-color: #1a1a1a; transform: scale(1.05); }
.product-desc-acc { border-top: 1px solid #eee; margin-top: 35px; padding-top: 5px; }
.desc-acc-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; cursor: pointer; background: #fff; transition: .2s; user-select: none; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; }
.desc-acc-header:hover { background: #fdf8ee; }
.desc-acc-header.open { background: #fdf6e3; border-bottom: 1px solid #e8dcc8; }
.desc-acc-arrow { font-size: 12px; color: #aaa; transition: transform .25s; }
.desc-acc-header.open .desc-acc-arrow { transform: rotate(180deg); color: var(--gold,#E4BB4F); }
.desc-acc-body { padding: 18px 20px; background: #fafafa; border-bottom: 1px solid #eee; }
.desc-acc-body p { line-height: 1.8; color: #444; font-size: 15px; }
.purchase-section { background: #fdfdfd; border: 1px solid #f0f0f0; padding: 28px; border-radius: 20px; margin-top: 28px; }
.price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.cur-price { font-size: 2.2rem; font-weight: 800; color: #1a1a1a; transition: .3s; }
.cur-price.bump { color: #d4af37; }
.purchase-section .old-price {
font-size: 1.25rem;
color: #999;
text-decoration: line-through;
font-weight: 500;
}
.omnibus {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #666;
margin-bottom: 10px;
padding: 7px 12px;
background: #f7f7f7;
border-radius: 7px;
border-left: 3px solid #ddd;
line-height: 1.4;
}
.omnibus::before {
content: '\2139\A0';
font-size: 13px;
color: #aaa;
flex-shrink: 0;
}
.price-extras { font-size: 12px; color: #888; min-height: 18px; }
.price-extras span { background: #f4f4f4; border-radius: 5px; padding: 2px 8px; margin-right: 4px; display: inline-block; }
.config-wrap { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
@media(min-width:992px) { .config-wrap { padding: 0; } }
.btn-config { width: 100%; padding: 18px; background: var(--mid-grey); color: #fff; border: none; border-radius: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: .3s; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-config:hover, .btn-config.open { background: var(--gold); color: #1a1a1a; }
.configurator { border: 1px solid #eee; border-radius: 16px; overflow: hidden; margin-top: 4px; display: none; }
.configurator.open { display: block; }
.acc-item { border-bottom: 1px solid #eee; }
.acc-item:last-child { border-bottom: none; }
.acc-header { padding: 16px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; transition: .2s; user-select: none; border-left: 4px solid transparent; }
.acc-header:hover { background: #fdf8ee; border-left-color: var(--gold,#E4BB4F); }
.acc-item.open > .acc-header { background: #fdf6e3; border-left: 4px solid var(--gold,#E4BB4F); }
.acc-header-text { display: flex; flex-direction: column; gap: 2px; }
.acc-header-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #1a1a1a; }
.acc-header-val { font-size: 12px; color: #d4af37; font-weight: 600; }
.acc-header-val.empty { color: #bbb; font-weight: 400; }
.acc-arrow { transition: .3s; color: #aaa; font-size: 12px; }
.acc-item.open .acc-arrow { transform: rotate(180deg); color: var(--gold,#E4BB4F); }
.acc-content { display: none; padding: 20px 22px; background: #fafafa; border-top: 1px solid #eee; }
.acc-item.open .acc-content { display: block; }
.sub-group { border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.sub-group-header { padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; user-select: none; }
.sub-group-header:hover { background: #fafafa; }
.group-price-badge { font-size: 11px; color: #888; font-weight: 500; }
.sub-group-content { display: none; padding: 14px 16px; background: #fafafa; }
.sub-group.open .sub-group-content { display: block; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(64px,1fr)); gap: 8px; }
.swatch { aspect-ratio: 1/1; border-radius: 8px; border: 2px solid #ddd; background-size: cover; background-position: center; cursor: pointer; transition: .2s; position: relative; overflow: hidden; }
.swatch:hover { border-color: #999; transform: scale(1.06); }
.swatch.chosen { border-color: #1a1a1a !important; box-shadow: 0 0 0 1px #1a1a1a; }
.swatch-tip { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 8px; text-align: center; padding: 3px 2px; opacity: 0; transition: .2s; line-height: 1.3; }
.swatch:hover .swatch-tip, .swatch.chosen .swatch-tip { opacity: 1; }
.legs-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.leg-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: .2s; }
.leg-item:hover { transform: translateY(-2px); }
.leg-swatch { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #ddd; background-size: cover; background-position: center; transition: .2s; }
.leg-item.chosen .leg-swatch { border-color: #1a1a1a; box-shadow: 0 0 0 2px #1a1a1a; }
.leg-label { font-size: 10px; text-align: center; color: #666; max-width: 64px; line-height: 1.2; }
.product-option { margin-bottom: 14px; }
.product-option > label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 6px; }
.product-option select { width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; background: #fff; }
.option-checkboxes { display: flex; flex-direction: column; gap: 8px; }
.option-checkboxes label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 400; text-transform: none; color: #1a1a1a; }
.option-checkboxes input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: #1a1a1a; }
.side-btns { display: flex; gap: 12px; }
.side-btn { flex: 1; padding: 13px; border: 2px solid #eee; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s; }
.side-btn:hover { border-color: #aaa; }
.side-btn.chosen { border-color: #1a1a1a; background: #f5f5f5; }
.btn-buy { width: 100%; padding: 20px; background: var(--mid-grey); color: #fff; border: none; border-radius: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: .3s; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-buy:hover:not(:disabled) { background: var(--gold); color: #111; }
.btn-buy:disabled { opacity: .7; cursor: not-allowed; }
.btn-buy.adding { background: #555; }
.btn-buy.added { background: #27ae60; }
.trust-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.badge-item { font-size: 12px; color: #555; display: flex; align-items: center; gap: 10px; background: #f8f8f6; border-radius: 10px; padding: 10px 12px; border: 1px solid #eee; }
.badge-item i { color: #555; font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
/* ── CZAS REALIZACJI ─────────────────────────────────────────── */
.lead-time-box { background: #f9f7f2; border: 1px solid #e8e1d0; border-radius: 14px; padding: 18px 20px; margin: 18px 0 12px; }
.lead-time-title { font-size: 12px; font-weight: 700; color: #1a1a1a; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.lead-time-title i { color: var(--gold); font-size: 14px; }
.lead-time-steps { display: flex; flex-direction: column; gap: 10px; }
.lead-time-step { display: flex; align-items: center; gap: 13px; }
.lts-icon { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid #e0d8c8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lts-icon i { color: var(--gold); font-size: 13px; }
.lts-body { display: flex; justify-content: space-between; align-items: center; flex: 1; border-bottom: 1px dashed #ede6d5; padding-bottom: 10px; }
.lead-time-step:last-child .lts-body { border-bottom: none; padding-bottom: 0; }
.lts-label { font-size: 13px; color: #666; }
.lts-val { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.lead-time-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0d8c8; font-size: 13px; color: #666; display: flex; align-items: center; gap: 8px; }
.lead-time-total i { color: var(--gold); }
.lead-time-total strong { color: #1a1a1a; }
/* ── ZAMÓWIENIE NA MIARĘ INFO ─────────────────────────────────── */
.custom-order-info { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.coi-row { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.6; }
.coi-row > i { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.coi-warn { background: #fff9f3; border: 1px solid #f5d9b0; }
.coi-warn > i { color: #c8770a; }
.coi-tip { background: #f3faf6; border: 1px solid #b8ddc8; }
.coi-tip > i { color: #2e8b57; }
.coi-row strong { color: #1a1a1a; display: block; margin-bottom: 5px; font-size: 13px; }
.coi-row span { color: #555; }
.coi-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 700; color: #2e8b57; text-decoration: none; background: #fff; border: 1px solid #b8ddc8; padding: 6px 13px; border-radius: 20px; transition: .2s; }
.coi-link:hover { background: #2e8b57; color: #fff; border-color: #2e8b57; }
.mc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50000; opacity: 0; pointer-events: none; transition: .3s; }
.mc-overlay.show { opacity: 1; pointer-events: all; }
.mc-drawer { position: fixed; right: 0; top: 0; width: 400px; height: 100vh; background: #fff; z-index: 50001; transform: translateX(100%); transition: transform .4s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -4px 0 40px rgba(0,0,0,.2); }
.mc-drawer.show { transform: translateX(0); }
@media(max-width:440px) { .mc-drawer { width: 100vw; } }
.mc-head { padding: 22px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.mc-head h3 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin: 0; }
.mc-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #aaa; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .2s; }
.mc-close:hover { background: #f0f0f0; color: #1a1a1a; }
.mc-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.mc-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.mc-item:last-child { border-bottom: none; }
.mc-item img { width: 72px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.mc-item-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #1a1a1a; }
.mc-item-opts { font-size: 11px; color: #888; margin-bottom: 5px; line-height: 1.5; }
.mc-item-price { font-size: 14px; font-weight: 800; }
.mc-foot { padding: 20px 24px; border-top: 1px solid #eee; background: #fafafa; }
.mc-total { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.mc-total-price { font-size: 1.5rem; color: #1a1a1a; }
.btn-mc-cart { display: block; width: 100%; padding: 16px; background: var(--mid-grey); color: #fff; border: none; border-radius: 12px; font-weight: 700; text-transform: uppercase; font-size: 15px; cursor: pointer; transition: .3s; text-align: center; text-decoration: none; }
.btn-mc-cart:hover { background: var(--gold); color: #111; }
.btn-mc-back { display: block; text-align: center; margin-top: 12px; color: #888; font-size: 13px; cursor: pointer; font-weight: 600; background: none; border: none; width: 100%; padding: 4px; }
.btn-mc-back:hover { color: #1a1a1a; }
.legs-grid-new { display: flex; flex-direction: column; gap: 8px; }
.leg-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 2px solid #eee; border-radius: 10px; cursor: pointer; transition: .2s; background: #fff; position: relative; }
.leg-card:hover { border-color: #bbb; background: #fafafa; }
.leg-card.chosen { border-color: var(--gold,#E4BB4F) !important; background: #fdf8ee; box-shadow: 0 0 0 1px var(--gold,#E4BB4F); }
.leg-card .leg-swatch { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 2px solid #ddd; background-size: cover; background-position: center; transition: .2s; }
.leg-card.chosen .leg-swatch { border-color: var(--gold,#E4BB4F); }
.leg-card-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.leg-card-name { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.leg-card-price { font-size: 12px; }
.leg-card-check { width: 22px; height: 22px; border-radius: 50%; background: var(--gold,#E4BB4F); color: #111; display: flex; align-items: center; justify-content: center; font-size: 11px; opacity: 0; transition: .2s; flex-shrink: 0; font-weight: 800; }
.leg-card.chosen .leg-card-check { opacity: 1; }
.side-explainer { background: #f8f6f2; border: 1px solid #e8e2d8; border-radius: 12px; padding: 16px; }
.side-diagram { display: flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 12px; }
.side-diagram-item { flex: 1; max-width: 160px; }
.side-vs { font-size: 14px; font-weight: 900; color: #ccc; flex-shrink: 0; }
.side-tip { background: #fff; border: 1px solid #e8e2d8; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #555; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.side-tip i { color: #d4af37; margin-top: 1px; flex-shrink: 0; }
/* ================================================================
STRONA KATEGORIA
(przeniesione z kategoria.php)
================================================================ */
.category-page-wrapper { padding: 0 0 80px; }
.category-header { margin-bottom: 32px; padding: 40px 0 32px; border-bottom: 1px solid #ece8e0; }
.category-header-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.category-header h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.category-header h1 em { font-style: normal; color: var(--gold,#E4BB4F); }
.category-header-meta { color: #aaa; font-size: 13px; margin-top: 6px; letter-spacing: .02em; }
.category-header-count { font-size: 13px; color: #bbb; white-space: nowrap; padding-bottom: 6px; }
@media(max-width:600px) { .category-header-inner { flex-direction: column; align-items: flex-start; } .category-header-count { display: none; } }
.category-layout { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: flex-start; }
@media(max-width:768px) { .category-layout { grid-template-columns: 1fr; } .filters-sidebar { display: none; } }
.filters-sidebar { background: #fff; border-radius: 14px; padding: 20px; border: 1px solid #eee; position: sticky; top: 100px; }
.filter-group { margin-bottom: 22px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 12px; }
.filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.filter-list a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #555; text-decoration: none; transition: .15s; border: 1px solid transparent; }
.filter-list a:hover { background: #f5f5f5; color: #111; }
.filter-list a.active { background: #111; color: #fff; border-color: #111; }
.filter-count { float: right; font-size: 11px; opacity: .6; }
.price-inputs { display: flex; gap: 8px; align-items: center; }
.price-inputs input { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid #ddd; border-radius: 7px; font-size: 12px; box-sizing: border-box; }
.price-inputs span { color: #bbb; font-size: 12px; }
.btn-filter-apply { width: 100%; padding: 9px; background: var(--mid-grey); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 10px; transition: .2s; }
.btn-filter-apply:hover { background: var(--gold); color: #111; }
.sort-select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; margin-bottom: 10px; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 24px; }
.products-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.products-count { font-size: 13px; color: #888; font-weight: 600; }
.sort-bar-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; background: #fff; }
.no-results { text-align: center; padding: 60px 20px; color: #ccc; }
.no-results i { font-size: 48px; margin-bottom: 14px; display: block; }
.mobile-filter-bar { display: none; }
@media(max-width:768px) { .mobile-filter-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; scrollbar-width: none; } .mobile-filter-btn { flex-shrink: 0; padding: 7px 14px; border: 1px solid #ddd; border-radius: 20px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; color: #555; transition: .15s; display: flex; align-items: center; gap: 5px; } .mobile-filter-btn.active, .mobile-filter-btn:hover { background: #111; color: #fff; border-color: #111; } .mfb-count { font-size: 10px; font-weight: 600; opacity: .65; } }
/* ================================================================
STRONA BLOG
(przeniesione z blog.php)
================================================================ */
.blog-page { padding: 0 0 80px; }
.blog-page-header {
text-align: center;
padding-top: 36px;
margin-bottom: 32px;
}
.blog-header-ghost {
font-size: clamp(36px, 7.5vw, 76px);
font-weight: 900;
letter-spacing: -.01em;
text-transform: uppercase;
color: rgba(228,187,79,.68);
line-height: 1;
margin-bottom: 16px;
user-select: none;
}
.blog-header-line { width: 100%; height: 2px; background: var(--gold,#E4BB4F); }
.blog-header-desc {
max-width: 500px;
margin: 0 auto;
font-size: 13px;
color: #999;
line-height: 1.85;
padding: 18px 20px 32px;
}
/* Blog: sidebar z produktem + siatka wpisów */
.blog-with-sidebar { display: grid; grid-template-columns: 1fr 3fr; gap: 36px; align-items: start; }
@media(max-width: 900px) { .blog-with-sidebar { grid-template-columns: 1fr; } }
.blog-sidebar { position: sticky; top: 100px; }
.blog-sidebar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold,#E4BB4F); margin-bottom: 12px; }
.blog-promo-card { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #eee; }
.blog-promo-card-img { aspect-ratio: 3/4; overflow: hidden; background: #f0ede8; }
.blog-promo-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.blog-promo-card:hover .blog-promo-card-img img { transform: scale(1.05); }
.blog-promo-card-body { padding: 14px 16px 18px; }
.blog-promo-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #aaa; margin-bottom: 5px; }
.blog-promo-name { font-size: 14px; font-weight: 800; color: #1a1a1a; line-height: 1.3; margin-bottom: 8px; }
.blog-promo-price { font-size: 15px; font-weight: 800; color: var(--gold,#E4BB4F); margin-bottom: 12px; }
.blog-promo-btn { display: block; text-align: center; background: #1a1a1a; color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 700; transition: .2s; }
.blog-promo-btn:hover { background: var(--gold,#E4BB4F); color: #111; }
@media(max-width: 900px) { .blog-sidebar { position: static; display: none; } }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 28px; }
.blog-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #eee; transition: .3s; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.09); }
.blog-card-img { aspect-ratio: 16/9; overflow: hidden; background: #f0f0f0; position: relative; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #ddd; }
.blog-card-body { padding: 22px; flex-grow: 1; display: flex; flex-direction: column; }
.blog-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #d4af37; margin-bottom: 8px; }
.blog-title { font-size: 1.05rem; font-weight: 800; line-height: 1.4; margin-bottom: 10px; color: #1a1a1a; }
.blog-card:hover .blog-title { color: #d4af37; }
.blog-excerpt { font-size: 13px; color: #666; line-height: 1.6; flex-grow: 1; margin-bottom: 14px; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #aaa; margin-bottom: 14px; }
.blog-meta i { margin-right: 4px; }
.btn-read { display: inline-flex; align-items: center; gap: 6px; background: var(--mid-grey); color: #fff; padding: 9px 18px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 700; transition: .2s; align-self: flex-start; }
.btn-read:hover { background: var(--gold); color: #111; }
.post-wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.post-header { margin-bottom: 32px; }
.post-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #d4af37; margin-bottom: 10px; }
.post-header h1 { font-size: 2rem; font-weight: 800; line-height: 1.25; color: #1a1a1a; margin-bottom: 14px; }
.post-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: #aaa; margin-bottom: 24px; }
.post-meta i { margin-right: 4px; }
.post-img { width: 100%; border-radius: 14px; margin-bottom: 32px; aspect-ratio: 16/9; object-fit: cover; display: block; }
.post-img-placeholder { width: 100%; aspect-ratio: 16/9; background: #f0f0f0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #ddd; margin-bottom: 32px; }
.post-content { font-size: 15px; line-height: 1.85; color: #333; }
.post-content h2 { font-size: 1.3rem; font-weight: 800; margin: 28px 0 12px; color: #1a1a1a; }
.post-content h3 { font-size: 1.1rem; font-weight: 700; margin: 20px 0 10px; color: #1a1a1a; }
.post-content p { margin-bottom: 16px; }
.post-content strong { font-weight: 700; color: #1a1a1a; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: #888; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 28px; transition: .2s; }
.back-link:hover { color: #1a1a1a; }
.blog-empty { text-align: center; padding: 80px 20px; color: #ccc; }
.blog-empty i { font-size: 52px; margin-bottom: 16px; display: block; }
/* ================================================================
STRONA WYSZUKIWARKA
(przeniesione z szukaj.php)
================================================================ */
.search-page { padding: 40px 0 80px; }
.search-header { margin-bottom: 28px; }
.search-header h1 { font-size: 1.8rem; font-weight: 800; }
.search-header p { color: #888; font-size: 14px; margin-top: 4px; }
.search-header em { color: var(--gold); font-style: normal; font-weight: 700; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 24px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.toolbar select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; }
.search-again { background: #fff; border-radius: 14px; padding: 24px; border: 1px solid #eee; margin-bottom: 24px; }
.search-again form { display: flex; gap: 10px; }
.search-again input { flex: 1; padding: 11px 16px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; }
.search-again button { padding: 11px 20px; background: #111; color: #fff; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; }
.search-again button:hover { background: var(--gold); color: #111; }
/* ══ CZAT – EKRAN WYBORU (live vs offline) ══════════════════════ */
.lh-chat-choose { padding: 22px 18px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.lh-choose-intro { text-align: center; margin-bottom: 10px; }
.lh-choose-icon { font-size: 38px; margin-bottom: 6px; }
.lh-choose-intro h3 { margin: 0 0 4px; font-size: 17px; color: #111; font-weight: 700; }
.lh-choose-intro p { margin: 0; font-size: 12px; color: #888; }
.lh-choose-btn {
display: flex; align-items: center; gap: 12px;
background: #fff; border: 1.5px solid #eee; border-radius: 12px;
padding: 14px 14px; cursor: pointer; transition: .2s; text-align: left;
font-family: inherit;
}
.lh-choose-btn:hover { border-color: #d4af37; background: #fffbf0; transform: translateX(2px); }
.lh-choose-btn-icon {
width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 15px;
}
.lh-choose-live .lh-choose-btn-icon { background: #d4edda; color: #155724; }
.lh-choose-offline .lh-choose-btn-icon { background: #e8f4fd; color: #1a5276; }
.lh-choose-btn-body { flex: 1; }
.lh-choose-btn-title { font-weight: 700; font-size: 13px; color: #111; margin-bottom: 2px; }
.lh-choose-btn-desc { font-size: 11px; color: #888; }
.lh-choose-arrow { color: #ccc; font-size: 11px; transition: .2s; }
.lh-choose-btn:hover .lh-choose-arrow { color: #d4af37; transform: translateX(3px); }
.lh-choose-footer {
text-align: center; font-size: 11px; color: #aaa; padding-top: 6px;
border-top: 1px solid #f5f5f5; margin-top: 8px;
}
/* FORMULARZ DANYCH */
.lh-chat-ask-form { padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.lh-ask-input {
width: 100%; padding: 11px 13px; border: 1.5px solid #eee;
border-radius: 10px; font-size: 13px; font-family: inherit;
outline: none; transition: .2s; box-sizing: border-box;
}
.lh-ask-input:focus { border-color: #d4af37; }
.lh-ask-btn {
background: #d4af37; color: #111; border: none; border-radius: 10px;
padding: 12px; font-weight: 700; font-size: 13px; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 4px; transition: .2s;
}
.lh-ask-btn:hover { background: #c49b20; }
.lh-ask-back {
background: none; border: none; color: #888; font-size: 11px;
padding: 8px; cursor: pointer; font-family: inherit;
}
.lh-ask-back:hover { color: #111; }
/* PRZYCISK WYŚLIJ */
.lh-attach-btn {
background: none; border: none; color: #bbb; font-size: 16px;
padding: 0 6px; cursor: pointer; flex-shrink: 0; transition: color .2s;
}
.lh-attach-btn:hover { color: #d4af37; }
.lh-chat-send-row {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 12px 10px; border-top: 1px solid #f5f5f5; background: #fff;
}
.lh-chat-send-btn {
background: #d4af37; color: #111; border: none; border-radius: 8px;
padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; gap: 6px; transition: .2s;
font-family: inherit;
}
.lh-chat-send-btn:hover { background: #c49b20; }
/* OFFLINE BAR */
.lh-offline-bar { display: none; padding: 8px 14px; background: #fff3cd; color: #856404; font-size: 11px; text-align: center; border-top: 1px solid #ffe8a1; }
/* ══ MOBILE BOTTOM NAV – CUSTOM SVG ICONS ══════════════════════════ */
.mobile-bottom-nav .mbn-icon {
height: 22px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
color: inherit;
position: relative;
}
.mobile-bottom-nav .mbn-icon svg { width: 20px; height: 20px; }
.mobile-bottom-nav .mbn-icon svg {
stroke: currentColor;
display: block;
}
/* Zalogowany w mobile – złota ikona + mała kropka */
.mobile-bottom-nav .mbn-icon--logged { color: var(--gold, #E4BB4F) !important; }
.mobile-bottom-nav .mbn-logged-dot {
position: absolute;
bottom: -1px;
right: -1px;
width: 6px;
height: 6px;
background: var(--gold, #E4BB4F);
border-radius: 50%;
border: 1.5px solid #000;
}
.mobile-bottom-nav .mbn-icon--cart .cart-badge {
position: absolute;
top: -6px;
right: -10px;
background: #e74c3c;
color: #fff;
font-size: 9px;
font-weight: 800;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #111;
}
.mobile-bottom-nav .action-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
flex: 1;
text-decoration: none !important;
color: #fff;
cursor: pointer;
background: none;
border: none;
padding: 4px 0;
}
.mobile-bottom-nav .action-item span {
color: #fff !important;
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .4px;
line-height: 1.2;
transition: color .2s;
}
.mobile-bottom-nav .action-item .mbn-icon {
color: #fff;
}
/* AKTYWNY item (ta strona na której jesteś) - złoty kolor */
.mobile-bottom-nav .action-item.is-active span,
.mobile-bottom-nav .action-item.is-active .mbn-icon {
color: var(--gold, #E4BB4F) !important;
}
/* HOVER/TAP - delikatne rozjaśnienie */
.mobile-bottom-nav .action-item:active span,
.mobile-bottom-nav .action-item:active .mbn-icon {
color: var(--gold, #E4BB4F) !important;
}
.mobile-bottom-nav .mbn-logged {
color: #fff !important;
font-weight: 600;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
/* ══ DESKTOP – CHIP Z IMIENIEM ZALOGOWANEGO UŻYTKOWNIKA ══════════ */
.hdr-user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(228,187,79,.15), rgba(228,187,79,.05));
border: 1px solid rgba(228,187,79,.35);
padding: 6px 12px 6px 6px;
border-radius: 999px;
transition: .2s;
}
.hdr-user-chip:hover {
background: linear-gradient(135deg, rgba(228,187,79,.25), rgba(228,187,79,.1));
border-color: rgba(228,187,79,.55);
transform: translateY(-1px);
}
.hdr-user-chip-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gold, #E4BB4F);
color: #111;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
flex-shrink: 0;
font-family: 'Poppins', sans-serif;
}
.hdr-user-chip-name {
color: var(--gold, #E4BB4F);
font-weight: 600;
font-size: 13px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ══ AKCENTY KOLORYSTYCZNE – badge, etykiety, stany ═════════════ */
/* Użyj tych klas na badge, labelach, tagach itp.
Przykład: Wyprzedaż */
.tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
}
.tag-gold { background: #fdf3d0; color: #8b6914; }
.tag-silver { background: #f3f4f6; color: var(--acc-silver-d); }
.tag-green { background: #d8f0e0; color: var(--acc-green-d); }
.tag-bordo { background: #ffe5e5; color: var(--acc-bordo); }
.tag-navy { background: #e0edff; color: var(--acc-navy-d); }
.tag-copper { background: #fce6d4; color: var(--acc-copper-d); }
/* Na zdjęciu produktu – pełnokolorowy badge */
.product-badge-bordo { background: var(--acc-bordo); color: #fff; }
.product-badge-green { background: var(--acc-green); color: #fff; }
.product-badge-navy { background: var(--acc-navy); color: #fff; }
.product-badge-copper { background: var(--acc-copper); color: #fff; }
/* Kontener strony - nigdy nie większy niż ekran */
.container {
max-width: 100%;
box-sizing: border-box;
}
/* Swiper – na mobile schowaj wystające slajdy */
@media (max-width: 991px) {
.swiper-wrap { overflow: hidden; }
}
/* Obrazy nigdy nie większe niż ich kontener */
img { max-width: 100%; height: auto; }
/* Sekcje z tłem tła */
.hero-banner, .mid-banner, .blog-hero, .kontakt-hero {
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
/* Hero content - zabezpiecz przed wyjazdem tekstów/przycisków */
.hero-content, .hero-text {
max-width: 100%;
box-sizing: border-box;
}
/* Przyciski hero - ograniczone do szerokości kontenera */
.hero-btns {
max-width: 100%;
flex-wrap: wrap;
}
.hero-btns a {
max-width: 100%;
box-sizing: border-box;
}
/* ══════ ANTI-OVERFLOW – czysty, bez psucia swiperów ══════ */
html {
overflow-x: hidden !important;
max-width: 100vw !important;
}
body {
overflow-x: clip !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
/* Sekcje z zawartością swiperów - tu obcinamy overflow zamiast na samym swiperze */
.bestsellers,
.news,
.collection-section,
section.products-section,
.blog-section {
overflow-x: hidden;
max-width: 100vw;
}
/* Dla pewności - container też nie szerszy niż viewport */
.container {
max-width: 100%;
box-sizing: border-box;
}
/* Swipery na mobile - nadal widoczne żeby pokazać peek kolejnego slajdu,
ale rodzic obetnie overflow */
@media (max-width: 991px) {
section { overflow-x: hidden; }
}
/* ══════ PRODUCT PAGE - twarde obcięcie wszystkiego co wystaje ══════ */
.product-page {
overflow-x: hidden !important;
max-width: 100vw !important;
box-sizing: border-box;
}
.product-page * {
max-width: 100% !important;
box-sizing: border-box;
}
/* Swipery w tej stronie - przycinaj slajdy żeby nie rozciągały strony */
.product-page .swiper,
.product-page .swiper-container,
.product-page .swiper-wrapper {
overflow: hidden !important;
max-width: 100% !important;
}
.product-page .swiper-slide {
max-width: 100vw;
}
/* ══ Desktop - sekcje produktów nie szersze niż 1300px ══ */
@media (min-width: 1024px) {
.bestsellers .container,
.news .container,
.collection-section .container {
max-width: 1300px;
}
}
/* ── Sekcje produktów - tło i akcent (działa bez dedykowanej klasy) ── */
.swiper-wrap {
position: relative;
}
/* Złoty akcent nad każdą sekcją produktów */
section:has(> .container > .swiper-wrap)::before,
section:has(> .container > .section-header) {
position: relative;
}
/* Sekcje zawierające swiper - delikatne kremowe tło */
section:has(.bestsellerSwiper),
section:has(.newsSwiper) {
background: linear-gradient(180deg, #fafaf8 0%, #f5f3ee 100%);
padding: 50px 0 30px;
position: relative;
}
section:has(.bestsellerSwiper)::before,
section:has(.newsSwiper)::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(228,187,79,.5) 50%, transparent 100%);
}
/* Większy odstęp pod nagłówkiem sekcji */
.section-header {
margin-bottom: 20px;
text-align: center;
}
.section-header .section-title {
margin-bottom: 8px;
}
/* ══ BREADCRUMBS ═══════════════════════════════════════════════════════ */
.breadcrumb-wrap { background: #f8f7f4; border-bottom: 1px solid #eeece8; }
.breadcrumb { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 12px; color: #bbb; flex-wrap: wrap; max-width: 1300px; margin: 0 auto; }
.breadcrumb a { color: #888; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .bc-sep { color: #ccc; }
.breadcrumb .bc-current { color: #333; font-weight: 600; }
/* ══ DIMENSIONS ════════════════════════════════════════════════════════ */
.dimensions-row { display: flex; gap: 8px; margin: 14px 0 6px; flex-wrap: nowrap; }
.dim-item { background: #f7f6f3; border: 1px solid #e8e5df; border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; min-width: 62px; gap: 2px; }
.dim-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #999; font-weight: 600; }
.dim-val { font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
@media(max-width: 480px) {
.dimensions-row { gap: 6px; justify-content: center; }
.dim-item { padding: 7px 11px; min-width: 0; border-radius: 8px; }
.dim-label { font-size: 9px; letter-spacing: .3px; }
.dim-val { font-size: 13px; }
}
.dim-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #aaa; font-weight: 600; margin-bottom: 6px; margin-top: 16px; }
/* ══ WISHLIST BUTTON ═══════════════════════════════════════════════════ */
.btn-wishlist { display: flex; align-items: center; gap: 6px; background: transparent; border: 2px solid #e0e0e0; border-radius: 50px; padding: 7px 16px 7px 12px; font-size: 12px; font-weight: 600; color: #777; cursor: pointer; transition: all .25s; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.btn-wishlist:hover { border-color: var(--gold, #d4af37); color: #1a1a1a; }
.btn-wishlist.is-liked { background: rgba(228,187,79,.08); border-color: var(--gold); color: var(--gold); }
.btn-wishlist.is-liked svg { fill: var(--gold); stroke: var(--gold); }
.btn-wishlist svg { flex-shrink: 0; }
.product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.product-title-row h1 { flex: 1; min-width: 0; }
/* ══ SPECS SECTION (strona produktu) ══════════════════════════════════ */
.specs-section { border: 1px solid #eeebe4; border-radius: 12px; padding: 14px 16px; margin: 16px 0; background: #faf9f6; }
.specs-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: #aaa; margin-bottom: 10px; }
.specs-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.specs-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eee; }
.specs-row:last-child { border-bottom: none; }
.specs-row dt { color: #888; font-weight: 500; flex-shrink: 0; }
.specs-row dd { color: #333; font-weight: 600; text-align: right; margin: 0; }
.spec-yes { color: var(--acc-green, #27ae60); font-weight: 700; display: flex; align-items: center; gap: 4px; }
/* ══ DELIVERY INFO BOX (strona produktu) ══════════════════════════════ */
.delivery-info-box { border: 1px solid #eeebe4; border-radius: 12px; overflow: hidden; margin: 16px 0; }
.dib-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; background: #faf9f6; font-size: 13px; font-weight: 600; color: #555; transition: background .2s; user-select: none; }
.dib-toggle:hover { background: #f3f0e8; }
.dib-toggle > i:first-child { color: var(--gold); }
.dib-toggle span { flex: 1; }
.dib-arrow { font-size: 11px; color: #aaa; transition: transform .25s; }
.delivery-info-box.open .dib-arrow { transform: rotate(180deg); }
.dib-content { display: none; padding: 14px 16px; border-top: 1px solid #eee; }
.delivery-info-box.open .dib-content { display: block; }
.dib-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dib-list li { font-size: 12.5px; color: #555; line-height: 1.6; padding-left: 14px; position: relative; }
.dib-list li::before { content: '–'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.dib-list li.dib-warn { color: #7a4800; background: #fff8ec; border-radius: 8px; padding: 8px 12px 8px 28px; }
.dib-list li.dib-warn::before { left: 10px; }
.dib-list li.dib-warn i { margin-right: 4px; color: #e67e22; }
/* ══ WISHLIST HEADER ICON ══════════════════════════════════════════════ */
.hdr-wishlist-badge { position: absolute; top: -4px; right: -4px; background: #e74c3c; color: #fff; font-size: 9px; font-weight: 700; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; line-height: 1; }
/* ══ RELATED PRODUCTS SECTION ══════════════════════════════════════════ */
.related-section { background: #fafaf8; border-top: 1px solid #eee; padding: 50px 0 40px; }
.related-section .swiper-wrap { padding: 0 48px; margin-top: 0; position: relative; }
@media(max-width:767px) { .related-section .swiper-wrap { padding: 0; margin: 0 -15px; } }
/* ══ WISHLIST PAGE ══════════════════════════════════════════════════════ */
.wishlist-page { max-width: 1300px; margin: 0 auto; padding: 30px 20px 80px; }
.wishlist-page h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; }
.wishlist-page .wl-meta { font-size: 13px; color: #999; margin-bottom: 30px; }
.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.wishlist-empty { text-align: center; padding: 80px 20px; color: #aaa; }
.wishlist-empty i { font-size: 48px; display: block; margin-bottom: 16px; color: #ddd; }
.wishlist-empty p { font-size: 15px; margin-bottom: 20px; }
.btn-wl-shop { display: inline-block; background: var(--gold); color: #1a1a1a; padding: 12px 28px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 14px; transition: opacity .2s; }
.btn-wl-shop:hover { opacity: .85; }
/* ══ MOBILE WISHLIST IN NAV ════════════════════════════════════════════ */
.mbn-icon--wishlist svg { transition: fill .2s, stroke .2s; }
.action-item.wishlist-active .mbn-icon--wishlist svg { fill: #e74c3c; stroke: #e74c3c; }
/* ══ QUICK VIEW BUTTON ON CARD ═════════════════════════════════════════ */
.product-image { position: relative; overflow: hidden; }
.qv-btn { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background: rgba(26,26,26,.88); color: #fff; border: none; border-radius: 50px; padding: 8px 18px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: bottom .25s ease, opacity .25s; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.product-card:hover .qv-btn { bottom: 12px; }
/* ══ QUICK VIEW MODAL ═══════════════════════════════════════════════════ */
.qv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60000; opacity: 0; pointer-events: none; transition: opacity .3s; }
.qv-overlay.show { opacity: 1; pointer-events: all; }
.qv-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-46%); width: min(900px, 96vw); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 20px; z-index: 60001; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.qv-modal.show { opacity: 1; pointer-events: all; transform: translate(-50%,-50%); }
.qv-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: #aaa; z-index: 1; line-height: 1; transition: color .2s; }
.qv-close:hover { color: #333; }
.qv-body { display: grid; grid-template-columns: 1fr; }
@media(min-width:640px) { .qv-body { grid-template-columns: 1fr 1fr; } }
.qv-loading { padding: 60px; text-align: center; color: #ccc; font-size: 28px; }
.qv-img-col { padding: 24px 16px 16px 24px; }
.qv-main-img { border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: #f5f4f0; }
.qv-main-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.qv-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.qv-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 2px solid transparent; cursor: pointer; transition: border-color .2s; }
.qv-thumb.active, .qv-thumb:hover { border-color: var(--gold); }
.qv-info-col { padding: 24px 24px 24px 16px; display: flex; flex-direction: column; gap: 10px; }
.qv-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 700; }
.qv-name { font-size: 1.3rem; font-weight: 800; line-height: 1.3; margin: 0; }
.qv-stars i { color: #d4af37; font-size: 13px; }
.qv-stars span { font-size: 12px; color: #999; margin-left: 4px; }
.qv-price-row { display: flex; align-items: baseline; gap: 10px; }
.qv-price { font-size: 1.8rem; font-weight: 800; color: #1a1a1a; }
.qv-old-price { font-size: 1.1rem; color: #bbb; text-decoration: line-through; }
.qv-avail { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.qv-dims { font-size: 12px; color: #888; background: #f7f6f3; border-radius: 8px; padding: 6px 12px; display: inline-block; }
.qv-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.qv-btn-full { display: flex; align-items: center; justify-content: center; gap: 8px; background: #1a1a1a; color: #fff; border-radius: 50px; padding: 14px 24px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s; border: none; cursor: pointer; font-family: inherit; width: 100%; }
.qv-btn-full:hover:not(:disabled) { background: var(--gold); color: #1a1a1a; }
.qv-btn-full:disabled { cursor: not-allowed; }
.qv-btn-details { text-align: center; font-size: 13px; color: #888; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.qv-btn-details:hover { color: var(--gold); }
/* ══ REVIEWS ═══════════════════════════════════════════════════════════ */
.reviews-section { padding: 50px 0; background: #fafaf8; border-top: 1px solid #eee; }
.reviews-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media(min-width:900px) { .reviews-layout { grid-template-columns: 320px 1fr; } }
.rating-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rating-big { font-size: 3.5rem; font-weight: 800; color: #1a1a1a; line-height: 1; }
.stars-row i { color: #d4af37; font-size: 16px; }
.rating-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.rating-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; }
.rbar-track { flex: 1; height: 6px; background: #e8e3d8; border-radius: 50px; }
.rbar-fill { height: 100%; background: linear-gradient(90deg, #d4af37, #e8cc6a); border-radius: 50px; }
.no-reviews-yet { text-align: center; padding: 24px 0; color: #bbb; }
.no-reviews-yet i { font-size: 36px; display: block; margin-bottom: 10px; }
.no-reviews-yet p { font-size: 13px; line-height: 1.6; }
.review-form-wrap h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.review-form { display: flex; flex-direction: column; gap: 10px; }
.review-form input[type="text"], .review-form textarea { border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-family: inherit; background: #fff; transition: border-color .2s; resize: vertical; }
.review-form input[type="text"]:focus, .review-form textarea:focus { outline: none; border-color: #d4af37; }
.star-picker { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; }
.star-picker i { font-size: 20px; color: #d4af37; cursor: pointer; transition: transform .15s; }
.star-picker i:hover { transform: scale(1.2); }
.btn-submit-review { background: var(--gold,#d4af37); color: #1a1a1a; border: none; border-radius: 50px; padding: 12px 24px; font-weight: 700; font-size: 13px; cursor: pointer; transition: opacity .2s; display: flex; align-items: center; gap: 8px; }
.btn-submit-review:hover { opacity: .85; }
.review-sent { background: #e8f8f0; color: #27ae60; padding: 14px 16px; border-radius: 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.review-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gold,#d4af37); color: #1a1a1a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.review-author { font-weight: 700; font-size: 14px; }
.review-stars i { color: #d4af37; font-size: 12px; }
.review-date { margin-left: auto; font-size: 11px; color: #bbb; }
.review-body { font-size: 13px; color: #444; line-height: 1.7; margin: 0; }
/* ══ RECENTLY VIEWED ═══════════════════════════════════════════════════ */
.recently-section { padding: 40px 0; border-top: 1px solid #eee; background: #fff; }
.recently-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 4px; }
@media(min-width:600px) { .recently-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width:900px) { .recently-grid { grid-template-columns: repeat(4, 1fr); } }
@media(min-width:1200px) { .recently-grid { grid-template-columns: repeat(6, 1fr); } }
/* ══ FREE DELIVERY PROGRESS BAR ═══════════════════════════════════════ */
.free-ship-bar { background: #f8f6f1; border: 1px solid #ede9df; border-radius: 14px; padding: 14px 18px; margin-bottom: 24px; }
.fsb-text { font-size: 13px; color: #444; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.fsb-text i { color: #d4af37; }
.fsb-done { color: #27ae60; }
.fsb-done i { color: #27ae60; }
.fsb-track { background: #e8e3d8; border-radius: 50px; height: 8px; position: relative; overflow: visible; }
.fsb-fill { background: linear-gradient(90deg, #d4af37, #e8cc6a); border-radius: 50px; height: 100%; transition: width .6s ease; }
.fsb-target { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); color: #d4af37; font-size: 13px; }
/* ══ SITE FOOTER ════════════════════════════════════════════════════════ */
.site-footer { background: #111; color: rgba(255,255,255,.7); margin-top: 0; }
.footer-top { padding: 60px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media(min-width:640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; } }
.footer-logo { height: 36px; opacity: .9; margin-bottom: 16px; display: block; }
.footer-about { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); transition: background .2s, color .2s; text-decoration: none; }
.footer-social a:hover { background: var(--gold); color: #1a1a1a; }
.footer-heading { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--gold, #d4af37); margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: 13px; transition: color .2s; }
.footer-links a:hover { color: #fff; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5; }
.footer-contact i { color: var(--gold, #d4af37); width: 14px; flex-shrink: 0; margin-top: 2px; font-size: 12px; }
.footer-contact a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
.footer-contact a:hover { color: #fff; }
.footer-trust { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.footer-trust span { font-size: 11px; color: rgba(255,255,255,.4); display: flex; align-items: center; gap: 5px; }
.footer-trust i { color: var(--gold, #d4af37); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0; }
@media(max-width:600px) { .footer-bottom { padding-bottom: 76px; } }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: rgba(255,255,255,.35); }
.footer-payments { display: flex; align-items: center; gap: 8px; }
/* ══ LEGAL PAGES ════════════════════════════════════════════════════════ */
.legal-page { max-width: 860px; margin: 0 auto; padding: 40px 20px 80px; }
.legal-page h1 { font-size: 2rem; font-weight: 800; margin-bottom: 30px; }
.legal-content { font-size: 14px; line-height: 1.85; color: #444; }
.legal-content h2 { font-size: 1.1rem; font-weight: 700; margin: 28px 0 10px; color: #1a1a1a; }
.legal-content h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; color: #1a1a1a; }
.legal-content p { margin-bottom: 12px; }
.legal-content ul, .legal-content ol { padding-left: 20px; margin-bottom: 14px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--gold); }
.legal-content strong { color: #1a1a1a; }
/* ══ NOTIFY STOCK ══════════════════════════════════════════════════════ */
.notify-stock-wrap { background: #fff8e6; border: 1px solid #f0d98a; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.notify-stock-label { font-size: 13px; color: #7a6010; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.notify-stock-label i { color: #d4af37; }
.notify-stock-form { display: flex; gap: 8px; }
.notify-stock-form input { flex: 1; border: 1.5px solid #e0d890; border-radius: 50px; padding: 9px 16px; font-size: 13px; background: #fff; font-family: inherit; }
.notify-stock-form button { background: #1a1a1a; color: #fff; border: none; border-radius: 50px; padding: 9px 18px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.notify-done { background: #e8f8f0; color: #27ae60; border-radius: 10px; padding: 12px 16px; font-size: 13px; align-items: center; gap: 8px; }
/* ══ NEWSLETTER POPUP ══════════════════════════════════════════════════ */
.nl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 70000; opacity: 0; pointer-events: none; transition: opacity .4s; }
.nl-overlay.show { opacity: 1; pointer-events: all; }
.nl-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-46%); width: min(480px, 94vw); background: #1a1a1a; border-radius: 22px; z-index: 70001; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45); }
.nl-popup.show { opacity: 1; pointer-events: all; transform: translate(-50%,-50%); }
.nl-close { position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 18px; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.nl-close:hover { background: rgba(255,255,255,.25); }
.nl-left { padding: 40px 36px; color: #fff; }
.nl-icon { font-size: 36px; margin-bottom: 12px; }
.nl-left h2 { font-size: 1.7rem; font-weight: 800; line-height: 1.25; margin-bottom: 12px; }
.nl-left h2 span { color: var(--gold, #d4af37); }
.nl-left p { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.6; margin-bottom: 20px; }
.nl-form { display: flex; flex-direction: column; gap: 10px; }
.nl-form input { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2); border-radius: 50px; padding: 12px 20px; color: #fff; font-size: 14px; font-family: inherit; }
.nl-form input::placeholder { color: rgba(255,255,255,.45); }
.nl-form input:focus { outline: none; border-color: var(--gold); }
.nl-form button { background: var(--gold, #d4af37); color: #1a1a1a; border: none; border-radius: 50px; padding: 13px 24px; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .2s; font-family: inherit; }
.nl-form button:hover { opacity: .88; }
.nl-done { background: rgba(39,174,96,.15); color: #4eca80; border-radius: 10px; padding: 14px 16px; font-size: 13px; align-items: center; gap: 8px; margin-top: 4px; }
.nl-note { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 12px; margin-bottom: 0; }
/* ══ ANNOUNCEMENT BAR ══════════════════════════════════════════════════ */
.ann-bar { background: #1a1a1a; color: rgba(255,255,255,.85); font-size: 12px; display: flex; align-items: center; padding: 0 40px 0 0; position: relative; overflow: hidden; transition: max-height .4s ease, opacity .3s; }
.ann-bar.hidden { max-height: 0 !important; opacity: 0; pointer-events: none; }
.ann-cols { display: flex; flex: 1; }
.ann-col { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; font-size: 12px; font-weight: 600; color: #fff; border-right: 1px solid rgba(255,255,255,.08); }
.ann-col:last-child { border-right: none; }
.ann-col--center { border-left: 1px solid rgba(255,255,255,.08); }
.ann-col i { color: var(--gold, #d4af37); font-size: 11px; flex-shrink: 0; }
.ann-icon { color: var(--gold, #d4af37); font-size: 9px; flex-shrink: 0; opacity: .8; }
.ann-bar-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.4); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 6px; transition: color .2s; }
.ann-bar-close:hover { color: #fff; }
@media(max-width:600px) {
.ann-col:not(.ann-col--center) { display: none; border: none !important; }
.ann-col--center { border: none; }
.ann-bar.ann-carousel .ann-col { display: none !important; }
.ann-bar.ann-carousel .ann-col.ann-active { display: flex !important; }
.ann-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10020; }
.ann-bar.hidden { display: none; }
.site-header { top: 36px !important; }
.ann-bar.hidden ~ .site-header { top: 0 !important; }
}
/* ══ COUPON INPUT ══════════════════════════════════════════════════════ */
.coupon-row { margin: 4px 0 8px; }
.coupon-input-wrap { display: flex; gap: 8px; }
.coupon-input-wrap input { flex: 1; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 9px 14px; font-size: 13px; font-family: inherit; letter-spacing: .04em; transition: border-color .2s; }
.coupon-input-wrap input:focus { outline: none; border-color: var(--gold); }
.coupon-input-wrap button { background: #1a1a1a; color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .2s; }
.coupon-input-wrap button:hover { background: #333; }
.coupon-msg { font-size: 12px; margin-top: 6px; padding: 6px 10px; border-radius: 6px; }
.coupon-ok { background: #e8f8f0; color: #27ae60; }
.coupon-err { background: #fff0f0; color: #dc3545; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; background: #e8f8f0; border: 1px solid #b0e8cc; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #1a7a46; font-weight: 600; }
.coupon-applied button { background: none; border: none; cursor: pointer; color: #888; font-size: 14px; padding: 2px 4px; transition: color .2s; }
.coupon-applied button:hover { color: #dc3545; }
.discount-row span:last-child { color: #27ae60 !important; font-weight: 700; }
/* ══ STICKY BUY BAR (mobile) ══════════════════════════════════════════ */
.sticky-buy-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1.5px solid #e8e5df; z-index: 8000; transform: translateY(100%); transition: transform .35s cubic-bezier(.22,1,.36,1); box-shadow: 0 -4px 20px rgba(0,0,0,.12); padding-bottom: env(safe-area-inset-bottom, 0); }
.sticky-buy-bar.visible { transform: translateY(0); }
.sticky-buy-inner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; max-width: 600px; margin: 0 auto; }
.sticky-buy-info { flex: 1; min-width: 0; }
.sticky-buy-name { display: block; font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy-price { display: block; font-size: 17px; font-weight: 800; color: #1a1a1a; }
.sticky-buy-btn { background: var(--gold, #d4af37); color: #1a1a1a; border: none; border-radius: 50px; padding: 12px 22px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; display: flex; align-items: center; gap: 8px; flex-shrink: 0; transition: opacity .2s; }
.sticky-buy-btn:hover { opacity: .85; }
@media(max-width: 767px) { .sticky-buy-bar { display: block; } }
/* ══ COOKIE / RODO BANNER ══════════════════════════════════════════════ */
.cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1a1a; color: rgba(255,255,255,.88); z-index: 99000; transform: translateY(100%); transition: transform .45s cubic-bezier(.22,1,.36,1); box-shadow: 0 -4px 32px rgba(0,0,0,.35); }
.cookie-bar.visible { transform: translateY(0); }
.cookie-bar-inner { max-width: 1300px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cookie-bar-text { flex: 1; min-width: 240px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.75); }
.cookie-bar-text a { color: var(--gold, #d4af37); text-decoration: underline; }
.cookie-bar-text a:hover { color: #fff; }
.cookie-bar-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn-accept { background: var(--gold, #d4af37); color: #1a1a1a; border: none; border-radius: 50px; padding: 10px 24px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity .2s; }
.cookie-btn-accept:hover { opacity: .85; }
.cookie-btn-more { background: transparent; color: rgba(255,255,255,.6); border: 1.5px solid rgba(255,255,255,.2); border-radius: 50px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color .2s, color .2s; }
.cookie-btn-more:hover { border-color: rgba(255,255,255,.5); color: #fff; }
@media(max-width:560px) { .cookie-bar-inner { padding: 14px 16px; gap: 12px; } .cookie-bar-actions { width: 100%; } .cookie-btn-accept, .cookie-btn-more { flex: 1; text-align: center; } }
/* ══ FAQ NA STRONIE PRODUKTU ═══════════════════════════════════════════ */
.prod-faq { margin: 16px 0; }
.prod-faq-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: #aaa; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.prod-faq-item { border: 1px solid #eeebe4; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.prod-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: #333; background: #faf9f6; transition: background .18s; user-select: none; }
.prod-faq-q:hover { background: #f3f0e8; }
.prod-faq-arrow { font-size: 10px; color: #aaa; flex-shrink: 0; transition: transform .22s; }
.prod-faq-item.open .prod-faq-arrow { transform: rotate(180deg); }
.prod-faq-a { display: none; padding: 12px 14px; font-size: 13px; color: #555; line-height: 1.7; border-top: 1px solid #eee; background: #fff; }
.prod-faq-item.open .prod-faq-a { display: block; }
/* ══ SEKCJA RECENZJI (strona produktu) ════════════════════════════════ */
.reviews-section { border-top: 1px solid #eee; padding: 32px 0 0; margin-top: 32px; }
.reviews-wrap { max-width: none; margin: 0; padding: 0; }
.reviews-heading { text-align: left; margin-bottom: 24px; }
.reviews-heading h2 { font-size: 1.3rem; font-weight: 800; color: var(--dark-grey); margin-bottom: 4px; }
.reviews-heading p { color: #888; font-size: 13px; }
.reviews-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media(min-width:900px) { .reviews-layout { grid-template-columns: 180px 1fr; gap: 28px; } }
@media(max-width:700px) { .reviews-layout { grid-template-columns: 1fr; gap: 20px; } }
/* Summary left */
.rev-summary { background: #fff; border-radius: 16px; padding: 20px 16px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,.06); position: static; }
.rev-avg-num { font-size: 3.2rem; font-weight: 900; color: var(--dark-grey); line-height: 1; }
.rev-avg-stars { display: flex; justify-content: center; gap: 2px; margin: 8px 0 4px; }
.rev-total-label { font-size: 12px; color: #aaa; margin-bottom: 18px; }
.rev-bars { display: flex; flex-direction: column; gap: 5px; }
.rev-bar-row { display: flex; align-items: center; gap: 6px; }
.rev-bar-label { font-size: 11px; color: #888; display: flex; align-items: center; gap: 2px; width: 22px; flex-shrink: 0; }
.rev-bar-track { flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.rev-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width .5s; }
.rev-bar-count { font-size: 11px; color: #aaa; width: 16px; text-align: right; }
.rev-empty-icon { margin-bottom: 12px; }
.rev-empty-text { font-size: 12px; color: #aaa; line-height: 1.6; }
/* Reviews list */
.rev-main { display: flex; flex-direction: column; gap: 20px; }
.rev-list { display: flex; flex-direction: column; gap: 14px; }
.rev-card { background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
.rev-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rev-card-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #1a1a1a; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rev-card-meta { flex: 1; }
.rev-card-author { font-size: 13px; font-weight: 700; color: #333; }
.rev-card-date { font-size: 11px; color: #bbb; }
.rev-card-stars { display: flex; gap: 2px; margin-left: auto; }
.rev-card-body { font-size: 13.5px; color: #444; line-height: 1.7; margin: 0; }
/* Review form */
.rev-form-wrap { background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
.rev-form-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.rev-form-title i { color: var(--gold); }
.rev-form-row { margin-bottom: 14px; }
.rev-input { width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 9px; font-size: 14px; font-family: inherit; transition: border-color .2s; box-sizing: border-box; }
.rev-input:focus { outline: none; border-color: var(--gold); }
.rev-textarea { width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 9px; font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box; transition: border-color .2s; }
.rev-textarea:focus { outline: none; border-color: var(--gold); }
/* Star picker (CSS-only, RTL trick) */
.rev-stars-pick { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; direction: rtl; justify-content: flex-end; }
.rev-stars-label { direction: ltr; font-size: 13px; font-weight: 600; color: #555; margin-right: 4px; order: 10; }
.rev-stars-pick input[type="radio"] { display: none; }
.rev-stars-pick label { cursor: pointer; line-height: 1; }
.rev-stars-pick label svg { fill: #e0e0e0; transition: fill .15s; }
.rev-stars-pick input:checked ~ label svg,
.rev-stars-pick label:hover svg,
.rev-stars-pick label:hover ~ label svg { fill: var(--gold); }
.rev-submit { background: var(--gold); color: #1a1a1a; border: none; border-radius: 10px; padding: 13px 28px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .2s; display: flex; align-items: center; gap: 8px; }
.rev-submit:hover { opacity: .85; }
.rev-disclaimer { font-size: 11px; color: #bbb; margin-top: 10px; }
.rev-sent { background: #e8f5e9; color: #2e7d32; border-radius: 10px; padding: 14px 18px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.rev-sent i { font-size: 18px; }
/* ══ STRONA FAQ ════════════════════════════════════════════════════════ */
.faq-page { max-width: 860px; margin: 0 auto; padding: 30px 24px 80px; }
.faq-hero { text-align: center; padding: 40px 20px 36px; }
.faq-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
.faq-hero p { color: #777; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.faq-contact-link { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: #1a1a1a; font-weight: 700; font-size: 13px; padding: 11px 24px; border-radius: 50px; text-decoration: none; transition: opacity .2s; }
.faq-contact-link:hover { opacity: .85; }
.faq-empty { text-align: center; padding: 60px 20px; color: #aaa; }
.faq-empty i { font-size: 40px; display: block; margin-bottom: 14px; color: #ddd; }
.faq-cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; justify-content: center; }
.faq-cat-pill { display: inline-flex; align-items: center; gap: 7px; background: #f4f2ee; color: #555; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 50px; text-decoration: none; transition: background .2s, color .2s; border: 1.5px solid transparent; }
.faq-cat-pill:hover { background: var(--gold); color: #1a1a1a; }
.faq-pill-count { background: rgba(0,0,0,.1); border-radius: 50px; padding: 1px 7px; font-size: 11px; }
.faq-category { margin-bottom: 44px; }
.faq-cat-heading { font-size: 1.05rem; font-weight: 800; color: var(--dark-grey); border-bottom: 2px solid var(--gold); padding-bottom: 10px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.faq-cat-heading i { color: var(--gold); }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid #e8e4de; border-radius: 12px; overflow: hidden; transition: box-shadow .2s; }
.faq-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; cursor: pointer; font-size: 14px; font-weight: 600; color: #333; background: #faf9f6; transition: background .18s; user-select: none; }
.faq-q:hover { background: #f3f0e8; }
.faq-arrow { font-size: 11px; color: #aaa; flex-shrink: 0; transition: transform .22s; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a { display: none; border-top: 1px solid #eee; background: #fff; }
.faq-item.open .faq-a { display: block; }
.faq-a-inner { padding: 16px 20px; font-size: 14px; color: #555; line-height: 1.75; }
.faq-cta-box { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); border-radius: 20px; padding: 40px 32px; text-align: center; color: #fff; margin-top: 20px; }
.faq-cta-box i { font-size: 36px; color: var(--gold); margin-bottom: 14px; display: block; }
.faq-cta-box h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.faq-cta-box p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
.faq-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.faq-btn-primary { background: var(--gold); color: #1a1a1a; font-weight: 700; font-size: 14px; padding: 13px 28px; border-radius: 50px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s; }
.faq-btn-primary:hover { opacity: .85; }
.faq-btn-outline { border: 2px solid rgba(255,255,255,.3); color: #fff; font-weight: 600; font-size: 14px; padding: 11px 24px; border-radius: 50px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: border-color .2s; }
.faq-btn-outline:hover { border-color: var(--gold); color: var(--gold); }
/* ═══════════════════════════════════════════════════════════════════
NOWE ELEMENTY KONWERSJI
═══════════════════════════════════════════════════════════════════ */
/* ── Urgency badge (strona produktu) ─────────────────────────── */
.urgency-badge { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg,#ff6b35,#e74c3c); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 50px; margin: 6px 0 10px; letter-spacing: .3px; animation: urgencyPulse 2s ease-in-out infinite; }
@keyframes urgencyPulse { 0%,100%{opacity:1} 50%{opacity:.82} }
.urgency-badge i { font-size: 11px; }
/* ── Przycisk share (strona produktu) ────────────────────────── */
.btn-share-product { background: none; border: 1.5px solid #e0d8cc; border-radius: 50px; padding: 8px 14px; font-size: 12px; color: #888; cursor: pointer; transition: border-color .2s, color .2s; display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.btn-share-product:hover { border-color: var(--gold); color: var(--gold); }
/* ── Recenzja zweryfikowana ──────────────────────────────────── */
.rev-verified { display: inline-flex; align-items: center; gap: 4px; background: #e8f5e9; color: #27ae60; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 50px; margin-left: 8px; vertical-align: middle; }
/* ── QV badge konfigurowalne ─────────────────────────────────── */
.qv-conf-note { display: flex; align-items: center; gap: 7px; background: #fdf5e0; color: #8b6914; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin: 8px 0; border: 1px solid #f0dfa0; }
.qv-conf-note i { color: var(--gold); }
/* ── Testimoniale (strona główna) ────────────────────────────── */
.testimonials-section { padding: 60px 0; background: #faf9f6; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media(max-width:900px) { .testimonials-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: #fff; border: 1px solid #ede9e2; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .2s; }
.testimonial-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.tc-stars { display: flex; gap: 3px; }
.tc-body { font-size: 14px; color: #444; line-height: 1.7; flex: 1; font-style: italic; }
.tc-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; border-top: 1px solid #f0ece5; padding-top: 12px; }
.tc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--dark-grey); color: var(--gold); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tc-name { font-size: 13px; font-weight: 700; color: #222; }
.tc-product { font-size: 11px; color: #aaa; text-decoration: none; display: block; margin-top: 2px; }
.tc-product:hover { color: var(--gold); }
/* ── Home FAQ (strona główna) ────────────────────────────────── */
.home-faq-section { padding: 60px 0; }
.home-faq-inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
@media(max-width:860px) { .home-faq-inner { grid-template-columns: 1fr; gap: 24px; } }
.home-faq-left h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.home-faq-left p { font-size: 14px; color: #888; line-height: 1.6; margin-bottom: 20px; }
.btn-faq-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--gold); text-decoration: none; border: 2px solid var(--gold); padding: 9px 20px; border-radius: 50px; transition: background .2s, color .2s; }
.btn-faq-all:hover { background: var(--gold); color: #1a1a1a; }
.home-faq-list { display: flex; flex-direction: column; gap: 8px; }
.home-faq-item { border: 1px solid #e8e4de; border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .2s; }
.home-faq-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.hfi-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; background: #faf9f6; font-size: 14px; font-weight: 600; color: #333; user-select: none; }
.hfi-arrow { font-size: 11px; color: #aaa; flex-shrink: 0; transition: transform .22s; }
.home-faq-item.open .hfi-arrow { transform: rotate(180deg); }
.hfi-a { display: none; padding: 14px 20px; font-size: 14px; color: #555; line-height: 1.7; border-top: 1px solid #eee; background: #fff; }
.home-faq-item.open .hfi-a { display: block; }
/* ── FAQ Search ──────────────────────────────────────────────── */
.faq-search-wrap { margin: 16px 0 8px; }
.faq-search-inner { position: relative; display: flex; align-items: center; max-width: 520px; margin: 0 auto; background: #fff; border: 2px solid #e8e4de; border-radius: 50px; overflow: hidden; transition: border-color .2s; }
.faq-search-inner:focus-within { border-color: var(--gold); }
.faq-search-inner i { padding: 0 14px; color: #aaa; pointer-events: none; }
.faq-search-inner input { flex: 1; border: none; outline: none; padding: 13px 0; font-size: 14px; background: transparent; font-family: inherit; color: #333; }
#faqSearchClear { background: none; border: none; padding: 0 16px; font-size: 18px; color: #aaa; cursor: pointer; line-height: 1; }
#faqSearchClear:hover { color: #e74c3c; }
.faq-contact-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; border: 1.5px solid var(--gold); padding: 8px 18px; border-radius: 50px; transition: background .2s, color .2s; }
.faq-contact-link:hover { background: var(--gold); color: #1a1a1a; }
/* ── Wishlist – przyciski akcji ──────────────────────────────── */
.wl-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.btn-wl-share { display: inline-flex; align-items: center; gap: 8px; background: none; border: 2px solid var(--gold); color: var(--gold); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 50px; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; margin-top: 6px; }
.btn-wl-share:hover { background: var(--gold); color: #1a1a1a; }
.wl-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.btn-wl-atc { display: inline-flex; align-items: center; gap: 7px; background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 700; padding: 9px 16px; border-radius: 50px; border: none; cursor: pointer; transition: background .2s; flex: 1; justify-content: center; }
.btn-wl-atc:hover { background: var(--gold); color: #1a1a1a; }
.btn-wl-configure { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: #1a1a1a; font-size: 12px; font-weight: 700; padding: 9px 16px; border-radius: 50px; text-decoration: none; flex: 1; justify-content: center; transition: opacity .2s; }
.btn-wl-configure:hover { opacity: .85; }
.btn-wl-details { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1.5px solid #ddd; color: #666; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 50px; text-decoration: none; transition: border-color .2s, color .2s; }
.btn-wl-details:hover { border-color: var(--gold); color: var(--gold); }
/* ── Koszyk – share button ───────────────────────────────────── */
.btn-share-cart { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid #ddd; color: #888; font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 50px; cursor: pointer; transition: border-color .2s, color .2s; }
.btn-share-cart:hover { border-color: var(--gold); color: var(--gold); }