/* ==========================================================
   VBC Framework
   Product Archive
   Version: 1.0.0
========================================================== */

/* ==========================================================
   Shop
========================================================== */

.vbc-shop{
    padding:32px 0 100px;
    background:var(--vbc-color-background);
}

/* ==========================================================
   Header
========================================================== */

.vbc-shop__header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:32px;

    margin-bottom:36px;

}

.vbc-shop__title{

    max-width:640px;

}

.vbc-shop__help{

    display:flex;

    align-items:center;

    gap:18px;

    flex-shrink:0;

    padding:20px 24px;

    background:var(--vbc-color-surface);

    border:1px solid var(--vbc-color-border);

    border-radius:0;

    box-shadow:var(--vbc-shadow-sm);

}

.vbc-shop__help-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--vbc-color-background);

}

.vbc-shop__help-icon i{

    width:22px;

    height:22px;

    background-color:var(--vbc-color-accent);

}

.vbc-shop__help-text{

    display:flex;

    flex-direction:column;

    gap:2px;

    white-space:nowrap;

}

.vbc-shop__help-text strong{

    color:var(--vbc-color-heading);

    font-size:15px;

}

.vbc-shop__help-text span{

    color:var(--vbc-color-muted);

    font-size:13px;

}

.vbc-shop__help-cta{

    display:flex;

    align-items:center;

    justify-content:center;

    height:40px;

    padding:0 20px;

    border:1px solid var(--vbc-color-heading);

    border-radius:0;

    color:var(--vbc-color-heading);

    font-size:13px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    white-space:nowrap;

    transition:var(--vbc-transition-fast);

}

.vbc-shop__help-cta:hover{

    background:var(--vbc-color-heading);

    color:#fff;

}

@media (max-width:992px){

    .vbc-shop__header{

        flex-direction:column;

    }

    .vbc-shop__help{

        width:100%;

    }

    .vbc-shop__help-text{

        white-space:normal;

    }

}

.vbc-shop__title h1{

    margin-bottom:14px;

    font-size:54px;

    line-height:1.1;

    color:var(--vbc-color-heading);

}

.vbc-shop__title p{

    color:var(--vbc-color-body);

    font-size:18px;

    line-height:1.8;

}

/* ==========================================================
   Layout
========================================================== */

.vbc-shop__layout{

    display:block;

}

.vbc-shop__products{

    min-width:0;

}

/* ==========================================================
   WooCommerce Notices
========================================================== */

.woocommerce-notices-wrapper{

    margin-bottom:30px;

}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info{

    margin-bottom:18px;

    padding:18px 22px;

    border-radius:0;

    border:none;

}

.woocommerce-message{

    background:#edf8ef;

}

.woocommerce-info{

    background:#eef6fd;

}

.woocommerce-error{

    background:#fff2f2;

}

/* ==========================================================
   Pagination
========================================================== */

nav.woocommerce-pagination{

    margin-top:60px;

}

nav.woocommerce-pagination ul{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:0;

    padding:0;

    border:none;

}

nav.woocommerce-pagination ul li{

    list-style:none;

    border:none;

}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:0;

    border:1px solid var(--vbc-color-border);

    background:var(--vbc-color-surface);

    color:var(--vbc-color-heading);

    transition:.25s ease;

}

nav.woocommerce-pagination ul li a:hover{

    background:var(--vbc-color-primary);

    border-color:var(--vbc-color-primary);

    color:#ffffff;

}

nav.woocommerce-pagination ul li .current{

    background:var(--vbc-color-primary);

    border-color:var(--vbc-color-primary);

    color:#ffffff;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:992px){

    .vbc-shop{

        padding:50px 0 70px;

    }

}

@media (max-width:768px){

    .vbc-shop__title h1{

        font-size:40px;

    }

    .vbc-shop__title p{

        font-size:16px;

    }

}