/*
==================================================================
Theme Name: Montblanc
Version: 1.0
Author: Neobrand®
Author URI: https://neobrand.com
==================================================================
*/

:root {
    --black: var(--wp--preset--color--black);
    --white: var(--wp--preset--color--white);
    --grey: var(--wp--preset--color--grey);
    --lightgrey: var(--wp--preset--color--lightgrey);
    --font: var(--wp--preset--font-family--be-vietnam-pro);
    --wp--style--block-gap-horizontal: 20px;
    --wp--style--block-gap-vertical: 50px;
}

::selection {
    background-color: var(--black);
    text-shadow: none;
    color: white;
}
::placeholder {
    color: var(--black);
}

/*Estructura*/

.wp-block-post-content{
    padding-left: var(--wp--preset--spacing--60);
    padding-right: var(--wp--preset--spacing--60);
}

.wp-block-post-content > .alignfull {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    padding-left: var(--wp--preset--spacing--60);
    padding-right: var(--wp--preset--spacing--60);
}

.alignwide.is-layout-constrained > * {
    max-width: 100% !important;
}

.wp-block-post-content > .alignfull > * {
    max-width: none;
}

.wp-block-post-content > :not(.alignfull):not(.alignwide) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-post-content > .alignwide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-columns{
    padding-top: 4vw;
    padding-bottom: 2vw;
    gap: 4vw;
}

.wp-block-group,
.wp-block-columns{
    row-gap: var(--wp--preset--spacing--60);
    column-gap: var(--wp--preset--spacing--60);
}

.alignfull .alignfull {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}


/*Editor WP*/

.is-root-container .alignfull{
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*Genérico*/

.flex-icon{
    display: flex;
    gap: 5px;
    align-items: center;
}

/*Fin genérico*/


body, p, li, span {
    font-family: var(--font);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 300;
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-weight: 400;
}
h1:first-child{
    margin-top: 0 !important;
}
h1, h2{
    font-weight: 200;
    text-transform: uppercase;
}
body {
    font-size: var(--wp--preset--font-size--medium);
    background-color: white;
    color: var(--base);
    position: relative;
}
img{
    max-width: 100%;
    transition: all 400ms ease
}

/* Botones */

.wp-block-button__link,
.btn,
button.single_add_to_cart_button,
.wc-block-components-button {
    background-color: white !important;
    color: black !important;
    padding: 0.8rem 2rem !important;
    border: 1px solid black !important;
    border-radius: 0 !important;
    letter-spacing: 0.04em;
    transition: all 250ms ease;
}

.wp-block-button__link.has-base-color.has-white-background-color:hover,
.wp-block-button__link.has-primary-border-color:hover,
.btn:hover,
button.single_add_to_cart_button:hover,
.wc-block-components-button:hover{
    color: white !important;
    background-color: black !important;
    cursor: pointer !important;
    opacity: 1;
}

/* Enlaces */

a {
    color: currentColor;
    text-decoration: none;
    transition: all 250ms ease;
}
a:hover {
    opacity: 0.5;
    text-decoration: none;
}

.overflow-hidden{
    overflow: hidden;
}

/*Header*/

header {
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    justify-content: space-between;
    gap: 1px;
    box-shadow: inset 0px -10px 50px rgba(0, 0, 0, 0.2);
}

header:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
    z-index: -1;
}

header > *{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

header #menu-principal {
    display: flex;
    gap: 1px;
    margin: 0;
    padding: 0;
}

header .menu, header .menu li, header .menu a{
    display: flex;
    align-items: center;
    height: 100%;
    list-style: none;
    position: relative;
}

header .menu a{
    background-color: white;
    padding: 0 20px;
}

header .menu a:hover,
header .buttons > *:hover,
.product figure:hover img{
    opacity: 0.5;
}

header #logo {
    background-color: white;
    width: 100%;
}

header #logo-cont {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 15px;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--grey);
}

header .buttons{
    gap: 1px;
}

header .buttons > *{
    height: 100%;
    background-color: white;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

header .buttons .items {
    position: absolute;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: white;
    width: 15px;
    height: 15px;
    border-radius: 50vh;
    font-size: 11px;
    top: 10px;
    left: 25px;
}

header #btn-menu{
    display: none;
}

/*Navegación*/

.bgnav {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 600ms ease, visibility 600ms ease;
    z-index: 10;
}

body.shownav .bgnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.column {
    height: 100%;
    border-right: 1px solid black;
    padding: 80px 30px;
    width: 330px;
    overflow-x: scroll;
    position: fixed;
    top: 0;
    left: -100%;
    background-color: white;
    transition: all 400ms ease;
}

.column-1{
    z-index: 999;
}

.column-2{
    z-index: 998;
}

.column-1.show{
    left: 0;
}

.column-2.show{
    left: 330px;
}

.column .close{
    position: absolute;
    left: 30px;
    top: 25px;
    transition: all 400ms ease;
}

.column .close:hover{
    rotate: -180deg;
}

.column ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.column a{
    display: flex;
    position: relative;
}

.column ul.madres > li > a{
    background: url('images/icons/icon-flechita.svg') no-repeat center right;
}

.column ul a:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 1px;
    background-color: black;
    transition: all 200ms ease;
}

.column ul a:hover:after{
    width: 20px;
}

.column .ver-todo{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.column .hijas li > span{
    color: var(--grey);
    margin-top: 20px;
    margin-bottom: 15px;
    display: flex;
}

main{
    padding: 0;
    display: block;
    overflow: hidden;
}

body.page-template-con-cabecera main,
body.single-product main{
    margin-top: 50px;
}

body:not(.home):not(.page-template-con-cabecera):not(.single-product) main > .wp-block-post-content:first-of-type{
    margin-top: 150px;
    padding-bottom: 100px;
}

.hero{
    height: calc(100vh - 96px);
}

/*Productos*/

.favorito img{
    transition: all 150ms ease;
    transform-origin: center center;
}

.favorito:hover img{
    transform: scale(1.2);
    cursor: pointer;
}

.favorito.active .active,
.favorito.noactive .noactive{
    display: block;
}

.favorito.active .noactive,
.favorito.noactive .active{
    display: none;
}

#products{
/*    padding-top: calc(100vh / 4);*/
    padding-bottom: 100px;
}

.product-grid,
.columns-6.wp-block-post-template.is-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin: 0 auto;
    gap: 20px;
    row-gap: 60px;
}


.product-grid > *{
    width: 100%;
}

.product{
    display: flex;
    flex-direction: column;
}

.product .procontent {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product h3 a, .product .price{
    font-size: 15px;
}

.product figure, .product figure a{
    display: flex;
    width: 100%;
    margin: 0;
}

.product figure a img{
    width: 100%;
}

#products .title{
    width: 100%;
    margin-bottom: 30px;
}

#products .title h2{
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 300;
}

#products .title .breadcrumb{
    font-size: 15px;
    color: var(--grey);
    margin: 0;
}

/*Carousel*/

body .swiper-wrapper.is-layout-grid {
    display: flex !important;
    gap: 0 !important;
}

body .swiper-wrapper.is-layout-grid li {
    max-width: 350px;
}

.carousel{
    position: relative;
}

.carousel .nav_slider {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: end;
    align-items: center;
    height: 50px;
    padding-top: 25px;
}

.carousel .swiper-button-next, .carousel .swiper-button-prev {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: white;
    color: black;
    border: 1px solid black;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: all 300ms ease;
}

.carousel .swiper-button-next:hover, .carousel .swiper-button-prev:hover {
    background-color: black;
    color: white;
}

.carousel .swiper-button-next:after,
.carousel .swiper-button-prev:after{
    font-size: 18px;
    color: black;
}

.carousel .swiper-button-next:hover:after,
.carousel .swiper-button-prev:hover:after{
    color: white;
}

.carousel .swiper-button-next{
    position: relative;
}

/*Single producto*/

#single-product .stock.in-stock{
    display: none;
}

#single-product{
    padding-top: 50px;
}

#single-product .info{
    display: flex;
    gap: 25px;
}

#single-product .info .datos {
    width: 60%;
    border-right: 1px solid black;
    padding-right: 80px;
}

#single-product .info .datos .volver{
    margin-bottom: 60px;
    width: 100%;
    display: flex;
}

#single-product .info .acciones{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 25px;
}

#single-product .price{
    display: flex;
    width: 100%;
    margin-bottom: 60px;
}

#single-product .price *{
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
}

#single-product .swiper-pagination{
    bottom: 20px;
}

#single-product .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background-color: white;
    border: 1px solid black;
    opacity: 0.3;
    margin: 0 2px;
}

#single-product .swiper-pagination-bullet.swiper-pagination-bullet-active{
    opacity: 1;
}

#single-product .nota{
    font-size: var(--wp--preset--font-size--small);
    margin-top: 50px;
}

#single-product form.cart{
    display: flex;
    margin-bottom: 50px;
}

#single-product .quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

#single-product .quantity input.qty {
    margin-right: 5px;
    height: 100%;
    width: 60px;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid black;
    appearance: textfield;
}

#single-product .quantity input.qty::-webkit-outer-spin-button,
#single-product .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.paneles .panel:first-child{
    border-top: 2px solid black;
}

.paneles .panel .heading {
    border-bottom: 2px solid black;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.paneles .panel .heading span{
    color: black;
}

.paneles .panel .heading,
.paneles .panel .heading:hover span,
.paneles .panel.active .heading span{
    cursor: pointer;
    color: var(--burdeos);
}

.paneles .panel div.contenedor{
    display: none;
    padding: 20px 0;
    border-bottom: 2px solid black;
}

.paneles .panel.active .heading img{
    rotate: 90deg;
}

/*Checkout*/

.wc-block-components-form input, .wc-block-components-form select, .wc-block-components-form textarea{
    border-radius: 0 !important;
}

.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-totals-block{
    border-color: black !important;
    border-radius: 0 !important;
}

.woocommerce-cart table.wc-block-cart-items tr td:first-child{
    padding-left: 0 !important;
}

.woocommerce-cart table.wc-block-cart-items tr td:last-child{
    padding-right: 0 !important;
}

.woocommerce-cart .is-large .wc-block-components-sidebar .wc-block-components-panel,
.woocommerce-cart .is-large .wc-block-components-sidebar .wc-block-components-totals-coupon,
.woocommerce-cart .is-large .wc-block-components-sidebar .wc-block-components-totals-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*Formulario de Contacto*/

.wpcf7{
  max-width: 450px;
  position: relative;
}

.wpcf7 input:not(.wpcf7-submit),.wpcf7 textarea {
  background-color: transparent;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid black;
  width: 100%;
  font-size: 15px;
  font-weight: 300;
  color: black;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.wpcf7 .last{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.wpcf7 textarea{
  max-height: 150px;
  max-width: 100%;
}

.wpcf7 .last > p{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.wpcf7 .wpcf7-form-control-wrap{
  width: 100%;
}

.wpcf7 .wpcf7-acceptance > span{
  margin-left: 0;
}

.wpcf7 .wpcf7-acceptance > span label {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  max-width: 230px;
}

.wpcf7 .wpcf7-acceptance > span,
.wpcf7 .wpcf7-acceptance > span label a{
  font-style: italic;
  color: black;
}

.wpcf7 input[type="checkbox"]{
  width: 20px !important;
  height: 20px !important;
}

.wpcf7 input[type="submit"]:disabled{
  pointer-events: none;
  opacity: 0.5;
}

.wpcf7 .submitting > p{
  opacity: 0.2;
}

.wpcf7 .wpcf7-spinner {
  position: absolute;
  width: 20px;
  height: 20px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  margin: 0;
}

.wpcf7 .wpcf7-response-output {
  background-color: white;
  color: white;
  margin: 25px 0 0 0;
  border: none;
  padding: 15px 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}

.wpcf7 .sent .wpcf7-response-output {
    background-color: green;
    border-color: green !important;
    margin: 0;
    padding: 15px;
    border-radius: 5px;
}

.wpcf7 .invalid .wpcf7-response-output {
    background-color: #d34c4c;
    border-color: #d34c4c !important;
    margin: 0;
    padding: 15px;
    border-radius: 5px;
}

.wpcf7 .wpcf7-not-valid{
  border-color: #d34c4c !important;
}

.wpcf7 .wpcf7-not-valid-tip{
  display: none !important;
}



/*BUSCADOR*/

.lupa.open {
    background-color: #f2f2f2;
    width: 100%;
    display: flex;
    padding: 50px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
    justify-content: center;
    gap: 20px;
    height: 100%;
}
.lupa{
    display: none;
}

#iconlupa {
    width: 30px;
}

#search{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#inputsearch {
    border: 1px solid black;
    background: var(--secondary);
    border-radius: 0px;
    padding: 15px 100%;
    color: black;
}

.btn-search {
    font-family: var(--font, DM Sans);
    background-color: black;
    color: white;
    border: 1px solid var(--secondary);
    /* border-radius: 0; */
    text-transform: none;
    letter-spacing: 0.04em;
    transition: all 250ms ease;
    border-radius: 0;
    padding: 10px 50px;
    white-space: nowrap;
    border: 1px solid;
}

.btn-search:hover {
    background-color: white;
    color: black;
}

.close-bars{
    position: absolute;
    right: 25px;
}

.close-bars div {
    width: 30px;
    height: 2px;
    background-color: #000;
    margin: 6px 0;
}

.close-bars div:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.close-bars div:nth-child(2) {
    opacity: 0;
}

.close-bars div:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}


/* Estilos generales de la página de búsqueda */
.search-results {
    padding: 40px 20px;
    margin: 0 auto;
}

.search-results h2 {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
    text-align: center;
}

.resultados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Estilos para los elementos individuales */
.resultado-item {
    background-color: #fff;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.resultado-item:hover {
    transform: translateY(-5px);
}

.resultado-item a {
    color: inherit;
    text-decoration: none;
}

/* Estilos para los productos */
.producto .producto-link {
    display: block;
    text-align: center;
}

.producto .producto-imagen img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.producto .producto-imagen img:hover {
    transform: scale(1.05);
}

.producto .producto-info {
    margin-top: 15px;
}

.producto .producto-titulo {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
    text-transform: capitalize;
}

.producto .producto-precio {
    font-size: 1.2em;
    color: #e74c3c;
    font-weight: bold;
}

/* Estilos para las entradas del blog */

.resultados-noticias {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.noticia .noticia-link {
    display: block;
    text-align: left;
}

.noticia .noticia-imagen img {
    transition: transform 0.3s ease;
}

.noticia .noticia-imagen img:hover {
    transform: scale(1.05);
}

.noticia .noticia-info {
    margin-top: 15px;
}

.noticia .noticia-titulo {
    font-size: 1.4em;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.noticia .noticia-extracto {
    font-size: 1em;
    color: #777;
    line-height: 1.6;
    margin: 10px 0;
}

.cuenta.show{
    position: absolute;
    background-color: white;
    padding-top: 150px;
    position: absolute;
    display: flex;
    top: 55px;
    right: 55px;
    gap: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 10px;
    flex-direction: column;
    padding-bottom: 150px;
    padding-left: 50px;
    padding-right: 50px;
}

.cuenta{
    display: none;
}

.cuenta button{
    font-family: var(--font, DM Sans);
    background-color: black;
    color: white;
    border: 1px solid var(--secondary);
    /* border-radius: 0; */
    text-transform: none;
    letter-spacing: 0.04em;
    transition: all 250ms ease;
    border-radius: 0;
    padding: 10px 30px;
    white-space: nowrap;
    border: 1px solid;
}

.cuenta ul {
  list-style: none;
  padding: 0;
}

.cuenta ul li:before {
  content: '✓';
}

.cuenta button:hover {
    background-color: white;
    color: black;
}