:root {
--bg-page: #f8fafc;
--bg-white: #ffffff;
--header-dark: #121927;
--header-subnav: #1a2332;
--header-border: rgba(255, 255, 255, 0.1);
--orange-main: #ff5a00;
--orange-hover: #e55000;
--blue-allumi: #1d4ed8;
--blue-glow: #38bdf8;
--text-dark: #0f172a;
--text-gray: #64748b;
--text-light: #94a3b8;
--border-light: #e2e8f0;
--border-subtle: #f1f5f9;
--state-new-bg: #ecfdf5;
--state-new-text: #047857;
--state-outlet-bg: #fef3c7;
--state-outlet-text: #b45309;
--state-used-bg: #f1f5f9;
--state-used-text: #475569;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-pill: 9999px;
--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(15,23,42,0.04);
--shadow-hover: 0 8px 24px rgba(15,23,42,0.1);
--font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-main);
background-color: var(--bg-page);
color: var(--text-dark);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding-bottom: 70px;
}
@media (min-width: 901px) {
body { padding-bottom: 0; }
}
/* Prototype Notice */
.proto-alert {
background: #fffbeb;
border-bottom: 1px solid #fde68a;
color: #92400e;
padding: 7px 16px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
/* Header */
header {
background: var(--header-dark);
color: #ffffff;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.header-top {
max-width: 1440px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand-box {
text-decoration: none;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.brand-logo-row { display: flex; align-items: baseline; gap: 1px; }
.logo-all { font-size: 26px; font-weight: 800; color: #ffffff; letter-spacing: -0.8px; }
.logo-u { font-size: 30px; font-weight: 800; color: var(--orange-main); font-style: italic; line-height: 1; }
.logo-need { font-size: 26px; font-weight: 800; color: #ffffff; letter-spacing: -0.8px; }
.brand-powered {
font-size: 9.5px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 0.5px;
margin-top: -3px;
}
.brand-powered span { color: var(--blue-glow); font-weight: 800; }
.header-search {
flex: 1;
max-width: 650px;
position: relative;
}
.search-wrapper {
display: flex;
align-items: center;
background: #ffffff;
border-radius: var(--radius-pill);
padding: 4px 5px 4px 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.search-icon-svg { color: #94a3b8; flex-shrink: 0; margin-right: 8px; }
.search-input-field {
flex: 1;
border: none;
outline: none;
font-size: 14px;
color: var(--text-dark);
font-family: var(--font-main);
min-width: 50px;
}
.search-clear-btn {
background: none;
border: none;
color: #94a3b8;
font-size: 16px;
cursor: pointer;
padding: 0 8px;
display: none;
}
.search-clear-btn:hover { color: var(--text-dark); }
.search-btn-orange {
background: var(--orange-main);
color: #ffffff;
border: none;
border-radius: var(--radius-pill);
padding: 9px 24px;
font-size: 14px;
font-weight: 700;
font-family: var(--font-main);
cursor: pointer;
transition: background 0.15s ease;
flex-shrink: 0;
}
.search-btn-orange:hover { background: var(--orange-hover); }
.header-tools {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.tool-link {
display: flex;
align-items: center;
gap: 8px;
color: #cbd5e1;
text-decoration: none;
font-size: 13px;
font-weight: 600;
cursor: pointer;
position: relative;
background: none;
border: none;
padding: 6px;
}
.tool-link:hover { color: #ffffff; }
.tool-icon-wrap { position: relative; }
.tool-badge {
position: absolute;
top: -6px;
right: -8px;
background: var(--orange-main);
color: #ffffff;
font-size: 10.5px;
font-weight: 800;
padding: 1px 5px;
border-radius: var(--radius-pill);
min-width: 16px;
text-align: center;
}
.tool-text { display: flex; flex-direction: column; text-align: left; }
.tool-sub { font-size: 10.5px; color: #94a3b8; font-weight: 400; }
.tool-main { font-size: 13px; font-weight: 700; }
/* Subnavigation */
.header-subnav {
background: var(--header-subnav);
border-top: 1px solid var(--header-border);
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.subnav-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-item {
color: #cbd5e1;
text-decoration: none;
font-size: 13px;
font-weight: 600;
padding: 12px 14px;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
border-bottom: 2px solid transparent;
cursor: pointer;
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: var(--font-main);
}
.subnav-item:hover { color: #ffffff; }
.subnav-item.active {
color: #ffffff;
border-bottom-color: var(--orange-main);
font-weight: 700;
}
.subnav-badge {
background: rgba(255, 255, 255, 0.15);
font-size: 10.5px;
padding: 2px 6px;
border-radius: var(--radius-pill);
}
.sync-status-pill {
margin-left: auto;
font-size: 11.5px;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.08);
color: #94a3b8;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.sync-status-pill.synced {
background: rgba(5, 150, 105, 0.2);
color: #34d399;
border: 1px solid rgba(52, 211, 153, 0.3);
}
/* Hero Banner */
.hero-banner-sec {
background: linear-gradient(135deg, #0b111e 0%, #1e293b 100%);
color: #ffffff;
position: relative;
overflow: hidden;
border-bottom: 1px solid #e2e8f0;
}
.hero-banner-inner {
max-width: 1440px;
margin: 0 auto;
padding: 36px 24px;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 32px;
align-items: center;
}
.hero-banner-text h1 {
font-size: 32px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.hero-banner-text p {
font-size: 14px;
color: #cbd5e1;
margin-bottom: 20px;
line-height: 1.5;
max-width: 580px;
}
.hero-badges-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-badge-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-pill);
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
color: #f1f5f9;
display: flex;
align-items: center;
gap: 6px;
}
.hero-banner-img-box {
display: flex;
justify-content: flex-end;
align-items: center;
}
.hero-banner-img {
max-width: 100%;
max-height: 240px;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
/* Main Layout */
.main-container {
max-width: 1440px;
margin: 24px auto;
padding: 0 24px;
display: grid;
grid-template-columns: 260px 1fr;
gap: 28px;
}
/* Sidebar Filters */
.sidebar-filters {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-card);
height: fit-content;
}
.filter-sec-h {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
}
.filter-sec-h h3 { font-size: 16px; font-weight: 800; }
.clear-all-link {
background: none;
border: none;
color: var(--blue-allumi);
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.clear-all-link:hover { text-decoration: underline; }
.filter-group {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-label {
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
display: block;
color: var(--text-dark);
}
.filter-options-list { display: flex; flex-direction: column; gap: 8px; }
.filter-chk-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #334155;
cursor: pointer;
user-select: none;
}
.filter-chk-item input[type="checkbox"] {
accent-color: var(--orange-main);
width: 16px;
height: 16px;
cursor: pointer;
}
.filter-count { margin-left: auto; font-size: 11.5px; color: var(--text-light); }
.price-inputs-row { display: flex; align-items: center; gap: 8px; }
.price-input-fld {
width: 100%;
height: 34px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 0 8px;
font-size: 12.5px;
font-family: var(--font-main);
}
/* Content Area */
.content-area { min-width: 0; }
/* Active Filter Chips */
.active-chips-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
align-items: center;
}
.filter-chip {
background: #eff6ff;
border: 1px solid #bfdbfe;
color: #1e40af;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
gap: 6px;
}
.filter-chip button {
background: none;
border: none;
color: #1e40af;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
/* Catalog Grid Section */
.catalog-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.catalog-title { font-size: 20px; font-weight: 800; }
.catalog-stats-txt { font-size: 13px; color: var(--text-gray); font-weight: 500; }
/* Product Cards Grid */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 18px;
}
.p-card {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 14px;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.p-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
border-color: #cbd5e1;
}
.p-badge-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.badge-pill {
font-size: 10.5px;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--radius-pill);
display: inline-block;
}
.badge-nowy { background: var(--state-new-bg); color: var(--state-new-text); border: 1px solid #a7f3d0; }
.badge-powystawowy { background: var(--state-outlet-bg); color: var(--state-outlet-text); border: 1px solid #fde68a; }
.badge-uzywany { background: var(--state-used-bg); color: var(--state-used-text); border: 1px solid #cbd5e1; }
.btn-p-fav {
background: none;
border: none;
color: #cbd5e1;
font-size: 19px;
cursor: pointer;
line-height: 1;
padding: 2px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
}
.btn-p-fav:hover, .btn-p-fav.active { color: #ef4444; }
.p-image-wrap {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
position: relative;
background: #ffffff;
border-radius: var(--radius-sm);
overflow: hidden;
text-decoration: none;
}
.p-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.2s ease;
}
.p-card:hover .p-img { transform: scale(1.04); }
.p-warning-pill {
background: #fffbeb;
color: #92400e;
font-size: 10.5px;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
border: 1px solid #fde68a;
margin-bottom: 6px;
line-height: 1.2;
}
.p-sku-row {
font-size: 11px;
color: var(--text-light);
font-weight: 600;
margin-bottom: 4px;
}
.p-title {
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
line-height: 1.35;
height: 36px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10px;
text-decoration: none;
}
.p-title:hover { color: var(--blue-allumi); }
.p-price-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: auto;
margin-bottom: 4px;
}
.p-price-curr {
font-size: 18px;
font-weight: 800;
color: var(--text-dark);
}
.p-price-label { font-size: 10.5px; color: var(--text-gray); font-weight: 500; }
.p-stock-row {
font-size: 11px;
color: #059669;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 12px;
}
.btn-card-add-cart {
background: var(--orange-main);
color: #ffffff;
border: none;
border-radius: var(--radius-sm);
padding: 9px;
font-size: 12.5px;
font-weight: 700;
font-family: var(--font-main);
cursor: pointer;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background 0.15s ease;
}
.btn-card-add-cart:hover { background: var(--orange-hover); }
.btn-card-add-cart.added { background: #059669; }
/* Mini Sections (Bestsellery, Polecane, Okazje) */
.tri-showcase-sec {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.tri-col {
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 18px;
box-shadow: var(--shadow-card);
}
.tri-col-h {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 800;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-light);
}
.tri-items-list { display: flex; flex-direction: column; gap: 12px; }
.mini-p-box {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
padding: 6px 0;
border-bottom: 1px solid var(--border-subtle);
}
.mini-p-box:last-child { border-bottom: none; }
.mini-p-img-box {
width: 52px;
height: 52px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 2px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.mini-p-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mini-p-name {
font-size: 12px;
font-weight: 700;
line-height: 1.3;
color: var(--text-dark);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.mini-p-name:hover { color: var(--blue-allumi); }
.mini-p-price { font-size: 13px; font-weight: 800; color: var(--orange-main); white-space: nowrap; }
/* Footer */
footer {
background: var(--header-dark);
color: #cbd5e1;
margin-top: 60px;
padding: 48px 24px 24px;
border-top: 1px solid var(--header-border);
}
.footer-inner { max-width: 1440px; margin: 0 auto; }
.footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 36px;
margin-bottom: 36px;
}
.f-col h4 { color: #ffffff; font-size: 14px; font-weight: 800; margin-bottom: 14px; }
.f-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.f-col a { color: #94a3b8; text-decoration: none; font-size: 12.5px; }
.f-col a:hover { color: #ffffff; }
.f-col span { font-size: 12.5px; color: #94a3b8; }
.allumi-footer-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.allumi-fc-left h3 { font-size: 16px; font-weight: 800; color: #ffffff; margin-bottom: 4px; }
.allumi-fc-left p { font-size: 11.5px; color: #94a3b8; margin-bottom: 8px; }
.btn-allumi-fc {
background: var(--blue-allumi);
color: #ffffff;
border: none;
border-radius: var(--radius-pill);
padding: 4px 12px;
font-size: 11px;
font-weight: 700;
display: inline-block;
}
.allumi-fc-robot img { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; }
.footer-bottom-bar {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11.5px;
color: #64748b;
flex-wrap: wrap;
gap: 12px;
}
/* Interactive Cart Drawer */
.cart-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(2px);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.cart-backdrop.open { opacity: 1; visibility: visible; }
.cart-drawer-panel {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 420px;
height: 100%;
background: #ffffff;
z-index: 2001;
box-shadow: -4px 0 24px rgba(0,0,0,0.2);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
}
.cart-drawer-panel.open { transform: translateX(0); }
.drawer-h {
padding: 16px 20px;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
}
.drawer-close-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--text-gray);
padding: 4px;
line-height: 1;
}
.drawer-close-btn:hover { color: var(--text-dark); }
.drawer-b {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.qty-controls {
display: flex;
align-items: center;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
overflow: hidden;
}
.qty-btn {
background: #f8fafc;
border: none;
padding: 4px 10px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.qty-btn:hover { background: #e2e8f0; }
.qty-val {
padding: 0 10px;
font-size: 12px;
font-weight: 700;
}
.btn-del-item {
background: none;
border: none;
color: #ef4444;
font-size: 11.5px;
cursor: pointer;
margin-left: 10px;
font-weight: 600;
}
.btn-del-item:hover { text-decoration: underline; }
.drawer-f {
padding: 20px;
border-top: 1px solid var(--border-light);
background: #f8fafc;
}
/* Mobile Bottom Nav & Drawers */
.mobile-bottom-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--header-dark);
border-top: 1px solid var(--header-border);
z-index: 1500;
padding: 6px 12px;
box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
.mobile-nav-inner {
display: flex;
justify-content: space-around;
align-items: center;
}
.mobile-nav-btn {
background: none;
border: none;
color: #94a3b8;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
position: relative;
padding: 4px 8px;
}
.mobile-nav-btn.active, .mobile-nav-btn:hover { color: #ffffff; }
.mobile-badge {
position: absolute;
top: 0;
right: 6px;
background: var(--orange-main);
color: #ffffff;
font-size: 9px;
font-weight: 800;
border-radius: var(--radius-pill);
padding: 1px 4px;
min-width: 14px;
text-align: center;
}
/* Mobile Filter Sheet */
.mobile-filters-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #ffffff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: 2002;
padding: 20px;
box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
max-height: 85vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-filters-sheet.open { transform: translateY(0); }
.sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
margin-bottom: 16px;
}
/* Responsive Breakpoints */
@media (max-width: 1080px) {
.tri-showcase-sec { grid-template-columns: 1fr; }
.footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.main-container { grid-template-columns: 1fr; }
.sidebar-filters { display: none; }
.mobile-bottom-bar { display: block; }
.hero-banner-inner { grid-template-columns: 1fr; text-align: center; }
.hero-badges-row { justify-content: center; }
.hero-banner-img-box { display: none; }
.header-top { flex-wrap: wrap; gap: 12px; }
.header-search { order: 3; max-width: 100%; width: 100%; }
.tool-text { display: none; }
}
@media (max-width: 600px) {
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.footer-cols { grid-template-columns: 1fr; }
.header-top { padding: 10px 16px; }
.main-container { padding: 0 12px; margin: 16px auto; }
}