.wc26-tshirt-section {
padding: 60px 20px;
background-color: #f6e3db;
font-family: system-ui, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
color: #111111;
border-radius: 15px;
}
.wc26-header {
text-align: center;
max-width: 650px;
margin: 0 auto 50px auto;
}
.wc26-badge {
display: inline-block;
background-color: #22c55e;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
padding: 5px 14px;
border-radius: 50px;
margin-bottom: 15px;
}
.wc26-header h2 {
font-size: 2.5rem;
font-weight: 900;
margin: 0 0 15px 0;
text-transform: uppercase;
letter-spacing: -0.5px;
color: #000000;
}
.wc26-header p {
font-size: 1.1rem;
line-height: 1.6;
color: #4a4a4a;
margin: 0 0 25px 0;
}
.wc26-promo-banner {
background-color: #ffffff;
border: 3px solid #000000;
border-radius: 12px;
padding: 12px 20px;
box-shadow: 4px 4px 0px #000000;
margin: 20px auto 0 auto;
display: inline-block;
max-width: 100%;
}
.wc26-promo-banner p {
margin: 0;
font-size: 1.2rem;
font-weight: 800;
color: #000000;
line-height: 1.3;
}
.wc26-promo-tag {
display: inline-block;
background-color: #22c55e;
color: #ffffff;
font-size: 10px;
font-weight: 900;
padding: 2px 8px;
border: 1.5px solid #000000;
border-radius: 4px;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.wc26-promo-price {
font-weight: 900;
color: #22c55e;
font-size: 1.4rem;
text-shadow: 1px 1px 0 #000000;
}
.wc26-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.wc26-card {
background: #ffffff;
border: 3px solid #000000;
border-radius: 16px;
overflow: hidden;
box-shadow: 0px 4px 0px #000000;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wc26-card:hover {
transform: translateY(-4px);
box-shadow: 0px 8px 0px #000000;
}
.wc26-image-container {
display: flex;
border-bottom: 3px solid #000000;
background-color: #fdfaf7;
}
.wc26-image-wrapper {
position: relative;
height: 300px;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wc26-image-wrapper:first-child {
border-right: 1.5px solid #000000;
}
.wc26-image-wrapper:last-child {
border-left: 1.5px solid #000000;
}
.wc26-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease, opacity 0.2s ease;
transform-origin: top center;
}
.wc26-card:hover .wc26-image-wrapper img {
transform: scale(1.4);
}
.wc26-info {
padding: 25px;
text-align: center;
}
.wc26-info h3 {
font-size: 1.25rem;
font-weight: 800;
margin: 0 0 15px 0;
color: #000000;
line-height: 1.3;
}
.wc26-color-selectors {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 15px;
}
.wc26-color-dot {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid #b5b5b5;
cursor: pointer;
padding: 0;
outline: none;
transition: transform 0.2s ease, border-color 0.2s ease;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.wc26-color-dot.color-white {
background-color: #ffffff;
}
.wc26-color-dot.color-black {
background-color: #111111;
border-color: #111111;
}
.wc26-color-dot.active {
transform: scale(1.2);
border: 2px solid #22c55e;
box-shadow: 0 0 0 2px #ffffff, 0px 2px 5px rgba(0,0,0,0.2);
}
.wc26-color-dot:hover {
transform: scale(1.15);
}
.wc26-price-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-bottom: 20px;
}
.wc26-price {
font-size: 1.6rem;
font-weight: 900;
color: #111111;
margin: 0;
}
.price-currency {
font-size: 1.1rem;
vertical-align: top;
margin-right: 2px;
}
.wc26-bulk-price {
display: inline-block;
font-size: 0.95rem;
font-weight: 800;
color: #22c55e;
background-color: rgba(34, 197, 94, 0.08);
padding: 3px 8px;
border-radius: 6px;
border: 1px dashed #22c55e;
}
.wc26-btn {
display: block;
background-color: #808080;
color: #ffffff;
text-align: center;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
padding: 14px 20px;
border-radius: 8px;
border: 2px solid #555555;
transition: background-color 0.2s ease, color 0.2s ease;
}
.wc26-btn:hover {
background-color: #22c55e;
border-color: #22c55e;
color: #ffffff;
}
@media (max-width: 768px) {
.wc26-header h2 { font-size: 2rem; }
.wc26-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.wc26-image-wrapper { height: 240px; }
}
document.addEventListener(“DOMContentLoaded”, function() {
const colorDots = document.querySelectorAll(‘.wc26-color-dot’);
colorDots.forEach(dot => {
dot.addEventListener(‘click’, function() {
const card = this.closest(‘.wc26-card’);
const imgWoman = card.querySelector(‘.img-woman’);
const imgMan = card.querySelector(‘.img-man’);
const btnCart = card.querySelector(‘.wc26-btn’); // Selecciona el botón de compra
// 1. Cambiar clases activas en los círculos de color
card.querySelectorAll(‘.wc26-color-dot’).forEach(d => d.classList.remove(‘active’));
this.classList.add(‘active’);
// 2. MODIFICAR LA URL DEL BOTÓN (De white a black o viceversa)
if (btnCart && btnCart.href) {
try {
const currentUrl = new URL(btnCart.href);
// Si el botón seleccionado es “Negro”, ponemos ‘black’, si no, ‘white’
const colorValue = this.title.toLowerCase() === ‘negro’ ? ‘black’ : ‘white’;
// Cambiamos el parámetro en la URL de forma segura
currentUrl.searchParams.set(‘attribute_pa_color’, colorValue);
btnCart.href = currentUrl.toString();
} catch (e) {
console.error(“Error al actualizar la URL del botón:”, e);
}
}
// 3. CAMBIAR IMÁGENES CON ANIMACIÓN
const newImgWoman = this.getAttribute(‘data-img-woman’);
const newImgMan = this.getAttribute(‘data-img-man’);
if (newImgWoman && newImgMan) {
imgWoman.style.opacity = ‘0.3’;
imgMan.style.opacity = ‘0.3’;
setTimeout(() => {
imgWoman.src = newImgWoman;
imgMan.src = newImgMan;
imgWoman.style.opacity = ‘1’;
imgMan.style.opacity = ‘1’;
}, 150);
}
});
});
});
