.huba-prod-page { width: 100%; } .huba-prod-hero {
display        : flex;
align-items    : flex-start;
justify-content: space-between;
gap            : 16px;
margin-bottom  : 24px;
padding-bottom : 20px;
border-bottom  : 1px solid #efefef;
}
.huba-prod-h1 {
font-size  : 30px;
font-weight: 800;
color      : #1a1a1a;
margin     : 0;
line-height: 1.2;
}
.huba-prod-h1-red { color: #d80000; }
.huba-prod-count {
margin     : 0;
font-size  : 14px;
color      : #888;
white-space: nowrap;
flex-shrink: 0;
padding-top: 6px;
}
.huba-prod-count strong { color: #1a1a1a; } .huba-prod-toolbar {
display        : flex;
align-items    : center;
justify-content: space-between;
gap            : 16px;
margin-bottom  : 24px;
flex-wrap      : wrap;
} .huba-prod-toggle-wrap {
display    : flex;
align-items: center;
gap        : 10px;
}
.huba-prod-toggle-label {
font-size  : 13px;
font-weight: 600;
color      : #bbb;
transition : color 0.18s;
white-space: nowrap;
}
.huba-prod-toggle-label.huba-toggle-active {
color: #1a1a1a;
}
.huba-prod-toggle {
position     : relative;
width        : 44px;
height       : 24px;
background   : #e0e0e0;
border       : none;
border-radius: 100px;
cursor       : pointer;
transition   : background 0.22s;
flex-shrink  : 0;
padding      : 0;
}
.huba-prod-toggle.on {
background: #d80000;
}
.huba-prod-toggle-knob {
position     : absolute;
top          : 3px;
left         : 3px;
width        : 18px;
height       : 18px;
background   : #fff;
border-radius: 50%;
box-shadow   : 0 1px 4px rgba(0,0,0,.2);
transition   : left 0.22s cubic-bezier(0.4,0,0.2,1);
pointer-events: none;
}
.huba-prod-toggle.on .huba-prod-toggle-knob {
left: 23px;
} .huba-prod-filters {
display  : flex;
flex-wrap: wrap;
gap      : 8px;
}
.huba-prod-filter {
display      : inline-flex;
align-items  : center;
gap          : 5px;
padding      : 7px 14px;
border       : 1.5px solid #e0e0e0;
border-radius: 100px;
background   : #fff;
font-size    : 13px;
font-weight  : 600;
color        : #555;
cursor       : pointer;
transition   : border-color 0.18s, background 0.18s, color 0.18s;
font-family  : inherit;
}
.huba-prod-filter:hover {
border-color: #d80000;
color       : #d80000;
}
.huba-prod-filter.active {
background  : #d80000;
border-color: #d80000;
color       : #fff;
}
.huba-prod-filter-count {
font-size  : 11px;
font-weight: 700;
opacity    : .75;
}
.huba-prod-filter.active .huba-prod-filter-count { opacity: 1; } .huba-prod-sort select {
padding      : 7px 12px;
border       : 1.5px solid #e0e0e0;
border-radius: 8px;
font-size    : 13px;
font-family  : inherit;
color        : #555;
background   : #fff;
cursor       : pointer;
transition   : border-color 0.18s;
}
.huba-prod-sort select:focus {
outline     : none;
border-color: #d80000;
} .huba-prod-grid {
display              : grid;
grid-template-columns: repeat(3, 1fr);
gap                  : 20px;
}
@media (max-width: 960px) {
.huba-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 540px) {
.huba-prod-grid { grid-template-columns: 1fr; }
.huba-prod-h1   { font-size: 22px; }
.huba-prod-toolbar { flex-direction: column; align-items: flex-start; }
} .huba-prod-card {
background    : #fff;
border        : 1px solid #e8e8e8;
border-radius : 10px;
overflow      : hidden;
display       : flex;
flex-direction: column;
position      : relative;
transition    : box-shadow 0.2s, transform 0.2s, opacity 0.2s;
padding-top   : 0;
}
.huba-prod-card:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
transform : translateY(-2px);
}
.huba-prod-card.hidden {
display: none;
} .huba-prod-img-wrap {
display     : block;
overflow    : hidden;
aspect-ratio: 4 / 3;
}
.huba-prod-img-wrap img {
width     : 100%;
height    : 100%;
object-fit: cover;
display   : block;
transition: transform 0.35s ease;
}
.huba-prod-card:hover .huba-prod-img-wrap img {
transform: scale(1.04);
} .huba-prod-cat {
position     : absolute;
top          : 10px;
left         : 10px;
display      : inline-block;
font-size    : 10.5px;
font-weight  : 700;
text-transform: uppercase;
letter-spacing: .6px;
color        : #d80000;
background   : rgba(255, 255, 255, 0.92);
border-radius: 4px;
padding      : 3px 8px;
z-index      : 2;
} .huba-prod-body {
padding       : 13px 14px 14px;
display       : flex;
flex-direction: column;
flex          : 1;
gap           : 6px;
} .huba-prod-name {
display        : block;
font-size      : 14px;
font-weight    : 700;
color          : #1a1a1a;
text-decoration: none;
line-height    : 1.35;
transition     : color 0.15s;
}
.huba-prod-name:hover { color: #d80000; } .huba-prod-specs {
list-style           : none;
padding              : 0;
margin               : 2px 0 0;
display              : grid;
grid-template-columns: 1fr 1fr;
gap                  : 4px 8px;
}
.huba-prod-spec {
font-size: 11.5px;
color    : #555;
}
.huba-prod-spec-label {
color      : #999;
font-weight: 600;
}
.huba-prod-spec-val {
color      : #1a1a1a;
font-weight: 500;
} .huba-prod-price {
display    : none;
margin     : 2px 0;
font-size  : 15px;
font-weight: 800;
color      : #d80000;
line-height: 1.2;
}
.huba-prod-price-vat {
font-size  : 10.5px;
font-weight: 500;
color      : #999;
margin-left: 3px;
}
.huba-mode-gebraucht .huba-prod-price {
display: block;
} .huba-prod-actions {
display    : flex;
align-items: center;
gap        : 8px;
margin-top : auto;
padding-top: 10px;
flex-wrap  : wrap;
}
.huba-prod-btn-detail {
display        : inline-flex;
align-items    : center;
gap            : 5px;
background     : #d80000;
color          : #fff !important;
text-decoration: none !important;
font-size      : 12px;
font-weight    : 700;
padding        : 7px 14px;
border-radius  : 6px;
transition     : background 0.18s, transform 0.15s;
flex-shrink    : 0;
}
.huba-prod-btn-detail:hover {
background: #b80000;
transform : translateY(-1px);
}
.huba-prod-btn-detail i { font-size: 10px; }
.huba-prod-btn-angebot {
display      : inline-flex;
align-items  : center;
background   : none;
border       : 1.5px solid #d80000;
color        : #d80000;
font-size    : 12px;
font-weight  : 700;
padding      : 6px 13px;
border-radius: 6px;
cursor       : pointer;
transition   : background 0.18s, color 0.18s;
font-family  : inherit;
flex-shrink  : 0;
}
.huba-prod-btn-angebot:hover {
background: #d80000;
color     : #fff;
} .huba-prod-empty {
text-align: center;
padding   : 60px 20px;
color     : #aaa;
}
.huba-prod-empty i {
font-size    : 40px;
display      : block;
margin-bottom: 14px;
}
.huba-prod-empty p {
margin : 0;
font-size: 15px;
color  : #888;
}
.sr-only {
position : absolute;
width    : 1px;
height   : 1px;
overflow : hidden;
clip     : rect(0,0,0,0);
}