/*
Theme Name: Fuerte
Theme URI: http://tudominio.com/mi-tema
Author: Fabricio Secondo
Author URI: http://fsecondo.dev
Description: Este es un tema personalizado creado desde cero.
Version: 1.0
*/


/*--------------------------------------------------------------
1. Base
--------------------------------------------------------------*/

html {
    margin-top: 0 !important;
}

body {
    font-family: 'Montserrat', sans-serif !important;
}

/*--------------------------------------------------------------
2. Utilidades
--------------------------------------------------------------*/

.bg-track {
    background-color: #393237;
}

/*--------------------------------------------------------------
3. Carousel horizontal (auto-scrolling)
--------------------------------------------------------------*/

.carousel {
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    will-change: transform;
}

.carousel > * {
    flex: 0 0 100%;
}

.card {
    width: 100%;
    color: white;
    justify-content: center;
    align-items: center;
    white-space: nowrap; /* Evita saltos de línea */
}

.group {
    display: flex;
    gap: 20px;
    padding-right: 20px;
    animation: scrolling 25s linear infinite;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/*--------------------------------------------------------------
4. Carousel táctil de productos destacados (scroll-snap)
--------------------------------------------------------------*/

/* --- Container --- */
.featured-products-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 0.5rem;

    /* Scrollbar hide */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}

.featured-products-container::-webkit-scrollbar {
    display: none;
}

/* --- Items --- */
.product-item {
 
    scroll-snap-align: start;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0 8px rgb(0 0 0 / 0.1);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 35vh);
}

.product-thumb {
    flex: 1 1 auto;
    overflow: hidden;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-info {
    padding: 1rem;
    flex-shrink: 0;
}

.product-title {
    font-size: 1.1rem;
    margin: 0;
}

.product-price {
    font-weight: 700;
    margin-top: 0.25rem;
    color: #1a202c; /* gris oscuro */
}

/*--------------------------------------------------------------
5. Neon Border (Botón animado)
--------------------------------------------------------------*/

.neon-trace {
    position: relative;
    padding: 12px 24px;
    background: black;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 8px;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 20px 50px rgba(255,255,255,0.05);
}

.neon-trace::before {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    content: '';
    width: 50%;
    background: rgba(255,255,255,0.05);
}

.neon-trace span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #2a272b, #fff);
    animation: animate1 2s linear infinite;
}

@keyframes animate1 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.neon-trace span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #2a272b, #fff);
    animation: animate2 2s linear infinite;
    animation-delay: 1s;
}

@keyframes animate2 {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

.neon-trace span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, #2a272b, #fff);
    animation: animate3 2s linear infinite;
}

@keyframes animate3 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.neon-trace span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, #2a272b, #fff);
    animation: animate4 2s linear infinite;
    animation-delay: 1s;
}

@keyframes animate4 {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
    float: left !important;
	margin-top: 10px;
}


/*--------------------------------------------------------------
6. Responsive (Desktop)
--------------------------------------------------------------*/

@media (min-width: 768px) {
    .featured-products-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        overflow: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    .product-item {
        flex: unset;
        height: calc(100vh - 15vh);
    }
	
	.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
    	float: right !important;
	}

}





.wc-variation-select-original {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.single_add_to_cart_button{
    background-color: #1a202c !important;
}

.woocommerce-product-rating{
    margin-bottom: 0 !important;
}

.price{
    color: #1a202c !important;
}

.woocommerce-variation-price del {
  font-size: 0.85em;         /* Más pequeño */
  text-decoration: line-through;
  margin-right: 0.5em;       /* Separación a la derecha */
  opacity: 0.7;              /* Opcional: más tenue */
}

.woocommerce-variation-price ins {
  text-decoration: none;     /* Quitar subrayado */
  font-weight: 700;          /* Más negrita */
  color: #000;               /* Color negro, por ejemplo */
}
/* 
.woocommerce span.onsale {
  position: absolute;
  background-color: #1a202c;
  color: white;
  font-weight: bold;
  padding: 0 10px;
  border-radius: 5px;
  z-index: 10;
} */
.onsale {
  position: absolute !important;
  background-color: #413e3e !important; /* bg-red-600 */
  color: #fff !important;
  font-size: 0.75rem !important;  /* text-xs */
  font-weight: 700 !important;    /* font-bold */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important; /* tracking-wider */
  padding: 0.25rem 0.75rem !important; /* py-1 px-3 */
  border-radius: 0.375rem !important; /* rounded */
  box-shadow: 0 10px 15px -3px rgba(206, 205, 205, 0.5), 0 4px 6px -2px rgba(206, 205, 205, 0.5) !important; /* shadow-lg */
  z-index: 10 !important;
}


.wc-block-components-order-summary-item__total-price{
    display: none;
}


.woocommerce img, .woocommerce-page img{
    height: 100% !important;
    object-fit: cover !important;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar{
    height: auto !important;
}


.wc-block-components-checkout-return-to-cart-button{
	background: transparent !important;
}
.wc-block-components-checkout-place-order-button {
	background-color: black !important;
	color: white !important;

}

.wc-block-checkout__actions_row > button.wc-block-components-checkout-place-order-button {
	background-color: black !important;
	color: white !important;
}

.woocommerce-ordering .orderby {
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db; /* Tailwind gray-300 */
  border-radius: 0.375rem;   /* Tailwind rounded-md */
  background-color: white;
  color: #1f2937;            /* Tailwind gray-800 */
  font-size: 1rem;
  appearance: none;          /* Oculta el select nativo en algunos navegadores */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 20 20' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.939l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}


.bg-footer{
	background-image: url("https://darkslategray-newt-460368.hostingersite.com/wp-content/uploads/2025/06/Tezza-4600.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 35% 15%;
}

.swatch-item.is-selected {
    border-color: black !important;
    color: black !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.current,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li[aria-selected="true"] {
    background-color: #FFE4F5;
    border-radius: 6px 6px 0 0; /* opcional para estilo pestaña */
}