body,
html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: var(--mainfont);
    font-size: var(--default-p);
    color: var(--black);
    background: var(--main-bg);
}
body.home {
     background: var(--main-bg) url(../images/bg.svg) 0% 0% / 100% auto no-repeat;
}
* {
    box-sizing: border-box;
    ::-moz-selection {
        background-color: #ffb7c5;
        color: #000;
    }

    ::selection {
        background-color: var(--kfneblue);
        color: var(--white);
    }
}

p {
    margin-top: 0;
    margin-bottom: 3rem;
}

a {
    color: var(--black);
    transition: var(--transition-all);
}
a:hover {
    color: var(--kfneblue);
}

h1 {
    font-size: 3rem;
    letter-spacing: -1pt;
}
h2 {
    font-size: 2.5rem;
    letter-spacing: -0.75pt;
}
h3 {
    font-size: 2rem;
    letter-spacing: -0.5pt;
}
h4 {
    font-size: 1.5rem;
}

/*general markup*/

main {
    width: 100%;
    height: 100%;
}

header.home {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
header.home section.top {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 2rem;
}
.mobile-menu {
    display:none;
}

header.home section.top nav.home {
    flex-grow: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}
header.home section.top .first {
    color: var(--gray);
    letter-spacing: 2pt;
    font-weight: 300;
    position: absolute;
}
header.home section.top .btnMenuMobile {
    display:none;
}

header.home nav.top-links {
    position: absolute;
    right: 2rem;
}

/*top nav*/
header.home section.top ul.nav {
    flex-direction: row;
    display: flex;
    gap: 3rem;
    margin: 0;
    padding: 0;
}
header.home section.top ul.nav li {
    list-style: none;
}

header.home section.top ul.nav a {
    color: var(--dark-gray);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 20%;
    font-size: 1rem;
    transition: all 0.25s ease;
    z-index: 11;
    position: relative;
    text-transform: uppercase;
    padding:3px 10px;
     
}
/*header.home section.top nav.home ul.nav a:after {
    display: flex;
    position: absolute;
    width: 74px;
    height: 41px;
    background: url(../images/icon-aqute.svg) 50% 50% no-repeat;
    z-index: 0;
    content: " ";
    margin-top: -174px;
    transition: all 0.25s ease;
}*/

header.home section.top ul.nav a:hover {
    /*  letter-spacing: 0;*/
    transition: all 0.25s ease;
    background-color: var(--kfneblue);
    color:var(--white);
    /*padding: 0 1rem;*/
}
/*header.home section.top nav.home ul.nav a:hover::after {
    margin-top: -25px;
    transition: all 0.25s ease;
}*/

header.home section.top nav.top-links {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 40px;
}
header.home section.top nav.top-links ul.nav {
    gap: 0;
}

header.home section.top nav.top-links ul.nav.nav-tl {
    gap: 5px;
    margin-top: -10px;
}
header.home section.top nav.top-links ul.nav.nav-tl li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    letter-spacing: 0;
    transition: var(--transition-all);
}
header.home section.top nav.top-links ul.nav.nav-tl li a:hover {
    opacity: 0.65;
}
/*override*/
li.lang-slot .trp-shortcode-switcher {
    padding: 0 !important;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    letter-spacing: 0;
    background: var(--kfneblue);
    color: var(--white);
    border-radius: 0 !important;
}
li.lang-slot .trp-language-item-name {
    font-size:1.1rem;
    font-family: var(--mainfont);
    width:40px;
    height:40px;
    display: flex;
    align-items: center;
    justify-content: center;

}

li.lang-slot .trp-shortcode-switcher .trp-current-language-item__wrapper {
    padding: 0 !important;
}
a.trp-language-item.trp-language-item__default,
span.trp-language-item-name {
    background: var(--kfneblue);
    color: var(--white);
}
.trp-language-item:hover .trp-language-item-name {
    background: var(--dark-gray) !important;
    color: var(--white) !important;
}


header.home section.top nav.top-links ul.nav.nav-tl li a.search {
    background: url(../images/icon-search.svg) 50% 50% no-repeat;
}
header.home section.top nav.top-links ul.nav.nav-tl li a.lang {
    background: var(--kfneblue);
    color: var(--white);
}
header.home section.top nav.top-links ul.nav.nav-tl li a.lang:hover {
    background: var(--dark-gray);
    opacity: 1;
}
header.home section.top nav.top-links ul.nav.nav-tl li a.myaccount {
    background: url(../images/icon-user1.svg) 50% 50% no-repeat;
}
header.home section.top nav.top-links ul.nav.nav-tl li a.saved {
    background: url(../images/icon-favs.svg) 50% 50% no-repeat;
}
header.home section.top nav.top-links ul.nav.nav-tl li a.shoppingcart {
    background: url(../images/icon-shoppingcart.svg) 50% 50% no-repeat;
}
/*breadcrumb*/

section.breadcrumb {
    width: 100%;
    max-width: var(--mainwidth);
    margin:0 auto;
}
section.breadcrumb .inner {
    width: 100%;
    margin: 0 auto;
    max-width: var(--inwidth);
}
ul.nav-breadcrumb {
    width: 100%;
    margin: 0;
    margin-bottom: 2.35rem;
    padding: 2.35rem;
    padding-bottom:0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dark-gray-border);
    flex-wrap:wrap;
}
ul.nav-breadcrumb li {
    list-style: none;
    display: flex;
    margin-bottom:2.35rem;
}
ul.nav-breadcrumb li:after {
    display: flex;
    content: "/";
    color: var(--gray);
    font-size: 1rem;
    font-weight: 300;
    width: 5rem;
    align-items: center;
    justify-content: center;
}
ul.nav-breadcrumb li:last-child::after {
    display: none;
}
ul.nav-breadcrumb li a {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 12%;
    font-weight: 600;
    color: var(--gray);
    text-decoration: none;
}
ul.nav-breadcrumb li a:hover {
    color: var(--dark-gray);
}
ul.nav-breadcrumb li.active a {
    color: var(--dark-gray);
    font-weight: 400;
}
ul.nav-breadcrumb li.active span {
    font-weight: 700 !important;
}

header.home section.head {
    width: 100%;
    max-width: var(--mainwidth);
    /* border:1px solid red; */
}

/*main*/
section.head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px);
}
section.head .kfne-jewelry {
    width: 550px;
    height: 500px;
    position: absolute;
    z-index: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    background:
        url(../images/kfne-logo-big.svg) 50% 0% / 100% auto no-repeat,
        url(../images/kfne-slogan.svg) 50% calc(100% - 50px) / 100% auto
            no-repeat;
}

section.head .products-slider {
    z-index: 2;
    position: absolute;
}

section.banner {
    width: 100%;
    margin-bottom: 200px;
}
section.banner .inner {
    width: 100%;
    margin: 0 auto;
    max-width: 1590px;
}
section.banner .inner > div {
    flex-wrap: wrap;
    display: flex;
    align-content: flex-end;
    justify-content: flex-end;
    height: 100%;
    flex-grow: 10;
}


section.collection-preview {
    position: relative;
    min-height: 600px;
    max-height: calc(100vh - 100px);
    overflow: hidden;

    background-image: url(../images/banner1.jpg);
    background-size: cover;
    background-position: center;

    margin-bottom: var(--section-margin);
}

section.collection-preview .inner {
    position: relative;
    display: block;
    /* flex-direction:column; */

    min-height: 600px;
    max-height: calc(100vh - 100px);
    background-image: url(../images/banner1.jpg);
    background-size: cover;
    background-position: center;
    width: var(--inwidth);
    /* max-width:calc(100% - 260px); */
    padding: 6rem;
    display: flex;
    flex-direction: column;
}
section.collection-preview .inbg {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Safari */
}

section.collection-preview .inner h1 {
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: -5%;
    color: var(--white);
    margin: 0;
    padding: 0;
}
section.collection-preview .inner h1 b {
    font-weight: 800;
}
section.collection-preview .inner p {
    color: var(--white);
    font-size: 2rem;
    margin: 0;
    padding: 0;
}
section.collection-preview .inner .btnContainer {
    display: flex;
    align-items: flex-end;
    justify-content: end;
    flex-grow: 10;
    height: 100%;
}
.btnBig {
    font-size: 2rem;
    color: var(--white);
    text-decoration: none;

    background: var(--dark-gray);
    letter-spacing: -5%;
    padding: 2rem 3rem;
    max-width: auto;
    transition: var(--transition-all);
}
.btnBig:hover {
    background: var(--kfneblue);
     color: var(--white);
}

/*section categories*/
section.jewelry-categories {
    width: 100%;
    max-height: 880px;
    min-height: 600px;
    height: 90vh;
}
section.jewelry-categories ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}
section.jewelry-categories ul li {
    width: 25%;
    max-width: calc(var(--inwidth) / 4);
    /* border:1px solid red; */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    background-size: cover;
    background-position: center;
}
section.jewelry-categories ul li:first-child {
    max-width: 100%;
    flex-grow: 10;
}
section.jewelry-categories ul li:last-child {
    align-items: flex-start;
    max-width: 100%;
    flex-grow: 10;
}
section.jewelry-categories ul li:last-child div.blur {
    align-items: flex-start;
}

section.jewelry-categories ul li.piercing,
section.jewelry-categories ul li.piercing a {
    background-image: url(../images/piercing-bg.jpg);
}
section.jewelry-categories ul li.earrings,
section.jewelry-categories ul li.earrings a {
    background-image: url(../images/earrings-bg.jpg);
}
section.jewelry-categories ul li.ear-cuffs,
section.jewelry-categories ul li.ear-cuffs a {
    background-image: url(../images/ear-cuffs-bg.jpg);
}
section.jewelry-categories ul li.charms,
section.jewelry-categories ul li.charms a {
    background-image: url(../images/charms-bg.jpg);
}

section.jewelry-categories ul li div.blur {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Safari */
    display: flex;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

section.jewelry-categories ul li a {
    width: 100%;
    display: flex;
    /* border:1px solid green;	 */
    aspect-ratio: 4 / 5;
    max-width: calc(var(--inwidth) / 4);
    background-size: cover;
    background-position: center;
    margin-top: 10vh;
    justify-content: flex-start;
    align-items: flex-end;
    text-decoration: none;
    transition: var(--transition-all);
}
section.jewelry-categories ul li a:hover {
    filter: brightness(1.1);
}
section.jewelry-categories ul li a span {
    font-size: 5rem;
    letter-spacing: -5%;
    color: var(--white);
    margin-bottom: -18px;
    margin-left: -5px;
}

/*kfne-photo*/
section.kfne-photo {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background: url(../images/kfne-tmp-photo.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: var(--section-margin);
}
section.kfne-photo .inner {
    width: 100%;
    height: 100%;
    max-width: var(--inwidth);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
section.kfne-photo .inner h3 {
    font-weight: 800;
    font-size: 2rem;
    line-height: 39px;
    /* identical to box height */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--light-gray);
    margin: 8vw 0 0;
    padding: 0;
}
section.kfne-photo .inner p {
    font-weight: 400;
    font-size: 2rem;
    line-height: 39px;
    /* identical to box height */
    letter-spacing: -3%;
    margin: 0;
    padding: 0;

    color: var(--light-gray);
}

/*content*/

section.content {
    width: 100%;
    max-width: var(--inwidth);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

section.content.best-sellers,
section.content.socialmedia {
    justify-content: center;
    align-items: center;
}

section.content.video {
    margin-bottom: var(--section-margin);
}

section.content h3 {
    font-size: 5rem;
    letter-spacing: -5%;
    font-weight: 900;
    margin-bottom: 0;
    margin-top: 0;
}
section.content h4 {
    font-size: 3.5rem;
    font-style: italic;
    margin: 0;
    padding: 0;
    font-weight: 300;
    margin-bottom: calc(var(--section-margin) / 2);
}

ul.product-list {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 4%;
    flex-wrap: wrap;
    margin-bottom: var(--section-margin);
}
ul.product-list li {
    list-style: none;
    display: flex;
    width: 22%;
    flex-direction: column;
    margin-bottom:4%;
}

ul.product-list li a {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
ul.product-list li a:hover .name {
    color: var(--kfneblue);
}
ul.product-list li a img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    transition: var(--transition-all);
}
ul.product-list li a:hover img {
    opacity: 0.85;
}
ul.product-list li .name {
    font-size: 1.8rem;
    letter-spacing: -5%;
    color: var(--dark-gray);
    margin: 0;
}
ul.product-list li .name b {
    font-weight: 900;
}
ul.product-list li .price {
    color: var(--gray);
    font-size: 1.2rem;
    font-weight: 600;
}

ul.insta-feed {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 6rem;
    margin-bottom: var(--section-margin);
    margin-top: calc(var(--section-margin) / 2);
    gap: 10px;
    flex-wrap: wrap;
}
ul.insta-feed li {
    width: calc(33.333% - 10px);
    list-style: none;
    display: flex;
}

ul.insta-feed li img {
    width: 100%;
}

/*inner page*/
section.content.product-details {
}

section.content.product-details .inner {
    max-width: var(--mainwidth);
    width: var(--inwidth);

    display: flex;
    flex-direction: row;
    margin-bottom: 5rem;
}
section.content.product-details .photo-contatiner {
    width: 70%;
    border: 1px solid var(--dark-gray-border);
    display: flex;
    flex-direction: row;
}
section.content.product-details .photo-contatiner ul.thumbs {
    display:flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: auto;
    height: 100%;
    border-right: 1px solid var(--dark-gray-border);
}
section.content.product-details .photo-contatiner ul.thumbs li {
    list-style: none;
    border-bottom: 1px solid var(--dark-gray-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
section.content.product-details .photo-contatiner .photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.content.product-details .description-container {
    width: 30%;
    border: 1px solid var(--dark-gray-border);
    border-left: 0;
    padding: 3rem;
    display: flex;
    flex-direction: column;
}
section.content.product-details .description-container .head {
    margin-bottom: 3rem;
}
section.content.product-details .description-container h2 {
    font-size: 2.2rem;
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 8%;
}
section.content.product-details .description-container h2 b {
    letter-spacing: 5%;
}
section.content.product-details .description-container h5.price {
    font-size: 1.5rem;
    color: var(--gray);
    margin: 0;
    padding: 0;
    font-weight: 400;
}
section.content.product-details .description-container div.description {
    font-size: 1.1rem;
    color: var(--gray);
    line-height: 1.4rem;
    margin-bottom: 2rem;
}
section.content.product-details .description-container div.select {
    margin-bottom: 2rem;
}
/*temp*/
section.content.product-details .description-container div.select ul {
    margin: 0;
}

section.content.product-details .description-container h5 {
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 600;
    margin: 0;
    padding: 0;
}
section.content.product-details .description-container .SKU {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--light-gray);
    font-weight: 500;
}
section.content.product-details .description-container .btnBlue {
    margin-bottom: 2rem;
}

.btnBlue {
    background-color: var(--kfneblue);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 500;
    outline: none;
    border: 0;
    text-transform: uppercase;
    padding: 2rem 3rem;
}

section.content.additional {
    margin-bottom: 5rem;
}

section.content.additional h3 {
    font-size: 4.5rem;
    color: var(--dark-gray);
    margin: 0;
    padding: 0;
    margin-bottom: 2.5rem;
}
section.content.additional .content {
    font-size: 1.5rem;
    color: var(--gray);
    line-height: 2.5rem;
}

section.content.additional ul {
    margin: 2rem;
    padding: 0;
}
section.content.additional ul li {
    font-size: 1.5rem;
    color: var(--gray);
    line-height: 2.5rem;
}
/*cart*/
.woocommerce table.shop_table {
    border-radius:0 !important;
}
body.woocommerce-cart section.content.single-page {

}
body.woocommerce-cart section.content.single-page div.woocommerce {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:2.5rem;
}

.woocommerce-notices-wrapper {
    width:100%;
}
form.woocommerce-cart-form {
    width:calc(70% - 1.25rem);
}
.woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals {
    width:calc(30% - 1.25rem);
    min-width:200px;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    width:100%;
}

#add_payment_method .cart-collaterals .cart_totals tr td, #add_payment_method .cart-collaterals .cart_totals tr th, .woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th, .woocommerce-checkout .cart-collaterals .cart_totals tr td, .woocommerce-checkout .cart-collaterals .cart_totals tr th {
    border:1px solid var(--dark-gray-border);
}
#add_payment_method .cart-collaterals .cart_totals table, .woocommerce-cart .cart-collaterals .cart_totals table, .woocommerce-checkout .cart-collaterals .cart_totals table {
    border-collapse: collapse;

}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
    border-radius:0 !important;
    border:1px solid var(--dark-gray-border) !important;
}
:where(.woocommerce) .select2-container .select2-dropdown, :where(.woocommerce) .select2-container .select2-selection {
    border-radius:0 !important;
}
.woocommerce ul#shipping_method li {
    margin:0;
}

#add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {
    width:80px;
}

/*checkout*/
form.woocommerce-checkout {
    display:flex;
    gap:2.5rem;
    flex-wrap:wrap;

}
.form.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
    width:100%;
}

form.woocommerce-checkout .checkout_left {
    width:calc(50% - 1.25rem);
}
form.woocommerce-checkout .checkout_right {
    width:calc(50% - 1.25rem);
}
form.woocommerce-checkout h3 {
    font-size:2.5rem;
}





.woocommerce #add_payment_method #payment,
.woocommerce .woocommerce-cart #payment,
.woocommerce .woocommerce-checkout #payment {
    background-color: var(--white);
    border-radius:0;
    border:1px solid var(--dark-gray-border);
}



/*footer*/

footer {
    width: 100%;
    display: flex;
    background: var(--gray-alternative);
    padding: 5rem;
    color: var(--gray);

    font-size: 1.2rem;
    color: var(--gray);
    line-height: 2.2rem;
}
footer .footer-inner {
    max-width: var(--inwidth);
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 10%;
}
footer .footer-inner a {
    color: var(--gray);
    transition: var(--transition-all);
}
footer .footer-inner a:hover {
    color: var(--black);
}
footer .footer-inner .column {
    display: flex;
    flex-direction: column;
}
footer .footer-inner .column.first {
    gap: 2rem;
}
footer .footer-inner .column.last {
    flex-grow: 10;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
}
footer .footer-inner .column.middle {
    flex-direction: row;
    gap: 5rem;
}
footer .footer-inner .column ul {
    margin: 0;
    padding: 0;
}
footer .footer-inner .column ul li {
    list-style: none;
}
footer .footer-inner .column.first ul.socialmedia {
    gap: 15px;
    display: flex;
}
footer .footer-inner .column.first ul.socialmedia li a.btnSocial {
    width: 24px;
    height: 24px;
    display: block;
    transition: var(--transition-all);
}
footer .footer-inner .column.first ul.socialmedia li a.btnSocial:hover {
    opacity: 0.6;
}
footer .footer-inner .column.first ul.socialmedia li .facebook {
    background: url(../images/icon-facebook.svg) 50% 50% / 100% auto no-repeat;
}
footer .footer-inner .column.first ul.socialmedia li .instagram {
    background: url(../images/icon-instagram.svg) 50% 50% / 100% auto no-repeat;
}
footer .footer-inner .column.first ul.socialmedia li .pinterest {
    background: url(../images/icon-pinterest.svg) 50% 50% / 100% auto no-repeat;
}