/*==================================================
ARCHIVE LAYOUT
==================================================*/

.cyb-archive-page{
    padding:0;
    background:#f3f3f3;
}

.cyb-archive-layout{

    display:grid;

    grid-template-columns:260px minmax(0,1fr);

    gap:25px;

    align-items:start;

}

/*==================================================
HEADER
==================================================*/

.cyb-archive-header{

    margin-bottom:40px;

}

.cyb-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    font-size:14px;

}

.cyb-breadcrumb a{

    color:var(--cyb-primary);

    text-decoration:none;

}

.cyb-archive-heading h1{

    font-size:46px;

    color:#1e293b;

    margin-bottom:18px;

    line-height:1.2;

}

.cyb-archive-heading p{

    max-width:760px;

    color:#64748b;

    line-height:1.8;

}

/*==================================================
SIDEBAR
==================================================*/

.cyb-archive-sidebar{

    position:sticky;

    top:110px;

}

.cyb-filter-sidebar{

    background:#fff;

    border-radius:18px;

    padding:28px;

    box-shadow:var(--cyb-shadow);

    border:1px solid var(--cyb-border);

}

.cyb-filter-group{

    margin-bottom:32px;

}

.cyb-filter-group h3{

    font-size:20px;

    margin-bottom:18px;

    color:#1e293b;

}

.cyb-filter-group ul{

    list-style:none;

    margin:0;

    padding:0;

}

.cyb-filter-group li{

    margin-bottom:12px;

}

.cyb-filter-group label{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:10px 0;

    cursor:pointer;

    transition:.25s;

}

.cyb-filter-group label:hover{

    color:var(--cyb-primary);

}

.cyb-filter-group input{

    accent-color:var(--cyb-primary);

}

.cyb-filter-reset button{

    width:100%;

    border:none;

    background:var(--cyb-primary);

    color:#fff;

    padding:14px;

    border-radius:10px;

    font-weight:400;

    cursor:pointer;

    transition:.3s;

}

.cyb-filter-reset button:hover{

    background:var(--cyb-primary-dark);

}

/*==================================================
CONTENT
==================================================*/

.cyb-archive-content{

    min-width:0;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1024px){

    .cyb-archive-layout{

        grid-template-columns:1fr;

    }

    .cyb-archive-sidebar{

        position:static;

    }

}

@media(max-width:768px){

    .cyb-archive-page{

        padding:40px 0;

    }

    .cyb-archive-heading h1{

        font-size:34px;

    }

}

.cyb-loading{
    display:none;
    text-align:center;
    padding:30px;
    font-weight:600;
    color:#64748b;
}

.cyb-loading.active{
    display:block;
}

.cyb-archive-toolbar{
    margin-bottom:35px;
}

/*=========================================
ARCHIVE TOOLBAR
=========================================*/

.cyb-archive-toolbar{

    background:#fff;

    border:1px solid #e8edf3;

    border-radius:16px;

    padding:25px;

    margin-bottom:35px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.cyb-toolbar-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.cyb-toolbar-count{

    font-size:22px;

    font-weight:700;

    color:#1e293b;

}

.cyb-toolbar-count span{

    color:#0B63CE;

}

.cyb-toolbar-row{

    display:grid;

    grid-template-columns:1fr 260px;

    gap:20px;

}

.cyb-toolbar-row input{

    height:56px;

    border:1px solid #d9e2ec;

    border-radius:10px;

    padding:0 18px;

    font-size:15px;

    transition:.3s;

}

.cyb-toolbar-row input:focus{

    border-color:#0B63CE;

    box-shadow:0 0 0 4px rgba(11,99,206,.12);

}

.cyb-toolbar-row select{

    height:56px;

    border:1px solid #d9e2ec;

    border-radius:10px;

    padding:0 18px;

    background:#fff;

    cursor:pointer;

}


/* ======================================================
   Archive Hero
====================================================== */

.cyb-archive-hero{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    margin-bottom:35px;

    padding:70px 60px;

    background:linear-gradient(135deg,#0b1f3f 0%,#123b73 100%);

    color:#fff;

}

.cyb-archive-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at right,#ffffff15 0%,transparent 45%);

}

.cyb-archive-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:none;

}

.cyb-breadcrumb{

    display:flex;

    gap:10px;

    align-items:center;

    margin-bottom:20px;

    font-size:14px;

    opacity:.9;

}

.cyb-breadcrumb a{

    color:#fff;

    text-decoration:none;

}

.cyb-breadcrumb a:hover{

    text-decoration:underline;

}

.cyb-archive-hero h1{

    font-size:42px;

    line-height:1.2;

    margin-bottom:18px;

    font-weight:700;

}

.cyb-archive-hero p{

    font-size:17px;

    line-height:1.8;

    opacity:.9;

    max-width:650px;

}


/* ===========================
   SIDEBAR
=========================== */

.cyb-filter-sidebar{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.cyb-filter-card{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:24px;

    box-shadow:0 6px 20px rgba(0,0,0,.05);

}

.cyb-filter-card h3{

    font-size:18px;

    margin-bottom:18px;

    color:#0b1f3f;

}

.cyb-filter-list{

    list-style:none;

    padding:0;

    margin:0;

}

.cyb-filter-list li{

    margin-bottom:14px;

}

.cyb-filter-list label{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.cyb-filter-name{

    flex:1;

    font-size:15px;

}

.cyb-count{

    background:#eef4ff;

    color:#0b1f3f;

    border-radius:20px;

    padding:3px 10px;

    font-size:12px;

    font-weight:600;

}

.cyb-clear-btn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#0b1f3f;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.cyb-clear-btn:hover{

    background:#144b8a;

}



/* ==========================
   ARCHIVE TOOLBAR
========================== */

.cyb-toolbar{

	display:flex;

	justify-content:space-between;

	align-items:center;

	gap:30px;

	margin:25px 0 35px;

	flex-wrap:wrap;

}

.cyb-product-count{

	display:flex;

	align-items:center;

	font-size:15px;

	font-weight:500;

	color:#555;

}

.cyb-product-count strong{

	color:#111;

	margin:0 4px;

	font-weight:700;

}

.cyb-count-icon{

	display:flex;

	align-items:center;

	color:#dc2626;

	margin-right:8px;

}

.cyb-toolbar-actions{

    display:flex;

    align-items:center;

    gap:15px;

    flex:0 0 auto;

}

.cyb-toolbar-search{

    width:320px;

    position:relative;

}

.cyb-toolbar-search-icon{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#dc2626;

    z-index:5;

    pointer-events:none;

    display:flex;

    align-items:center;

}
.cyb-toolbar-search-icon svg{

	width:18px;

	height:18px;

}

.cyb-toolbar-search input{

    width:100%;

    height:50px;

    padding:0 50px 0 18px;

    border:1px solid #d9d9d9;

    border-radius:12px;

    font-size:14px;

}

.cyb-toolbar-search input:focus{

	outline:none;

	border-color:#dc2626;

	box-shadow:0 0 0 4px rgba(220,38,38,.12);

}

.cyb-toolbar-sort select{

	height:54px;

	min-width:220px;

	padding:0 18px;

	border:1px solid #ddd;

	border-radius:14px;

	background:#fff;

	font-size:15px;

	cursor:pointer;

	transition:.3s;

}

.cyb-toolbar-sort select:focus{

	outline:none;

	border-color:#dc2626;

	box-shadow:0 0 0 4px rgba(220,38,38,.12);

}

@media (max-width:768px){

	.cyb-toolbar{

		flex-direction:column;

		align-items:stretch;

	}

	.cyb-toolbar-actions{

		flex-direction:column;

		width:100%;

	}

	.cyb-toolbar-sort{

		width:100%;

	}

	.cyb-toolbar-sort select{

		width:100%;

		min-width:100%;

	}

}



/*==================================================
ARCHIVE
==================================================*/

.cyb-archive{

    padding:50px 0 100px;

}

.cyb-archive-layout{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:40px;

}


/*==========================
PRODUCTS - MOBILE
==========================*/

@media (max-width:768px){

    .cyb-products-grid{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

    }

    .cyb-product-card{

        min-width:0;

        width:100%;

    }

    .cyb-product-image{

        height:170px;

    }

    .cyb-product-image img{

        max-width:85%;

        max-height:150px;

        object-fit:contain;

    }

    .cyb-product-title{

        font-size:18px;

        line-height:1.4;

        min-height:auto;

    }

    .cyb-product-price{

        font-size:24px;

    }

    .cyb-product-button{

        width:100%;

    }

}


@media (max-width:480px){

    .cyb-products-grid{

        grid-template-columns:1fr;

    }

}

.cyb-archive-sidebar{

    background:#fff;

    border-radius:16px;

    padding:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.cyb-archive-content{

    min-height:600px;

}

/* =========================================
   MOBILE PRODUCTS ARCHIVE
========================================= */

@media (max-width:768px){

    /* Hide filters on mobile */
    .cyb-archive-sidebar{
        display:none !important;
    }

    /* Products take full width */
    .cyb-archive-layout{
        display:block !important;
        width:100% !important;
    }

    .cyb-archive-content{
        width:100% !important;
        min-width:0 !important;
        display:block !important;
    }

    /* Products grid */
    .cyb-products-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:14px !important;
        width:100% !important;
        margin:0 !important;
    }

    .cyb-product-card{
        width:100% !important;
        min-width:0 !important;
    }

    .cyb-product-image{
        width:100% !important;
        height:150px !important;
    }

}


/* =========================================
   MOBILE PRODUCTS - COMPACT TOOLBAR
========================================= */

@media (max-width:768px){

    .cyb-archive-toolbar{
        padding:14px !important;
        margin:10px 0 15px !important;
        border-radius:12px !important;
    }

    .cyb-toolbar-top{
        margin-bottom:10px !important;
    }

    .cyb-toolbar-count{
        font-size:16px !important;
        font-weight:600 !important;
    }

    .cyb-toolbar-row{
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
    }

    .cyb-toolbar-row input,
    .cyb-toolbar-row select{
        height:44px !important;
        font-size:14px !important;
    }

    .cyb-toolbar{
        margin:8px 0 15px !important;
        gap:8px !important;
    }

    .cyb-toolbar-actions{
        gap:8px !important;
    }

    .cyb-toolbar-search{
        width:100% !important;
    }

}


/* =========================================================
   PRODUCTS PAGE — MOBILE TOP SPACE
========================================================= */

@media (max-width: 768px) {

    /* Remove unnecessary space before products */
    .cyb-archive-page {
        padding: 0 !important;
    }

    .cyb-archive {
        padding: 10px 0 40px !important;
    }

    /* Keep toolbar compact */
    .cyb-archive-toolbar {
        margin: 0 0 12px !important;
        padding: 12px !important;
    }

    /* Products start sooner */
    .cyb-archive-layout {
        margin-top: 0 !important;
    }

}

/* =========================================================
   PRODUCTS ARCHIVE TOOLBAR
========================================================= */

.cyb-toolbar {
    width: 100%;
    padding: 28px 32px;

    background: #B80F0A;

    border: 1px solid #e3e5e8;
    border-radius: 18px;

    box-sizing: border-box;
}


/* =========================================================
   TOP — PRODUCT COUNT
========================================================= */

.cyb-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin-bottom: 22px;
}

.cyb-product-count {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 17px;
    font-weight: 400;

    color: #FFFFFF;
}

.cyb-product-count strong {
    font-weight: 700;
    color: #FFFFFF;
}

.cyb-count-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #FFFFFF;
}


/* =========================================================
   BOTTOM — SEARCH + SORT
========================================================= */

.cyb-toolbar-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 0;
}


/* =========================================================
   SEARCH
========================================================= */

.cyb-toolbar-search {
    position: relative;

    width: 355px;
}

.cyb-toolbar-search input {
    width: 100%;
    height: 56px;

    padding: 0 52px 0 18px;

    background: #ffffff;

    border: 1px solid #d8dadd;
    border-radius: 12px;

    outline: none;

    box-sizing: border-box;

    font-size: 14px;
    color: #172033;
}

.cyb-toolbar-search input::placeholder {
    color: #8a929d;
}

.cyb-toolbar-search input:focus {
    border-color: #d90016;
}


/* SEARCH ICON */

.cyb-toolbar-search-icon {
    position: absolute;

    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    color: #d90016;

    pointer-events: none;
}

.cyb-toolbar-search-icon svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   SORT
========================================================= */

.cyb-toolbar-sort {
    width: 355px;
}

.cyb-toolbar-sort select {
    width: 100%;
    height: 56px;

    padding: 0 18px;

    background: #ffffff;

    border: 1px solid #d8dadd;
    border-radius: 12px;

    outline: none;

    box-sizing: border-box;

    font-size: 14px;
    color: #172033;

    cursor: pointer;
}

.cyb-toolbar-sort select:focus {
    border-color: #d90016;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cyb-toolbar {
        padding: 20px 14px;

        border-radius: 16px;
    }

    .cyb-toolbar-top {
        margin-bottom: 16px;
    }

    .cyb-product-count {
        font-size: 16px;
    }

    .cyb-toolbar-bottom {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 10px;
    }

    .cyb-toolbar-search,
    .cyb-toolbar-sort {
        width: 100%;
    }

    .cyb-toolbar-search input,
    .cyb-toolbar-sort select {
        height: 54px;
    }

}

/* =========================================================
   PRODUCTS ARCHIVE HERO SLIDER
========================================================= */

.cyb-page-banner {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #f3f4f6;
}


/* SLIDER */

.cyb-archive-hero-slider {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* TRACK */

.cyb-archive-hero-track {
    display: flex;

    width: 100%;

    transition: transform 0.7s ease-in-out;
}


/* SLIDE */

.cyb-archive-hero-slide {
    flex: 0 0 100%;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* IMAGE */

.cyb-archive-hero-slide img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    object-fit: cover;
}


/* =========================================================
   ARROWS
========================================================= */

.cyb-archive-hero-prev,
.cyb-archive-hero-next {
    position: absolute;

    top: 50%;
    z-index: 5;

    width: 42px;
    height: 42px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);
    color: #172033;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.cyb-archive-hero-prev {
    left: 20px;
}

.cyb-archive-hero-next {
    right: 20px;
}

.cyb-archive-hero-prev:hover,
.cyb-archive-hero-next:hover {
    background: #d90016;
    color: #ffffff;

    transform: translateY(-50%) scale(1.05);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cyb-page-banner {
        width: 100%;
    }

    .cyb-archive-hero-slide img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }

    .cyb-archive-hero-prev,
    .cyb-archive-hero-next {
        width: 34px;
        height: 34px;

        font-size: 16px;
    }

    .cyb-archive-hero-prev {
        left: 10px;
    }

    .cyb-archive-hero-next {
        right: 10px;
    }

}