/* ==========================================================================
   Category page additions — NOT overriding filter.css (which handles sidebar,
   filter groups, checkboxes). Only new classes + catalog layout + page hero
   + brand tabs/panels + model cards + product cards catalog variant.
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
    background: #1a1a1a;
    color: #fff;
    padding: 3.5rem 0 2.5rem;
}
.page-hero__title {
    font-size: 2.25rem;
    margin: 0 0 .5rem;
    color: #fff;
    line-height: 1.1;
}
.page-hero__subtitle {
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    max-width: 760px;
    margin: 0;
}
@media (max-width: 768px) {
    .page-hero { padding: 2rem 0 1.5rem; }
    .page-hero__title { font-size: 1.65rem; }
}

/* ---------- Brand tabs ---------- */
.brand-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.brand-tab {
    background: #fff;
    border: 2px solid var(--color-border, #e5e5e5);
    padding: 1rem .75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    transition: all .15s;
    font-family: inherit;
}
.brand-tab:hover,
.brand-tab--active {
    border-color: var(--color-accent, #e94e1b);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.brand-tab__logo {
    height: 32px;
    max-width: 100px;
    object-fit: contain;
}
.model-card__tags { margin: .25rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.brand-tab__logo--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    min-height: 40px;
}
.brand-tab__name {
    font-weight: 600;
    font-size: .95rem;
    color: #222;
}
.brand-tab__count {
    color: var(--color-text-light, #777);
    font-size: .8rem;
}

.brand-panel {
    background: #fff;
    padding: 1.5rem;
    margin: 0 0 1.5rem;
    border: 1px solid var(--color-border, #e5e5e5);
}
.brand-accordion__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
/* Brand panel model-card — horizontal layout (image LEFT, info RIGHT) matching Netlify. */
.brand-accordion__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
}
@media (max-width: 700px) {
    .brand-accordion__grid { grid-template-columns: 1fr !important; }
}
.brand-panel .model-card,
.brand-accordion__grid .model-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-light, #f7f7f7);
    border: 1px solid var(--color-border, #e5e5e5);
    transition: all .2s;
    align-items: flex-start;
}
.brand-panel .model-card:hover,
.brand-accordion__grid .model-card:hover {
    border-color: var(--color-accent, #e94e1b);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.brand-panel .model-card__img,
.brand-accordion__grid .model-card__img {
    width: 100px !important;
    min-width: 100px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border, #e5e5e5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-panel .model-card__img img,
.brand-accordion__grid .model-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: .5rem;
    box-sizing: border-box;
}
.brand-panel .model-card__info,
.brand-accordion__grid .model-card__info {
    padding: 0 !important;
    flex: 1;
    min-width: 0;
}
.brand-panel .model-card__info h4,
.brand-accordion__grid .model-card__info h4 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    font-weight: 700;
}
.brand-panel .model-card__info p,
.brand-accordion__grid .model-card__info p {
    margin: .5rem 0;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--color-text-light, #666);
}

/* Per-brand logo size overrides in brand-card / brand-tab contexts. */
.brand-card__logo img[alt*="Reynaers"],
.brand-tab__logo[alt*="Reynaers"] { max-width: 220px; max-height: 70px; }
.brand-card__logo img[alt*="Aluprof"],
.brand-tab__logo[alt*="Aluprof"] { max-width: 180px; max-height: 70px; }
.brand-card__logo img[alt*="Heroal"],
.brand-tab__logo[alt*="Heroal"] { max-height: 60px; }

/* Bestseller badge: force corner positioning (override any legacy overrides). */
.product-card { position: relative !important; }
.product-card__badge {
    position: absolute !important;
    top: .75rem !important;
    left: .75rem !important;
    right: auto !important;
    width: auto !important;
    display: inline-block !important;
    background: var(--color-accent, #e94e1b) !important;
    color: #fff !important;
    padding: .25rem .6rem !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    z-index: 3;
}
.product-card__aluklip {
    position: absolute !important;
    top: .75rem !important;
    right: .75rem !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 3;
}
.model-card__tag {
    display: inline-block;
    padding: .15rem .5rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    margin-bottom: .5rem;
    margin-right: .25rem;
}
.model-card__tag--premium  { background: #fdecea; color: #b7290a; }
.model-card__tag--standard { background: #e5f4ea; color: #2e7d32; }
.model-card__tag--economy  { background: #f0f0f0; color: #555; }
.model-card__tag--aluklip  { background: #e6f0fa; color: #1565c0; }
.model-card__info p {
    font-size: .88rem;
    color: var(--color-text-light, #666);
    margin: 0 0 .5rem;
}
.model-card__specs {
    font-size: .82rem;
    color: #444;
    font-weight: 500;
}

/* ---------- Catalog layout ---------- */
.catalog-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 900px) {
    .catalog-layout { grid-template-columns: 1fr; }
}

.catalog-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border, #e5e5e5);
}
.catalog-topbar__count { margin: 0; color: #555; }
.catalog-topbar__sort { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.catalog-topbar__sort select {
    padding: .4rem .6rem;
    border: 1px solid var(--color-border, #e5e5e5);
    background: #fff;
    font-size: .9rem;
    font-family: inherit;
}

/* ---------- Catalog product grid: fixed 3 columns on desktop ---------- */
.product-grid--catalog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1100px) { .product-grid--catalog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .product-grid--catalog { grid-template-columns: 1fr; } }

.product-card--hidden { display: none !important; }

.product-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border, #e5e5e5);
    transition: all .2s;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: var(--color-accent, #e94e1b);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.product-card__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f5f5f5;
}
.product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.product-card:hover .product-card__img img { transform: scale(1.02); }
.product-card__body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.product-card__brand {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-light, #777);
    font-weight: 600;
}
.product-card__title { margin: .25rem 0 .5rem; font-size: 1.1rem; }
.product-card__desc {
    font-size: .85rem;
    color: var(--color-text-light, #666);
    margin: .5rem 0;
    line-height: 1.4;
}
.product-card__aluklip {
    display: inline-block;
    background: #e6f0fa;
    color: #1565c0;
    padding: .15rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: .4rem;
    letter-spacing: .05em;
}
.product-card__specs {
    list-style: none;
    padding: 0; margin: .5rem 0 0;
    font-size: .82rem;
    color: #444;
}
.product-card__specs li { padding: .15rem 0; }
.product-card__actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.product-card__badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: var(--color-accent, #e94e1b);
    color: #fff;
    padding: .25rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
    letter-spacing: .05em;
}

.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-light, #666);
}
.no-results p { margin-bottom: 1rem; }

body.no-scroll { overflow: hidden; }
body.lightbox-open { overflow: hidden; }

/* Lightbox overlay */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 2rem;
}
.lightbox--open { display: flex; }
.lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}
.lightbox__close, .lightbox__prev, .lightbox__next {
    position: absolute;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    font-family: inherit;
}
.lightbox__close {
    top: 1rem; right: 1rem;
    width: 44px; height: 44px;
    font-size: 2rem;
    line-height: 1;
}
.lightbox__prev, .lightbox__next {
    top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    font-size: 2rem;
    line-height: 1;
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover {
    background: rgba(255,255,255,.3);
}
.lightbox__counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: .9rem;
    background: rgba(0,0,0,.6);
    padding: .4rem .8rem;
    border-radius: 20px;
}
@media (max-width: 600px) {
    .lightbox { padding: 1rem; }
    .lightbox__prev, .lightbox__next {
        width: 40px; height: 40px;
    }
    .lightbox__prev { left: .5rem; }
    .lightbox__next { right: .5rem; }
}

/* Form status feedback */
.form-status {
    margin-top: 1rem;
    padding: .75rem 1rem;
    font-size: .9rem;
    text-align: center;
    display: none;
}
.form-status:not(:empty) { display: block; }
.form-status--ok  { background: #e5f4ea; color: #1b5e20; border: 1px solid #81c784; }
.form-status--err { background: #fdecea; color: #7a1c0b; border: 1px solid #ef9a9a; }

/* Custom checkbox with visible checkmark (overrides the global -webkit-appearance:none). */
.contact-form__field--checkbox input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--color-border, #ccc) !important;
    background: #fff !important;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 .5rem 0 0 !important;
    border-radius: 3px;
    transition: all .15s;
}
.contact-form__field--checkbox input[type="checkbox"]:hover {
    border-color: var(--color-accent, #e94e1b) !important;
}
.contact-form__field--checkbox input[type="checkbox"]:checked {
    background-color: var(--color-accent, #e94e1b) !important;
    border-color: var(--color-accent, #e94e1b) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 70% 70% !important;
}