/*
Theme Name: Saren Child
Description: Child theme for the Saren. Child themes are the recommended way of making modifications to a theme. <a href="http://codex.wordpress.org/Child_Themes">Read More</a>
Author: PeThemes
Author URI: http://pethemes.com
Template: saren
*/


/* =Theme customization starts here
-------------------------------------------------------------- */
/*Site Header*/
@media (max-width: 767px) {
  header .site-logo-container,
  header .action-button-container {
      width: auto;
  }
}

/* Default (desktop): show navigation, hide toggle */
.topbar-main-menu #site-navigation {
  display: block;
}
.menu--toggle {
  display: none !important;
}

/* Below 1337px: hide navigation, show toggle */
@media (max-width: 1337px) {
  .topbar-main-menu #site-navigation {
    display: none !important;
  }
  .menu--toggle {
    display: block !important;
  }
}

@media only screen and (max-width: 550px) {
    .layout--switched .header--switched .site-branding>div img.secondary__logo, .header--switched .site-branding>div img.mobile__main__logo, .layout--switched .site-branding>div img.mobile__main__logo, .site-branding>div img.mobile__secondary__logo {
        display: block !important;
    }
}

@media only screen and (max-width: 550px) {
    .site-branding>div.mobile-logo {
        width: 75px !important;
    }
}
/*End of Site Header*/

/*Homepage*/
.page-id-76 .pe--hotspot--image::before, 
.page-id-76 .pe--hotspot--image::after { 
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
}

.page-id-76 .pe--hotspot--image::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}

.page-id-76 .pe--hotspot--image::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
/*End of Homepage*/

.showcase--rotate .saren--product--image img {
	object-fit: contain;
}

.page-id-479 {
	background-color: #121212;	
}

/* Our Code */
.our-code-info .pe--infobox--title p {
	color: #EA622D;
	font-size: 20px;
}

.our-code-info .pe--infobox--content p {
	color: white;
}

.spinning-ball {
  animation: spin 3s linear infinite;
  transform-origin: center;
  display: inline-block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*End of Our Code*/

/* Custom Contact Form */
.page-id-423 {
	background-color: white;
}

.contact-form {
	width: 100%;
}

.contact-form p {
	margin-bottom: 15px !important;
}
.contact-form .form-row {
  display: flex;
  gap: 10px;
}

.contact-form .form-row div {
	flex: 1;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: #e8e8e8 !important;
  font-size: 16px;
}

.contact-form .form-row input {
  flex: 1;
}

.contact-form textarea {
  min-height: 200px;
}

.contact-form input[type="submit"] {
  background: #111;
  color: #fff;
  border: none;
  padding: 14px;
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.contact-form input[type="submit"]:hover {
  background: #333;
}

/* My Account Page */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
    
    position: relative !important;
    bottom: unset !important;
    left: unset !important;
    translate: unset !important;
    -webkit-transform: unset !important;
}

.page-id-14 .saren--account--dashboard--foot>div.user--latest--orders {
    width: 100%;
}
/* End My Account Page*/

/* Shipping & Returns */
.accordion-faq ul,
.accordion-faq ol{
	padding-left: 20px;
}


/*Gear Up*/
#product-slider .navigate-button svg {
    width:35px;
}

#product-slider .pe-slider .navigation {
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
}

/*Custom Carousel*/
.fullwidth-carousel {
  --img-width: 35vw;
  --img-height: 35vh;

  display: flex;
  gap: 20px;
  overflow: hidden; /* IMPORTANT: disable browser's native scroll */
  position: relative;
  cursor: grab;
  padding: 20px 0;
}

.fullwidth-carousel:active {
  cursor: grabbing;
}

.fullwidth-carousel .item {
  width: var(--img-width);
  height: var(--img-height);
  flex-shrink: 0;
  scroll-snap-align: start;

  background-size: cover;
  background-position: center;
  border-radius: 12px;
}

/* Shift first image */
.fullwidth-carousel .item:first-child {
  margin-left: 50px;
}

/* Responsive */
@media (max-width: 1024px) {
  .fullwidth-carousel {
    /*--img-width: 280px;*/
    --img-height: 255px;
  }
}

@media (max-width: 600px) {
  .fullwidth-carousel {
    --img-width: 450px;
    --img-height: 200px;
  }
}