/*!
Theme Name: Shoppable Style
Theme URI: https://bosathemes.com/shoppable-style
Author: Bosa Themes
Author URI: https://bosathemes.com
Description:  Shoppable Style is beautiful multipurpose ecommerce theme. Shoppable Style is beautiful, fast, lightweight, responsive, extremely customizable, multipurpose ecommerce theme that you can use as a foundation to build versatile sites such as marketplace, vendor, ecommerce, fashion, style product, fashion store, shop, clothes, clothing, and preferably ideal for any type of sites. Shoppable Style works perfectly with Gutenberg and the most popular page builder Elementor that can easily drag-and-drop your ideas from the interface. Shoppable Style is built with SEO, speed, and usability in mind with the multiple Header & Footer layouts, predesigned starter sites includes awesome Home & Inner Pages that is incredibly customizable and powerful enough to take a stand among the crowd. Shoppable Style is compatible with all major plugins like WooCommerce, Yoast, Contact form 7, Mailchimp for WordPress, bbPress, etc. Looking for a multipurpose ecommerce theme? Look no further! Browse the demos to see that it's the only theme you will ever need: https://demo.bosathemes.com/shoppable/style
Version: 1.0.1
Requires PHP: 5.6
Tested up to: 6.8
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: hello-shoppable
Text Domain: shoppable-style
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Shoppable Style WordPress Theme, Copyright 2025 Bosa Themes
Shoppable Style is distributed under the terms of the GNU General Public License v3

Shoppable Style is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.entry-content a {
  text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #111111;
  font-family: 'Jost', serif;
  font-weight: 500;
}
.entry-content h1 a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a,
.entry-content h5 a,
.entry-content h6 a {
  text-decoration: underline;
}
.entry-content p a,
.comment-content p a,
.entry-content li a,
.comment-content li a,
.widget p a,
.comments-area .comment-list .comment-content a {
  color: #2e92ff;
}
.entry-content p a:hover,
.entry-content p a:focus,
.comment-content p a:hover,
.comment-content p a:focus,
.entry-content li a:hover,
.entry-content li a:focus,
.comment-content li a:hover,
.comment-content li a:focus,
.widget p a:hover,
.widget p a:focus,
.comments-area .comment-list .comment-content a:hover,
.comments-area .comment-list .comment-content a:focus {
  color: #086abd;
}
.slide-item .entry-content h3 a,
.list-post .entry-content h3 a,
.grid-post .entry-content h3 a,
.single-post .entry-content h3 a {
  text-decoration: none;
}
.wp-block-quote {
  padding: 30px 30px 30px 50px;
  margin: 30px 0 30px 30px;
}

/*memorable moments*/
.section-memorable-moment-area {
  padding-bottom: 70px;
}
.section-memorable-moment-area .moment-wrapper {
  position: relative;
  margin-bottom: 15px;
  border-radius: 20px;
  min-height: 300px;
  overflow: hidden;
}
.section-memorable-moment-area .moment-wrapper:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.20);
}
.section-memorable-moment-area .moment-wrapper .featured-image {
  overflow: hidden;
  max-height: 400px;
  text-align: center;
  transition: all 0.4s;
}
.section-memorable-moment-area .moment-wrapper:hover .featured-image {
 transform: scale(1.1);
}
.section-memorable-moment-area .moment-wrapper .moment-iconbox {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 60px;
  padding: 35px;
  border-radius: 10px;
  background-color: #fff;
  transform: translateY(-50%);
  width: 400px;
}
.section-memorable-moment-area .moment-wrapper:nth-child(even) .moment-iconbox {
  left: 60px;
  right: 0;
}
.section-memorable-moment-area .moment-wrapper .moment-iconbox .entry-title {
  text-decoration: none;
  margin-bottom: 0;
}
.section-memorable-moment-area .moment-wrapper .moment-iconbox .entry-text {
  margin: 15px 0 10px;
}
@media screen and (max-width: 768px) {
  .section-memorable-moment-area .moment-wrapper .moment-iconbox {
    width: 320px;
  }
}
@media screen and (max-width: 575px) {
  .section-memorable-moment-area .moment-wrapper {
    margin-bottom: 50px;
  }
  .section-memorable-moment-area .moment-wrapper .moment-iconbox {
    position: initial;
    width: auto;
    transform: none;
    background-color: #ececec;
    border-radius: initial;
    padding: 30px 20px;
  }
  .section-memorable-moment-area .moment-wrapper .featured-image {
    max-height: auto;
  }
  .section-memorable-moment-area .moment-wrapper:before {
    display: none;
  }
}

/*comments css*/
.section-comment-area {
  padding-bottom: 70px;
}
.section-comment-area .row {
  row-gap: 70px;
}
.section-comment-area .comment-item {
  position: relative;
  padding-left: 30px;
  padding-top: 30px;
}
.section-comment-area .entry-content {
  border-radius: 10px;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 50px;
}
.comment-item .featured-image {
  border-radius: 100%;
  height: 80px;
  overflow: hidden;
  width: 80px;
  position: absolute;
  top: 00px;
  left: 00px;
  z-index: 1;
  transition: all 0.4s;
}
.comment-item:hover .featured-image {
   transform: scale(1.1);
}
.comment-item .entry-content a {
  text-decoration: none;
}
.section-comment-area .entry-text p {
  margin-bottom: 0;
}
.section-comment-area .comment-quote-icon {
  font-size: 80px;
  opacity: 0.1;
  line-height: 1;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
@media screen and (max-width: 467px) {
  .section-comment-area .entry-content {
    padding: 60px 20px 30px;
  }
  .section-comment-area .comment-item {
    padding-left: 0px;
    padding-top: 0px;
  }
  .comment-item .featured-image {
    left: 50%;
    top: 30px;
    transform: translatex(-50%);
  }
}

/* client css*/
.section-client-area {
  padding-bottom: 70px;
}
.section-client-area .client-item {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  justify-content: center;
}
.section-client-area .client-item .featured-image {
  overflow: hidden;
  border-radius: 10px;
  flex-basis: 31%;
  flex-grow: 1;
  transition: all 0.4s;
  position: relative;
}
.section-client-area .client-item .featured-image img{
  border-radius: inherit;
}
.section-client-area .client-item:hover> :not(:hover) {
  filter: blur(5px);
}
.section-client-area .client-item:hover .featured-image:not(:hover):before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.10);
  transition: all 0.4s;
}
@media screen and (max-width: 467px) {
  .section-client-area .client-item .featured-image {
    flex-basis: 100%;
  }
}
/* =========================================
   ELECTRA - BOTON INSTAGRAM NEON CARRITO
========================================= */

/* OCULTAR FINALIZAR COMPRA Y PASAR AL PAGO */
.woocommerce-cart .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout {
    display: none !important;
}

/* CONTENEDOR DEL BOTON */
.electra-instagram-container {
    width: 100%;
    margin-top: 25px;
}

/* BOTON NEON DEGRADADO */
#electraInstagramBtn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    border-radius: 50px;
    text-decoration: none;
    background: linear-gradient(270deg, #ff00cc, #ff0066, #ff00cc);
    background-size: 400% 400%;
    box-shadow: 0 0 10px #ff00cc,
                0 0 20px #ff0066,
                0 0 30px #ff00cc;
    animation: gradientMove 6s ease infinite;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* BRILLO QUE PASA */
#electraInstagramBtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: all 0.6s;
}

#electraInstagramBtn:hover::before {
    left: 100%;
}

/* HOVER + MICRO VIBRACION */
#electraInstagramBtn:hover {
    animation: gradientMove 6s ease infinite,
               neonPulse 2s infinite,
               vibrate 0.18s linear infinite;
}

/* ANIMACIONES */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes neonPulse {
    0% {
        box-shadow: 0 0 10px #ff00cc,
                    0 0 20px #ff0066,
                    0 0 30px #ff00cc;
    }
    50% {
        box-shadow: 0 0 20px #ff00cc,
                    0 0 40px #ff0066,
                    0 0 60px #ff00cc;
    }
    100% {
        box-shadow: 0 0 10px #ff00cc,
                    0 0 20px #ff0066,
                    0 0 30px #ff00cc;
    }
}

@keyframes vibrate {
    0% { transform: translate(0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(0); }
}
/* ===================================
   ELECTRA MENU FULL SCREEN PRO
=================================== */

/* CONTENEDOR PRINCIPAL DEL MENU */
.bosa-offcanvas,
.offcanvas-menu {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    background: #ffffff !important;
    padding: 80px 40px !important;
    transition: all 0.4s ease-in-out;
}

/* FONDO OSCURO CUANDO ABRE */
.bosa-overlay,
.offcanvas-overlay {
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(4px);
}

/* LISTA DEL MENU */
.bosa-offcanvas ul,
.offcanvas-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ITEMS */
.bosa-offcanvas ul li,
.offcanvas-menu ul li {
    margin-bottom: 25px;
}

/* LINKS GRANDES Y PREMIUM */
.bosa-offcanvas ul li a,
.offcanvas-menu ul li a {
    font-size: 28px !important;
    font-weight: 500 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #111 !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: inline-block;
}

/* HOVER CON EFECTO DESPLAZAMIENTO */
.bosa-offcanvas ul li a:hover,
.offcanvas-menu ul li a:hover {
    color: #ff00cc !important;
    transform: translateX(10px);
}

/* BOTON CERRAR MAS GRANDE */
.bosa-offcanvas .close-btn,
.offcanvas-menu .close-btn {
    font-size: 28px !important;
    top: 30px !important;
    right: 30px !important;
}
/* =========================================
   ELECTRA FULL SCREEN MENU PREMIUM PRO
========================================= */

/* CONTENEDOR MENU */
.bosa-offcanvas,
.offcanvas-menu {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    background: #ffffff !important;
    padding: 120px 40px 60px 40px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.5s ease-in-out;
}

/* OVERLAY OSCURO CON BLUR */
.bosa-overlay,
.offcanvas-overlay {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(6px);
}

/* LOGO CENTRADO */
.bosa-offcanvas .site-branding,
.offcanvas-menu .site-branding {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: logoFade 1.2s ease forwards;
}

/* ANIMACION LOGO */
@keyframes logoFade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* LISTA MENU */
.bosa-offcanvas ul,
.offcanvas-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

/* ITEMS */
.bosa-offcanvas ul li,
.offcanvas-menu ul li {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: itemFade 0.6s ease forwards;
}

/* ANIMACION ESCALONADA */
.bosa-offcanvas ul li:nth-child(1) { animation-delay: 0.2s; }
.bosa-offcanvas ul li:nth-child(2) { animation-delay: 0.35s; }
.bosa-offcanvas ul li:nth-child(3) { animation-delay: 0.5s; }
.bosa-offcanvas ul li:nth-child(4) { animation-delay: 0.65s; }
.bosa-offcanvas ul li:nth-child(5) { animation-delay: 0.8s; }
.bosa-offcanvas ul li:nth-child(6) { animation-delay: 0.95s; }

@keyframes itemFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* LINKS GRANDES */
.bosa-offcanvas ul li a,
.offcanvas-menu ul li a {
    font-size: 30px !important;
    font-weight: 500 !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #111 !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: inline-block;
}

/* HOVER ROSA NEON SUAVE */
.bosa-offcanvas ul li a:hover,
.offcanvas-menu ul li a:hover {
    color: #ff00cc !important;
    transform: scale(1.05);
    text-shadow: 0 0 8px #ff00cc;
}

/* BOTON CERRAR MAS ELEGANTE */
.bosa-offcanvas .close-btn,
.offcanvas-menu .close-btn {
    font-size: 28px !important;
    top: 30px !important;
    right: 30px !important;
}