@import "../../../css/custom.css";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

/* Global overrides from kyk for consistency */
img { height: revert-layer; max-width: inherit; }
* { color: #000; }

:root {
    --ar-primary: #86010f;
    --ar-primary-rgb: 134, 1, 15;
    --ar-secondary: #eba3b1;
    --ar-secondary-rgb: 235, 163, 177;
    --ar-accent: #f8f1f2;
    --ar-link-color: #86010f;
    --ar-link-hover-color: #eba3b1;
}

/* Explicit Override of primary colors to remove template defaults (NO VERDE) */
.text-primary, i.text-primary { color: var(--ar-primary) !important; }
.bg-primary { background-color: var(--ar-primary) !important; }
.btn-primary { 
    background-color: var(--ar-primary) !important; 
    border-color: var(--ar-primary) !important; 
    color: #fff !important;
}
.btn-primary:hover {
    background-color: #6a000c !important;
    border-color: #6a000c !important;
}
.btn-outline-primary {
    color: var(--ar-primary) !important;
    border-color: var(--ar-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--ar-primary) !important;
    color: #fff !important;
}

body { padding-top: 144px; background-color: #fff; font-family: 'Poppins', sans-serif; overflow-x: hidden; }
body.noAuth { padding-top: 198px; }

h1, h2, h3, h4, .serif { font-family: 'Playfair Display', serif; color: #000; }
p, span, a, label { font-family: 'Poppins', sans-serif; }

/* --- HEADER --- */
header { z-index: 1050; border-bottom: 1px solid #eee; background-color: #fff; }
.top-bar { background-color: var(--ar-primary) !important; color: #fff !important; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; padding: 8px 0; }
.logo-container { grid-template-columns: 1fr auto 1fr; }
.logo { max-height: 50px; transition: transform 0.3s; }
.logo:hover { transform: scale(1.05); }

header nav { padding: 12px 0; }
header nav a { font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; color: #000 !important; font-weight: 500; transition: color 0.3s; text-decoration: none; position: relative; }
header nav a:hover { color: var(--ar-primary) !important; }
header nav a::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 0; height: 1px; background: var(--ar-primary); transition: all 0.3s; transform: translateX(-50%); }
header nav a:hover::after { width: 100%; }

/* --- HERO --- */
.bannersSlider { border-radius: 0; box-shadow: 0 10px 40px rgba(0,0,0,0.05); overflow: hidden; background: #000; }
.bannersSlider img { max-height: 600px; object-fit: cover; width: 100%; }

/* Custom Slider Controls - FINAL FIX FOR DEFAULT BUTTONS */
.tns-outer .tns-controls button { 
    pointer-events: auto !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px !important;
    border: 1px solid #eee !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    z-index: 100 !important;
}
.tns-outer .tns-controls button:hover { background-color: var(--ar-primary) !important; border-color: var(--ar-primary) !important; transform: translateY(-50%) scale(1.1) !important; }
.tns-outer .tns-controls button[data-controls="prev"] { 
    left: 40px !important; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2386010f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.tns-outer .tns-controls button[data-controls="next"] { 
    right: 40px !important; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2386010f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.tns-outer .tns-controls button[data-controls="prev"]:hover { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.tns-outer .tns-controls button[data-controls="next"]:hover { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* --- CATALOG GRID --- */
.editorial-cat { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); filter: grayscale(20%); border-radius: 10px; overflow: hidden; position: relative; }
.editorial-cat:hover { transform: translateY(-10px); filter: grayscale(0); box-shadow: 0 20px 40px rgba(134, 1, 15, 0.1); }
.editorial-cat .cat-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: #fff; transition: all 0.3s; }
.editorial-cat:hover .cat-overlay { padding-bottom: 40px; }

/* --- NEW MODIRA CLEAN CARD --- */
.modira-card-final { 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    border-radius: 12px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    height: 100% !important;
    border: none !important;
    outline: none !important;
    background-color: #fff !important;
    box-shadow: none !important;
}
.modira-card-final:hover { 
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; 
    transform: translateY(-8px);
}

.box-product { 
    overflow: hidden !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
    background-color: transparent !important;
}
.box-product .product-image {
    transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: none !important;
}
.modira-card-final:hover .product-image { 
    transform: scale(1.1); 
}

.options-overlay { 
    z-index: 100; 
    transition: all 0.4s ease; 
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
}
.discount-badge {
    background-color: #86010f !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}
.options-overlay .bg-white { 
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    border: none !important;
}

.product-info h3 { 
    font-size: 0.95rem; 
    line-height: 1.4; 
    margin-bottom: 0.75rem; 
    height: 2.7rem; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* INTEGRATED ACTION BAR: Perfectly flush with photo */
.add-to-cart-trigger { 
    width: 100%;
    z-index: 5;
}
.add-to-cart-trigger .btn-primary { 
    font-size: 0.75rem !important;
    letter-spacing: 2px;
    border: none !important;
    transition: all 0.3s ease !important;
    border-radius: 0 0 12px 12px !important;
}
.product-card-wrapper:hover .add-to-cart-trigger .btn-primary {
    background-color: #6a000c !important;
}

.price-tag { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--ar-primary); }

/* --- TINY SLIDER CUSTOM DOTS --- */
.tns-nav {
    text-align: center;
    margin: 0px 0 10px 0;
    width: 100%;
}
.tns-nav > button {
    width: 7px;
    height: 7px;
    padding: 0;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #e0e0e0;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
}
.tns-nav > button.tns-nav-active {
    background-color: #86010f;
    transform: scale(1.5);
}
.tns-nav > button:hover {
    background-color: #86010f;
    opacity: 0.6;
}

/* --- TESTIMONIALS --- */
.testimonialSlider .card { background-color: var(--ar-accent) !important; border: none; padding: 40px !important; border-radius: 20px !important; }

footer { background: #000; color: #fff; border-top: 5px solid var(--ar-primary); }
footer h4 { color: #fff !important; font-size: 1.1rem; letter-spacing: 1px; }

@media ( max-width: 767px ) {
	body { padding-top: 100px; }
	body.noAuth { padding-top: 180px; }
	.logo { max-height: 50px; }
	header nav { background: #FFF; width: 100vw; height: 100vh; top: 0; left: -100vw; padding: 80px 40px; transition: all 0.4s; position: fixed; z-index: 2000; }
	header nav.show { left: 0; }
}

/* --- PRODUCT DETAIL REDESIGN (MODIRA LUXE) --- */
.product-detail-name { font-family: 'Playfair Display', serif; font-size: 2.2rem; line-height: 1.1; margin-bottom: 0.5rem; color: #000; font-weight: 600; }
.product-detail-price { font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 700; color: #86010f; }
.product-detail-sku { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px; color: #999; margin-bottom: 20px; display: block; }

.sticky-column { position: sticky; top: 120px; height: fit-content; }

.btn-buy-lux { 
    background-color: #86010f !important; 
    border: none !important; 
    border-radius: 0 !important; 
    padding: 18px 40px !important; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.8rem; 
    font-weight: 700; 
    transition: all 0.4s; 
    color: #fff !important;
    width: 100%;
}
.btn-buy-lux:hover { background-color: #000 !important; }

/* Custom Selectors for Variations & Quantity */
.lux-selector { 
    border: 1px solid #e0e0e0 !important; 
    border-radius: 0 !important; 
    padding: 12px 15px !important; 
    font-size: 0.85rem !important; 
    color: #000 !important;
    transition: all 0.3s;
}
.lux-selector:focus { border-color: #000 !important; box-shadow: none !important; }

.spec-list { padding: 0; border-top: 1px solid #f0f0f0; padding-top: 25px; margin-top: 25px; }
.spec-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f9f9f9; font-size: 0.85rem; }
.spec-label { font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem; }
.spec-value { color: #000; }

.trust-badge-item { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: #555; font-weight: 500; }
.trust-badge-item i { font-size: 1.2rem; color: #86010f; }

.breadcrumb-minimal { background: transparent !important; padding: 0; margin-bottom: 30px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; }
.breadcrumb-minimal a { color: #999; text-decoration: none; }
.breadcrumb-minimal .breadcrumb-item.active { color: #000; }

/* Luxe ATC Block Redesign */
.modira-atc-container {
    width: 100%;
}
.variation-selection-lux label {
    margin-bottom: 5px;
}
.lux-selector {
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    padding: 12px 15px !important;
    font-size: 0.85rem !important;
    background-color: #fff !important;
}
.atc-actions-lux {
    border: 1px solid #000 !important;
    display: flex;
    overflow: hidden;
    min-height: 55px;
}
.atc-actions-lux .quantity-wrapper {
    border-right: 1px solid #000 !important;
}
.atc-actions-lux .form-select {
    border: none !important;
    padding: 0 10px !important;
    height: 100% !important;
}
.atc-quantity-selector {
    width: 60px !important; /* Compacto para los boxes del catálogo */
}
.sticky-column .atc-quantity-selector {
    width: 85px !important; /* Ancho Luxe para el detalle de producto */
}
.btn-buy-lux {
    background-color: #86010f !important;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.3s;
    width: 100%;
}
.btn-buy-lux:hover {
    background-color: #000 !important;
}

/* --- CONTACT PAGE REDESIGN (MODIRA LUXE) --- */
.contact-lux-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    overflow: hidden;
}

.contact-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #000;
    font-weight: 600;
    letter-spacing: -1px;
}

.contact-info-lux {
    background-color: #fcfcfc;
    height: 100%;
}

.contact-icon-lux {
    width: 45px;
    height: 45px;
    background: rgba(134, 1, 15, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86010f;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Rediseño de Inputs para Contacto */
.contact-lux-card input, 
.contact-lux-card textarea,
.contact-lux-card select {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 15px 0 !important;
    font-size: 0.9rem !important;
    transition: all 0.3s;
}

.contact-lux-card input:focus, 
.contact-lux-card textarea:focus {
    box-shadow: none !important;
    border-bottom-color: #86010f !important;
}

.social-link-lux {
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: all 0.3s;
    text-decoration: none;
}
.social-link-lux:hover {
    background: #86010f;
    color: #fff;
    border-color: #86010f;
}