/*
Theme Name: Candeller
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Candeller is a candle shop ecommerce Bootstrap 5 website template by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:
1. VARIABLES
2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.3 Background Color
  2.4 Section
    - Section Paddings
    - Section Margins
  2.5 Buttons
  2.6 Forms
3. SITE STRUCTURE
  3.1 Header
  3.2 Billboard
  3.3 Services
  3.4 Video
  3.5 Footer
4. PAGES
  4.1 About Us Page
  4.2 Shop Page
  4.3 Single Product Page
  4.4 Cart Page
  4.5 Blog Page
  4.6 Single Post Page
    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --accent-color:             #DCC69D;
  --black-color:              #2E2E2E;
  --light-dark:               #36332F;
  --gray-color:               #FDFDFC;
  --gray-color-300:           #F7F7F7;
  --gray-color-400:           #EFEFEF;
  --gray-color-500:           #d1d1d1;
  --gray-color-600:           #999999;
  --gray-color-800:           #3A3A3A;
  --light-gray-color:         #D7DDDF;
  --primary-color:            #DCC69D;
  --bs-primary-rgb:           220,198,157;
  --light-color:              #FFF;
  --dark-color:               #212529;
  --light-blue-color:         #EDF1F3;
  --navbar-color-color:       #131814;
  --swiper-theme-color:       #4A4A4A;
  --swiper-pagination-color:  #4A4A4A;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
        --header-height : 100px;
        --header-height-min : 80px;
    }
}

/* Fonts */
:root {
    --body-font           : "Jost", sans-serif;
    --heading-font        : "Cormorant", serif;
}

/*----------------------------------------------*/
/* 2. GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  box-sizing: border-box;
}
body {
  background-color: var(--gray-color);
  font-family: var(--body-font);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font);
  text-transform: uppercase;
  color: var(--black-color);
  letter-spacing: 0.96px;
}
h1{
  font-size: 5rem;
}
h2{
  font-size: 4rem;
}
h3{
  font-size: 2.625rem;
  line-height: 127%;
}
h4{
  font-size: 1.75rem;
  line-height: 127%;
}
h5{
  font-size: 1.5rem;
}
p {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--light-dark);
}
ul {
  color: var(--light-dark);
}
ul.inner-list li {
  font-size: 1.2em;
}
a {
  color: var(--dark-color);
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1.7px;
  transition: 0.3s color ease-out;
}
a.light {
  color: var(--light-color);
}
a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

.fs-1{
  font-size: 1.75rem !important;
}
.fs-2{
  font-size: 1.625rem !important;
}
.fs-3{
  font-size: 1.375rem !important;
}
.fs-4{
  font-size: 1.25rem !important;
}
.fs-5{
  font-size: 1.125rem !important;
}
.fs-6{
  font-size: 0.875rem !important;
}

/* 2.3 Background Color
/*----------------------------------------------*/
.bg-gray {
  background: var(--gray-color);
}
.bg-dark {
  background: var(--dark-color);
}
.bg-light {
  background: var(--light-color);
}

/* 2.3 Shadow
/*----------------------------------------------*/
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.05)!important;
}

@media (min-width: 1600px){
  .container {
    max-width: 1540px;
  }
}

/* 2.4 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}
.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}
.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}
.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-xlarge {
  margin-top: 9.5em;
  margin-bottom: 9.5em;
}

/** 2.5 Buttons
--------------------------------------------------------------*/
button{
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1.7px;
  transition: 0.3s color ease-out;
}
.btn {
  border: solid 1px var(--black-color);
  padding: 6px 30px;
  border-radius: 0;
  transition: 0.3s ease-in;
}
.btn:hover {
  color: var(--accent-color);
  background-color: var(--dark-color);
}
.btn:focus {
  box-shadow: none;
}

/* Filters Buttons */
#filters .btn{
  border: solid 1px var(--gray-color-500);
}
#filters .btn:hover {
  color: var(--dark-color);
  border: solid 1px var(--black-color);
  background: none;
}
#filters .btn:hover {
  color: var(--dark-color);
  border: solid 1px var(--black-color);
  background: none;
}
#filters .btn.is-checked{  
  border: solid 1px var(--black-color);
}

/* Dark Buttons */
.btn-dark{
  color: var(--light-color);
  padding: 10px 22px;
  border: 0;
  transition: 0.3s ease;
}
.btn-dark:hover{
  background-color: var(--primary-color);
  color: var(--light-color);
  border: 0;
}

/* Primary Buttons */
.btn-primary{
  background-color: var(--primary-color);
  color: var(--light-color);
  padding: 10px 22px;
  border: 0;
  transition: 0.3s ease;
}
.btn-primary:hover{
  background-color: var(--black-color);
  color: var(--light-color);
  border: 0;
}

.form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: none;
}
.form-check-input:focus {
    border-color: var(--accent-color);
    outline: 0;
    box-shadow: none;
}

/** 2.6 Forms
--------------------------------------------------------------*/
label{
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
textarea,
select,
input{
  padding: 8px 0;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-image: initial;
  border-bottom: 1px solid var(--black-color);
  outline: none;
}
.form-control {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
  color: var(--black-color);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.form-control::placeholder {
  color: var(--gray-color-600);
}
.form-control:focus {
  background: none;
  box-shadow: none;
}

/* - Image Hover Effects
------------------------------------------------------------- */
.zoom-effect {
  background-color: #f5f3ef;
  overflow: hidden;
}
img.zoom-in {  
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}
.zoom-effect:hover img.zoom-in {
  opacity: 0.8;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Link Effect
 - Place anywhere you want your link to animate
 - Add data-after="Any text" to the link within the class
 - Use span within the anchor tag for the effect to work
------------------------------------------------------------- */
.link-effect a {
  position: relative;
  padding: 0;
  overflow: hidden;
  transition: 0.2s ease-in;
  display: block;
}
.link-effect a::after {
 content: attr(data-after);
 display: inline-block;
 transform: translateY(100%);
 position: absolute;
 left: 0;
 right: 0;
 text-align: inherit;
 transition: inherit;
}
.link-effect a > span {
 display: inline-block;
 transform: translateY(0%);
 transition: inherit;
}
.link-effect:hover a > span {
 transform: translateY(-100%);
}
.link-effect:hover a::after {
 transform: translateY(0%);
}

/* - Preloader
------------------------------------------------------------- */
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#preloader.hide-preloader {
  opacity: 0;
  visibility: hidden;
}
#loader {
  position: relative;
  left: -9999px;
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: 9999px 0 0 0 var(--accent-color);
  animation: loader 2s infinite linear;
  animation-delay: 0.2s;
}
#loader::before, #loader::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
#loader::before {
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  animation: loader-before 2s infinite linear;
  animation-delay: 0s;
}
#loader::after {
  width: 24px;
  height: 24px;
  border-radius: 90px;
  background-color: var(--accent-color);
  color: var(--accent-color);
  animation: loader-after 2s infinite linear;
  animation-delay: 0.3s;
}

@keyframes loader {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9999px 0 0 0 var(--accent-color);
  }
  100% {
    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
  }
}
@keyframes loader-before {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9984px 0 0 0 var(--accent-color);
  }
  100% {
    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
  }
}
@keyframes loader-after {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%, 50%, 75% {
    box-shadow: 10014px 0 0 0 var(--accent-color);
  }
  100% {
    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

/* - Swiper arrows
------------------------------------------------------------- */
.swiper-buttons .swiper-prev,
.swiper-buttons .swiper-next{
  color: var(--black-color);
  border: none;
  background: none;
  transition: 0.3s ease;
}
.swiper-prev.swiper-button-disabled,
.swiper-next.swiper-button-disabled{
  color: var(--gray-color-500);
  background: none;
}

.swiper-buttons span{
  color: var(--gray-color-500);
}

/*----------------------------------------------*/
/* 3. SITE STRUCTURE */
/*----------------------------------------------*/

/* 3.1 Header
/*----------------------------------------------*/
/* - Search Bar
------------------------------------------------------------- */
#search-bar {
  position: relative;
}
#search-bar input[type="text"] {
  color: var(--dark-gray-color);
  height: 40px;
  display: inline-block;
  border: none;
  outline: none;
  padding-right: 74px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
#search-bar input[type="text"]:focus:hover {
  border-bottom: 1px solid var(--black-color);
}
#search-bar input[type="text"]:focus {
  width: 200px;
  z-index: 1;
  border-bottom: 1px solid var(--black-color);
  cursor: text;
}
#search-bar button {
  background: transparent;
  border: none;
}

/* cart dropdown */
.cart-dropdown .dropdown-menu {
  min-width: 21rem;
}
@media only screen and (max-width: 564px) {
  .cart-dropdown .dropdown-menu {
    min-width: fit-content;
  }
}

.nav-link{
  color: var(--black-color);
  font-weight: 400;
  text-transform: uppercase;
}
.nav-link.active{
  color: var(--accent-color);
}
.nav-link:focus, .nav-link:hover {
  color: var(--accent-color);
}
.nav-link.dropdown-toggle::after{
  display: none;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
  color: var(--black-color);
  background-color: var(--gray-color-400);
}

/* 3.2 Billboard
/*----------------------------------------------*/
.swiper-slide .banner-content{
  max-height: fit-content;
  margin: auto;
  margin-left: 10%;
  padding: 6%;
}
#billboard .main-slider-pagination {
  z-index: 999;
  bottom: 62px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  background-color: var(--light-color);
  opacity: 0.5;
  width: 18px;
  height: 18px;
  margin: 0 13px !important;
  transition: 0.3s ease;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--light-color);
  opacity: 1;
}

/* 3.3 Services
/*----------------------------------------------*/
.icon-box-icon{
  width: fit-content;
  height: fit-content;
  padding: 25px;
}

/* 3.4 Video
/*----------------------------------------------*/

/* overide */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}
.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}

/* 3.5 Footer
/*----------------------------------------------*/
/*------------ Social Icon -----------*/
.social-links svg {
  width: 20px;
  height: 20px;
  color: var(--gray-color-500);
  transition: 0.3s ease;
}
.social-links svg:hover {
  color: var(--primary-color);
}
.social-links li {
  padding-right: 30px;
}
#footer-bottom a{
  letter-spacing: normal;
}

/* 4. PAGES
/*----------------------------------------------*/

/* 4.1 About Us Page
/*----------------------------------------------*/

/* BreadCrumbs */
.breadcrumbs a{
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: normal;
}

/* Newsletter */
#newsletter .form-control{
  font-size: inherit;
}
#newsletter form input{
  background: none;
}
#newsletter form input:focus{
  box-shadow: none;
}

/* 4.2 Shop Page
--------------------------------------------------------------*/
/* ----------- SideBar -----------*/
.sidebar input.search-field {
  background: none;
  border: none;
  outline: none;
  outline-offset: 0;
}
h5.widget-title {
  font-size: 1.4em;
  margin-bottom: 15px;
}
@media only screen and (max-width: 991px) {
  .widget-search-bar form {
    flex-wrap: wrap;
  }
}

/* ----------- Pagination -----------*/
.paging-navigation .pagination .page-numbers {
  color: var(--gray-color-500);
}
.paging-navigation .pagination .page-numbers:hover,
.paging-navigation .pagination .page-numbers.current {
  color: var(--primary-color);
}

/* 4.3 Single Product Page
/*----------------------------------------------*/
/*---- Single Product Image ----------*/
.single-product .large-swiper{
  padding-left: 0;
}
.product-preview .swiper-slide {
  height: fit-content;
  padding-bottom: 10px;
  transition: cubic-bezier(0.22, 0.78, 0.71, 1.01);
}
.swiper-slide-thumb-active img{
  border: 1px solid var(--accent-color);
}

/*---- Single Product Information ----------*/
.product-info del{
  color: var(--gray-color-500);
}
.product-info hr{
  color: var(--gray-color-500);
}
.rating-container .rating {
  display: flex;
  padding-right: 4px;
  color: var(--black-color);
}
.product-info .product-price strong {
  font-size: 1.6em;
  padding-right: 10px;
}
.product-info .select-item{
  margin-right: 8px;
}
.input-group{
  padding: 6px;
  background-color: var(--gray-color-400);
}
.input-group button{
  border: none;
}

/*---- Product Tabs ----------*/
.nav-tabs {
  border-bottom: 1px solid var(--black-color);
}
.nav-tabs .nav-link {
  color: var(--black-color);
  font-weight: 600;
}
.nav-tabs .nav-link:focus{
  box-shadow: none;
}
.nav-tabs .nav-link {
  background: none;
  border: none;
}
.nav-tabs button.nav-link.active {
  color: var(--primary-color);
  background: none;
}
.nav-tabs button.nav-link:hover {
  color: var(--primary-color);
}
.tabs-listing .tab-content {
  border-bottom: 1px solid var(--black-color);
  padding: 40px 0;
}
.product-tabs .review-item{
  width: 50%;
  margin-bottom: 20px;
}
.product-tabs .review-item .image-holder{
  margin-right: 10px;
}
@media screen and (max-width: 991px) {
  .product-tabs .review-item{
    width: 100%;
    flex-wrap: wrap;
  }
  .product-tabs .review-item .image-holder{
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 991px) {
  .cart-header{
    display: none;
  }
}

/* 4.4 Cart Page
-----------------------------------------------------*/
.shopify-cart .table th {
    width: 36%;
}
.table>:not(caption)>*>*{
  padding: 1.5rem;
}
.shopify-cart .cart-product-detail{
  min-width: 250px;
}
@media screen and (max-width: 775px) {
  .shopify-cart .table thead{
    display: none;
  }
  .shopify-cart .table tbody{
    border: none;
  }
  .shopify-cart .table tbody td{
    display: block;
  }
  .table>:not(caption)>*>*{
    padding: 1rem;
  }
}

/* 4.5 Blog Page
--------------------------------------------------------------*/
/*------------ Sidebar -----------*/
.widget.sidebar-recent-post .card-image{
  max-width: 120px;
}
.sidebar-post-item h4.card-title {
  font-size: 1.2em;
}

/* 4.6 Single Post Page
--------------------------------------------------------------*/
#single-post-navigation .post-navigation span.page-nav-title {
  font-size: 1.5em;
}
.post-navigation svg {
  width: 30px;
  height: 45px;
}
.post-navigation:hover svg,
.post-navigation:focus svg {
  fill: var(--primary-color);
}