/*
Theme Name: Shopper Shoppable
Author: aThemeArt
Author URI: https://athemeart.com/
Theme URI: https://athemeart.com/downloads/shopper-shoppable/
Description: Shopper Shoppable is a simple, clean, and responsive child theme crafted for today’s dynamic e-commerce landscape. Built to enhance its parent theme, it offers a fresh, modern design that helps your store stand out from the crowd. With a strong focus on user experience, it's ideal for businesses selling a wide range of products—from fashion and cosmetics to tools, electronics, and home goods. Seamlessly integrated with Elementor and WooCommerce, it provides an intuitive store-building experience. Shopper Shoppable supports popular multilingual plugins, making it easy to reach a global audience. Built on the latest version of Bootstrap, it's fully responsive and ensures flawless performance across all devices. Whether you're selling boutique apparel, jewelry, perfume, pet supplies, children's toys, or barber tools, you can easily manage your store with its powerful cart system. The theme is also compatible with key plugins like WPML, Yoast, Contact Form 7, Mailchimp for WordPress, and bbPress, offering a flexible and scalable foundation for your online shop.
Template: shoper
Version: 1.0.2
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, sticky-post, custom-background, custom-header, custom-colors, custom-menu, featured-images, full-width-template, translation-ready, theme-options, threaded-comments, custom-logo, blog, e-commerce
Text Domain:shopper-shoppable
*/

:root {
  --primary-color: #6c757d;
  --secondary-color: #E88300;
  --tertiary-color: #000;
  --quaternary-color: #fff;
  --opacity: 0, 0, 0;
  --nav-color: #fff;
  --nav-h-color: #fff;
  --nav-bg: #fff;
  --nav-h-bg: #E88300;
  --nav-font: 'Comfortaa', sans-serif;
}
body {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 100%;
  line-height: 1.8;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
#review_form .comment-reply-title,
.btn,
.error-404 input.search-submit,
#content .shoper-single-post .post a.btn,
.woocommerce ul.products li.product .added_to_cart.wc-forward,
.wc-proceed-to-checkout .button,
.wc-block-cart__submit-button {
  font-family: 'Comfortaa', sans-serif;
}

/* Header */
#masthead {
  background: #362526;
  padding-bottom: 0;
}

.logo-wrap a,
.logo-wrap {
  color: #fff;
}

.logo-wrap a:hover,
.logo-wrap a:focus {
  color: var(--secondary-color);
}

#masthead #nav_bar_wrap {
  background: #482f30;
  margin-top: 40px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

#masthead .header-icon {
  margin: 0 10px 0 auto;
  padding: 0;
}

#navbar .navigation-menu li li>a,
#masthead .header-icon li li>a {
  color: #6c757d;
  font-size: 13px;
}

#nav_bar_wrap #navbar .navigation-menu>li>a {
  border-radius: 0;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
}

#navbar .navigation-menu li ul {
  z-index: 999;
}

@media only screen and (min-width: 992px) {
  #nav_bar_wrap #navbar .navigation-menu>li>a {
    padding: 22px;
  }

  #masthead #nav_bar_wrap #navbar .navigation-menu>li:first-child>a {
    border-top-left-radius: 3px;
  }

  .shoper-main-menu.navigation-menu {
    display: flex;
  }

  #masthead #navbar .navigation-menu>li {
    border-right: 1px solid #362526;
  }

  #masthead #navbar .navigation-menu>li:last-child {
    border-right: none;
  }
}

@media only screen and (max-width: 992px) {
  #masthead .header-icon {
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    padding: 10px 0;
  }

  #navbar.active {
    z-index: 9999;
  }

  #navbar {
    background: #482f30;
  }

  #masthead #navbar ul ul {
    background: #fff;
  }

  #masthead .logo-wrap {
    display: flex;
    align-items: center !important;
    width: 100%;
  }
}

/* Footer */
#colophon.site-footer {
  background: #362526;
  color: #fff;
}

#colophon.site-footer a,
#colophon.site-footer,
#colophon.site-footer .dev_info {
  color: #fff;
}

#colophon.site-footer .site_info {
  background: #291c1d;
  padding-top: 30px;
  padding-bottom: 30px;
}

#colophon.site-footer .dev_info {
  font-size: 0.8rem;
}

#colophon.site-footer li {
  border-bottom: none;
}

#colophon.site-footer .site_info a {
  color: var(--secondary-color);
}

#colophon.site-footer .site_info a:hover,
#colophon.site-footer .site_info a:focus {
  text-decoration: underline;
}

/* Search Modal */
.search-bar-modal,
.emart-myacount-bar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: none;
  opacity: 0;
  visibility: visible;
  background: rgba(0, 0, 0, 0.1);
}

.search-bar-modal-inner,
.emart-myacount-modal-inner {
  position: fixed;
  max-width: 550px;
  top: 30%;
  left: 50%;
  background: #fff;
  padding: 30px;
  z-index: 9999;
  text-align: center;
  box-shadow: 0 16px 55px -20px #cbdade;
  transform: translate(-50%, -50%);
  width: 100%;
}

.search-bar-modal-inner label {
  display: block;
}

.search-bar-modal-inner form.search-form {
  position: relative;
}

.search-bar-modal-inner form.search-form input[type="search"] {
  margin-bottom: 0;
  min-height: 44px;
}

.search-bar-modal-inner form.search-form .search-submit {
  position: absolute;
  right: 0;
  top: 0;
}

.search-bar-modal-inner button {
  margin-top: 20px;
  margin-bottom: 0;
}

.search-bar-modal.active,
.emart-myacount-bar-modal.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Block Styles */
h2.wp-block-heading {
  text-align: center;
  display: block;
  margin-bottom: 1.5rem;
  background: url(assets/image/greyline.png) center center repeat-x;
  font-size: 20px;
}

h2.wp-block-heading span {
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  background: var(--secondary-color);
}

.wp-block-search .wp-block-search__label {
  display: none;
}

.wp-block-search .wp-block-search__inside-wrapper input[type="search"] {
  margin-right: 0;
  border-radius: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button {
  margin-left: 0;
  border-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  height: 48px;
  padding: 0px 20px;
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus,
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover{
  background: none;
  color: var(--secondary-color);
}
#secondary .wp-block-latest-comments {
  padding-left: 0;
}

#secondary .wp-block-latest-comments a {
  display: inline !important;
}

/* Post/Content */
#content .shoper-single-post .img-box figure.entry-audio {
  display: flex;
  align-items: center;
  min-height: 120px;
  border: 1px solid #000;
}

#content .img-box .mejs-audio {
  margin-bottom: 30px;
}

#content .img-box figure.entry-audio .mejs-audio {
  margin-bottom: 0;
}

#content .img-box .icofont-audio {
  display: none;
}

#content .img-box figure.entry-audio .icofont-audio {
  display: inline-block;
}

body.single-post #content .content-wrap {
  padding: 0;
}

.wc-block-components-product-metadata {
  clear: both;
}

.shopper-shoppable-pagination .nav-links {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.shopper-shoppable-pagination ul.page-numbers {
  display: flex;
  list-style: none;
  gap: 5px;
}

.shopper-shoppable-pagination ul.page-numbers a,
.shopper-shoppable-pagination ul.page-numbers span {
  margin: 0;
  text-decoration: none !important;
  padding: 15px 18px;
  line-height: 1;
  font-size: 1rem;
  font-weight: 400;
  min-width: 1em;
  display: block;
  border: 1px solid var(--secondary-color);
  background: var(--quaternary-color);
  color: var(--secondary-color);
  border-radius: 3px;
}

.shopper-shoppable-pagination ul.page-numbers a:hover,
.shopper-shoppable-pagination ul.page-numbers a:focus,
.shopper-shoppable-pagination ul.page-numbers span.current {
  background: var(--secondary-color);
  color: #fff;
}

#content .shoper-single-post .post {
  box-shadow: 0 0 50px 0 rgba(74, 74, 74, 0.1);
}

/* Hero & Slider */
#homepage-slider .widget_block,
#homepage-slider .widget_block figure {
  padding: 0 !important;
  width: 100%;
  text-align: center;
  margin: 0;
}

#static_header_banner {
  z-index: -1;
}

#static_header_banner.homer-banner {
  position: relative;
  height: 70vh;
}

#static_header_banner.homer-banner .svg.wavy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
}

#static_header_banner.homer-banner .content-text {
  padding-bottom: 120px;
}

#static_header_banner ul.post-meta {
  display: flex;
  margin: 0 auto;
  color: #fff;
  list-style: none;
  gap: 10px;
  align-items: center;
  text-align: center;
  justify-content: center;
}

#static_header_banner ul.post-meta a {
  color: #fff;
  text-decoration: underline;
}

#static_header_banner ul.post-meta a:hover,
#static_header_banner ul.post-meta a:focus {
  color: var(--secondary-color);
  text-decoration: none;
}

body.home #content {
  padding-top: 40px;
}

@media only screen and (max-width: 992px) {
  #static_header_banner.homer-banner {
    height: auto;
    min-height: 30vh;
  }

  #static_header_banner ul.post-meta {
    padding-bottom: 30px;
  }
}