
/* HEADER */

.basic-navigation {width: 100%;}
.basic-top-nav li {display:inline-block}
.basic-top-nav a {color:#222; text-decoration: none; display: block; }

.basic-top-nav {border-bottom: 1px solid #eee; padding-top: 20px}
.basic-top-nav li {font-size: 12px;}
.basic-top-nav li a {padding: 5px 20px 20px 0 }

.basic-main-nav {}
.basic-main-nav ul {list-style:none}
.basic-main-nav li {font-size:16px; padding:0}
.basic-main-nav li a {}


/* Search */


.show-search { position: absolute; display: none; width: 100%; left: 0; top: 136px; border-top: 1px solid #ee3034; background: #fff;}
.show-search input[type="text"] {width: 100%; background: #fff; color:#222; padding: 20px; border:none; outline:none; font-family: 'graphik-regular'; box-sizing: border-box; border-bottom: 1px solid #e6e4e1;}
.show-search button {position: absolute; right: 0; top: 0; margin: 0; padding: 0; background: url(/img/search.svg); border: none; z-index: 9999;background-size: 24px; background-position: center; background-repeat: no-repeat; height: 55px; width: 55px; outline:none}
.show-search button:after {display:none;}
.show-search button:hover {background: url(/img/search.svg); background-size: 24px; background-position: center; background-repeat: no-repeat;}

#product-suggestions-rows {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));grid-gap: 30px;padding: 0 50px;}
#product-suggestions-rows .product-li {margin-top: 30px;}
#product-suggestions-rows .product-li a {background: #fff;box-sizing: border-box;text-decoration: none;width: 100%;display: block; position: relative;}
#product-suggestions-rows .product-li a .col-3{background: #f2f2f1;height: 350px;position: relative;}
#product-suggestions-rows .product-li a .col-3 img {mix-blend-mode: multiply;width: 100%;height: 100%;object-fit: contain;padding: 25px;box-sizing: border-box;}
#product-suggestions-rows h3 {color: #2f3335;line-height: 1.5; font-size: 15px; margin: 10px 0;}
#product-suggestions-rows p {font-size: 13px; color: #2f3335; line-height: 1.5; margin-bottom: 10px;}

#product-suggestions-rows .product-li a::after {content: ""; display: block; position: absolute; right: -15px; height: 100%; width: 1px; background: #f2f2f1; top: 0px;}
#product-suggestions-rows .product-li:last-child a::after,#product-suggestions-rows .product-li:nth-child(5n+5) a::after {display: none;}

.product-suggestions .view-all {width: 100%;background: #fff;display: block;text-align: center;text-decoration: none;color: #000;padding: 30px 0;box-shadow: 0 27px 36px -36px #000; cursor: pointer; border-top: 1px solid #f2f2f1;}



/* FOOTER */



/* BASE STYLES */


/* BANNER */



/* CONTENT */


.basic-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 30px; margin: 30px 0;
}
p small { font-size: 13px;  line-height: 1.5;  display: block;}



/* PRODUCTS SELECTION */

#product-container {max-width: 1280px; margin:0 auto}


.basic-grid .basic-item.category-item { grid-column: auto / span 1; max-width:100% }
.basic-grid .basic-item.category-item figure {height: 480px;}

.basic-grid .basic-item {max-width: 420px}

.basic-grid.featured .basic-item {max-width:none}

.basic-grid .basic-item.category-item img {max-width:100%; position: absolute; object-fit:cover; width: 100%; height: 100%; display:block !important; opacity:1 !important}
.basic-grid .basic-item.category-item .basic-price {font-size: 13px; opacity:0.8}

.basic-grid .basic-item {position:relative}
.basic-grid .basic-item a {color:inherit; text-decoration: none;}
.basic-grid .basic-item figure {height:380px; display: flex; align-items: center; position: relative; background:#f2f2f1;}
.basic-grid.featured .basic-item figure {height:500px; display: flex; align-items: center; position: relative; background:#f2f2f1;}
.basic-grid .basic-item img {mix-blend-mode: multiply; max-width: 90%; margin:0 auto;}
.basic-grid .basic-item article {background:#fff; width:100%; padding-top: 20px; position:relative }
.basic-grid .basic-item article p {font-size: 15px;}
.basic-title {line-height:21px; max-width: 80%}
.basic-price {}
.basic-price .was {color:#999}
.basic-sale {color:#f32b33;}
.basic-option {position:absolute; bottom:20px; right:20px; display: block; z-index: 999; color:#636466; font-size: 12px; }

.basic-grid .basic-item img:nth-child(2) { display:none; opacity: 0;}
.basic-grid .basic-item a:hover img:nth-child(1) {  opacity: 0; display:none;}
.basic-grid .basic-item a:hover img:nth-child(2) {  opacity: 1; display:block}

.flex-start {justify-content: flex-start; display:flex; flex-wrap:wrap; align-items:flex-start}

.basic-product-block .basic-option { display: inline-block; background: #fff; border:1px solid #636466; color: #636466;  font-size: 10px !important;
    line-height: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px;
    margin-bottom: 12px; margin-left: 10px;

}

.sale-tag {position: absolute; top: 10px; left: 10px; padding: 10px 15px; text-align: center; width: auto; background: #f32b33; display:block; z-index: 999; color:#fff; font-size:13px;}

.basic-category-block .button {margin-top: 25px}
.basic-category-block .basic-grid {margin:0}

.basic-category-block .content-block article h1 {margin: 0 0 40px 0}

/* PRODUCT PAGE */

.basic-product-block .basic-grid { grid-template-columns: 60% 40%; align-items: flex-start;}
.basic-product-block img {mix-blend-mode: multiply; max-width: 90%; margin:0 auto;}
.product-images.basic-grid {grid-template-columns: 50% 50%;}
.product-images.basic-grid figure {padding: 50px 0;}
.basic-product-block .large img {max-height: 700px;}
.basic-product-block article {padding: 50px 0}
.basic-product-block .content-block article h3 {font-size: 16px; padding-top:10px}
.basic-product-block .content-block article h2 {font-size: 36px; line-height: 44px; margin: 15px 0}
.basic-product-block .content-block article p {color:#2f3335}
.basic-product-block .sticky {position: sticky; top:0}
.basic-product-block .basic-price {font-size: 21px; }



.modal .product-images.basic-grid {height:100%; min-height: 40vw}
.modal .product-images.basic-grid figure { padding: 0; height: 100%; display: flex; align-content: center;  align-items: center;}
.modal .product-images.basic-grid figure img {mix-blend-mode:multiply;}
.modal .basic-product-block .large img {max-height:none}
.modal .swiper, .modal swiper-container {mix-blend-mode:multiply; display: flex; align-items: center;  height: 100%;}
.modal .basic-product-block img {width:100%}
.modal swiper-slide {display:flex; align-items: center}
.modal .basic-product-block .content-block article p {font-size: 14px; margin-top:0; line-height: 22px;}

.basic-product-block .content-block article h1 {margin: 20px 0 20px;}

.accord-title {border-bottom:1px solid #ccc; padding: 15px 0}
.accord-text {background:#fff; padding:20px 0; border-bottom:1px solid #ccc;}
.accord-text ul {}
.accord-text ul li {display: block; line-height: 24px; margin: 15px 0; position: relative; padding-left: 25px}
.accord-text ul li:before {content:'—'; position: absolute; left: 0; color:#999}
.content-block article .accord-text h5 {font-size: 12px; margin:10px 0 !important; line-height: 18px;  font-family: 'Graphik';}


.accordionjs {border-top: 1px solid #ccc; margin-top: 30px;}
.accordionjs .acc_section .acc_head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #626365; /* Adjust the color as needed */
}

.accordionjs .acc_section.acc_active .acc_head::after {
  transform: translateY(-50%) rotate(90deg);
}

.add-to-cart-wrapper { margin: 10px 0 10px 0; display: block;}

.custom-select {position: relative; margin: 10px 0}
.custom-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width:100%;
    background: url(../img/down.svg) no-repeat 96% 24px; background-size: 15px; border:1px solid #ccc;
    padding: 15px; font-family: 'Graphik'; font-size: 16px;border-radius: 1px; }

.add-to-cart {display: flex; justify-content: space-between;}
.add-to-cart input {width:15%; text-align: center; border: 1px solid #ccc;   font-size: 18px; border-radius: 2px;}
.add-to-cart .button {font-size:18px; font-weight: normal;   padding: 18px 0; width:100%; cursor: pointer;}
.add-to-cart .button:after {display:none}

.stock-box {padding: 15px 0 0px 0; line-height: 23px;  font-size: 14px;}
.stock-box strong {  font-weight:normal}
.stock-box #availalbilityContainer.outofstock {color: #f32b33;}
.stock-box #availalbilityContainer.instock {color:#41a85f;  }
.stock-box #availalbilityContainer.lowstock {color:darkorange;  }

#outOfStockMessage.custom_stock_message { display: inline-block; background: #fff; border: 1px solid #636466; color: #636466; font-size: 10px !important; line-height: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 6px; margin-bottom: 12px; margin-left: 0px;   }

.stock-box #availalbilityContainer span {font-weight:500; color:#222}
#outOfStockMessage {color: #f32b33; }
.custom_stock_message {margin-top: 10px; display: block}

.back-page-comment {border: 1px solid #d6d6d3; padding: 10px; font-size: 15px; border-radius: 2px; background:#fafafa}

.basic-product-block button.button-link {margin-top: 0; margin-bottom:20px; padding:0;}


/* FORMS */


.form-field {margin: 10px 0;}
.form-field label {display:block; padding: 8px 0;}
.form-field input {border: 1px solid #222; padding: 12px 0; text-indent: 12px;  font-family: 'graphik-regular'; font-size: 16px; line-height: 16px; background:transparent; display: block; width: 100%; box-sizing: border-box;}
.order-review {margin: 20px 0;}




/* FLEX */

.flex-row {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: space-between;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-content: stretch;
}

.flex-row.top {
    align-items: flex-start !important;
}

.flex {
    display: flex;
    align-items: flex-start | flex-end | center | baseline;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-plain {
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.columns-2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-end;
    align-content: flex-end;
    align-self: flex-start;
}

.flex-row.stretch {
    display: flex;
    align-items: flex-start | flex-end | center | baseline | stretch;
    flex-wrap: wrap;
    justify-content: center;
}
