/* Custom styles to match the reference site */
body {
    font-family: 'Open Sans', sans-serif;
    color: #666;
}
.font-script {
    font-family: 'Great Vibes', cursive;
}
.top-bar {
    background-color: #c5a560; /* gold */
    color: #000; /* texto preto para contraste sobre dourado */
}
.header-main {
    border-bottom: 1px solid #f0f0f0;
    --header-h: 72px; /* height used to offset mobile hero/video (adjust if header size changes) */
    position: relative; /* ensure absolute centering works */
    padding-top: 10px;
    padding-bottom: 10px;
}
.header-main .logo-center { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    top: 50%; 
    transform: translate(-50%, -50%); 
}
/* New: left-aligned logo variant for desktop flow */
.logo-left {
    position: static;
    left: auto;
    transform: none;
    display: inline-block;
}
/* ensure logo image sizing stays consistent in header flow */
.logo-left .logo-img, .logo-img {
    height: calc(2.5rem * 1.3);
    display: block;
}
/* increase desktop logo by 40% */
@media (min-width:1024px) {
    .logo-left .logo-img, .logo-img {
        height: calc(2.5rem * 1.3 * 1.8); /* make logo more prominent on desktop (bumped) */
    }
}
/* Increase footer logo on desktop by 40% */
@media (min-width:1024px) {
    .footer-logo {
        height: calc(2rem * 1.35); /* increased by 35% (was 1.4 previously) */
    }
}
/* Footer logo: match header logo sizing */
.footer-logo {
    height: auto !important; /* allow responsive sizing and override Tailwind h-8 */
    /* reduced by 40% -> keep at 60% of previous max to shrink footer logo */
    max-height: calc(2.5rem * 1.3 * 1.8 * 2 * 0.6);
    display: block;
}

/* Footer social icons: gold color, subtle gold ring on hover */
.footer-social-icon {
    background: transparent;
    color: #c5a560;
    border: 1px solid rgba(197,165,96,0.10);
    transition: background-color 0.18s, color 0.18s, transform 0.12s;
}
.footer-social-icon i { font-size: 1.05rem; }
.footer-social-icon:hover {
    background: rgba(197,165,96,0.10);
    color: #c5a560;
    transform: translateY(-3px);
}

.main-nav {
    border-bottom: 1px solid #f0f0f0;
}
.main-nav a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    transition: color 0.3s;
}
.main-nav a:hover {
    color: #c5a560;
}

/* Custom scrollbar: gold track with black thumb */
*::-webkit-scrollbar {
    width: 24px;
    height: 24px;
}
*::-webkit-scrollbar-track {
    background: #c5a560; /* gold track */
}
*::-webkit-scrollbar-thumb {
    background: #000; /* black thumb */
    border-radius: 10px;
    border: 3px solid #c5a560; /* subtle gold padding effect */
}
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #000 #c5a560;
}

/* Styles for the carousel slides */
.slider-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Animation transition */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slider-slide.active {
    opacity: 1;
}

.banner-bg {
    background-image: url('https://rmjconcept.com/bannersite/21%20(1).jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.winter-offer-bg {
    background-image: url('https://www.webstrot.com/html/theshop/images/banner/2.jpg');
}
.sale-offer-bg {
    background-image: url('https://www.webstrot.com/html/theshop/images/banner/1.jpg');
}
/* 3:1 Aspect Ratio Banner Styles */
.banner-3-1 {
    position: relative;
    width: 100%;
    padding-top: 33.3333%; /* 1 / 3 ratio for 3:1 aspect W:H */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.banner-3-1-content-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-title {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.section-subtitle {
    margin-bottom: 32px;
    font-size: 14px;
}
.bg-black .section-subtitle {
    color: #c5a560 !important; /* gold for subtitles in dark recent posts section */
}
.btn-primary {
    display: inline-block;
    background-color: #c5a560;
    color: white;
    padding: 12px 35px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
    border-radius: 25px;
}
.btn-primary:hover {
    background-color: #333;
}
.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
/* Remove any overlay icons/effects so only the image shows */
.product-card .product-overlay { display: none !important; }
/* Ensure images are flush (no rounded corners, no extra spacing) */
.product-card .product-image img {
    width: 320px;
    height: 480px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 12px !important;
    box-shadow: none !important;
    border: none !important;
}
/* Make product info area minimal and plain */
.product-card .p-4 {
    width: 100%;             /* ensure the info block fills card width and sits under image */
    box-sizing: border-box;
    padding: 8px 12px 12px 12px; /* compact padding */
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    text-align: center;      /* center name/price/buttons under image */
    position: relative;
    z-index: 1;
}
/* Keep buttons, name and price visible and aligned */
.product-card .product-name, .product-card .product-price, .product-card .mt-4 {
    margin: 0.15cm 0 0 0;
    background: transparent !important;
    box-shadow: none !important;
}
.product-card .product-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    background-color: transparent;
    margin-bottom: 0.4rem; /* small controlled gap so content sits just below image */
    width: 100%;
    display: block;
}
.product-card .product-image img {
    width: 320px; /* fixed width (portrait) as requested */
    height: 480px; /* fixed height (portrait) as requested */
    object-fit: cover; /* crop to fill */
    margin: 0 auto;
    border-radius: 12px; /* rounded corners applied */
    transition: transform 0.3s ease;
    max-width: 100%; /* responsive fallback on small screens */
}
.product-card .product-image { 
    margin-bottom: 0.2cm; /* ensure product info (name, price, buttons) sits 0.2cm below the image */
}
.product-card:hover .product-image img {
    transform: scale(1.05); /* Efeito de zoom suave */
}
.product-card .product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.product-card:hover .product-overlay {
    opacity: 1;
}
.product-card .product-overlay a {
    color: white;
    background-color: #333;
    height: 40px;
    width: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    border-radius: 50%;
    transform: translateY(20px);
    transition: transform 0.3s, background-color 0.3s;
}
.product-card:hover .product-overlay a {
    transform: translateY(0);
}
.product-card .product-overlay a:hover {
    background-color: #c5a560;
}

#featured-products-container .product-card {
    /* Use same base product-card appearance as other product lists */
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-radius: 12px;
}

/* Apply the exact same featured layout to the "NUEVOS PRODUCTOS" section */
#new-products-container .product-card {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-radius: 12px;
}

/* Make featured product images use the same portrait sizing as product-card defaults */
#featured-products-container .product-card .product-image img {
    width: 320px;
    height: 480px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

/* Ensure product info area matches the new products layout (subtle border & spacing) */
#featured-products-container .product-card .p-4 {
    border: 1px solid #e5e7eb; /* tailwind gray-200 */
    background: transparent;
    padding-top: 12px;
}

#new-products-container .product-card .p-4 {
    border: 1px solid #e5e7eb; /* tailwind gray-200 */
}

/* Sidebar category buttons: gold on hover and when active/clicked */
.store-cat {
    transition: background-color 0.18s, color 0.18s, transform 0.06s;
    background: transparent;
    color: #111;
    border-radius: 6px;
}
/* ensure hover already gold */
.store-cat:hover,
.store-cat:focus,
.store-cat.active,
.store-cat.bg-amber-500 {
    background: #c5a560 !important; /* gold */
    color: #000 !important; /* black text for contrast */
}

/* Explicitly style active class added by JS to use brand gold */
.store-cat.active,
.store-cat.bg-amber-500 {
    background: #c5a560 !important;
    color: #000 !important;
}

/* ensure inner content adapts to glass look */
.product-card .p-4 {
    background: transparent !important;
    backdrop-filter: none;
    padding: 8px; /* harmonize padding so there's minimal vertical gap */
    /* removed transform: translateY(-4cm); to keep info below the image */
    margin-top: 0 !important;
    position: relative;
    z-index: 1; /* ensure info sits normally under image */
}

/* remove white border/frame coming from utility 'border' in markup for product info */
.product-card .p-4.border {
    border: none !important;
    background: transparent !important;
}

/* Cart Styles - Ensure mobile responsiveness */
.cart-grid {
    display: flex;
    flex-direction: column; /* Mobile first stack */
    gap: 24px;
}

.cart-card {
    background: #0f0f10; /* darker card on black background */
    border: 1px solid rgba(197,165,96,0.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    border-radius: 12px;
    padding: 16px;
    color: #e6e6e6;
}
.cart-card .card-top {
    display: flex;
    gap: 16px;
    align-items: center;
}
.cart-card img {
    width: 96px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.03);
}

/* Mobile adjustments for cart items to ensure stacking on small screens */
@media (max-width: 600px) {
    .cart-card .card-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cart-card img {
        width: 100%;
        max-width: 120px; 
        height: auto;
        margin-bottom: 10px;
    }
    .cart-card .meta {
        width: 100%;
    }
    .cart-actions {
        justify-content: center; /* Center buttons on mobile */
    }
}

.cart-card .meta { flex: 1; color: #c5a560; } /* make meta text gold by default */
.cart-card .meta h4 { color: #ffffff; font-weight:700; margin-bottom:6px; } /* product title white */
.cart-card .meta p { color: #c5a560; margin-bottom:4px; } /* meta paragraphs in gold */
.cart-card .price { 
    color: #000; /* make cart total black */
    font-weight: 900; /* extra bold for emphasis */
    font-size: 1.15rem; /* slightly larger than product list price */
}
.cart-actions { display:flex; gap:8px; align-items:center; margin-top:12px; }

/* responsive tweaks */
@media (min-width:768px){
    .cart-grid { 
        flex-direction: row; /* Desktop: row layout */
        align-items: flex-start;
    }
    .cart-left { flex:2 }
    .cart-right { flex:1; max-width:360px; }
}
/* style remove button and actions with gold accent */
.cart-actions .remove-item {
    background: transparent;
    border: 1px solid rgba(197,165,96,0.18);
    color: #c5a560;
}
.cart-actions .remove-item:hover {
    background: rgba(197,165,96,0.08);
}
/* override default button disabled look to fit dark theme */
.cart-actions button[disabled] {
    background: rgba(255,255,255,0.03);
    color: #cfcfcf;
    border: 1px solid rgba(255,255,255,0.03);
}
/* cart right summary card */
.cart-right .cart-card {
    background: #0f0f10;
    border: 1px solid rgba(197,165,96,0.08);
}
/* inputs in summary to match dark theme */
.cart-right input, .cart-right select, .cart-right textarea {
    background: #121212;
    color: #e6e6e6;
    border: 1px solid rgba(255,255,255,0.04);
}
/* finalize button to gold */
#finalize-whatsapp {
    background-color: #c5a560;
    color: #000;
    font-weight: 800;
    border-radius: 10px;
    padding: 12px;
}
#finalize-whatsapp:hover { background-color: #b08f48; }

/* Ensure product buttons consistent: 'Comprar' gold, 'Añadir al Carrito' black with white text */
.product-card .btn-buy,
.product-card a.bg-amber-500 {
    background-color: #c5a560 !important; /* gold */
    color: #000 !important;
    font-weight: 800;
}
.product-card .btn-addcart,
.product-card a.bg-gray-200 {
    background-color: #000 !important; /* black */
    color: #fff !important;
    border-color: rgba(255,255,255,0.04) !important;
}
/* keep hover behavior subtle */
.product-card .btn-buy:hover { background-color: #b08f48 !important; color: #000 !important; }
.product-card .btn-addcart:hover { background-color: #141414 !important; color: #fff !important; }

/* Newsletter Subscribe Button Gold */
.newsletter-submit-btn {
    background-color: #c5a560;
    color: #000;
    font-weight: 800;
}
.newsletter-submit-btn:hover {
    background-color: #b08f48;
}

/* Mobile quick bar adjustments: black background and gold accents */
#mobile-quick-bar { background-color: #000; }
#mobile-quick-bar a { color: #c5a560; }
#mobile-quick-bar a.cart-button {
    background: #000 !important;
    color: #fff !important;
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#mobile-quick-bar a.cart-button i {
    color: #fff !important;
}
#mobile-quick-bar a.cart-button span {
    color: #fff !important;
    margin-top: 0.25rem;
    font-size: 0.7rem;
}
#mobile-flag-submenu button img {
    filter: none;
    width: auto;
    height: 18px; /* match other action icons */
    object-fit: contain;
    border-radius: 2px;
    border: none; /* remove contorno */
}

.banner-slider-container {
    margin-top: var(--header-h); /* ensure hero starts below black header/menu */
    background-color: #000; /* added: black background behind the banner */
}

/* Make banner visuals semi-transparent (20% opacity) */
.banner-slider-container .slider-slide video,
.banner-slider-container .slider-slide img,
.banner-3-1 {
    opacity: 1 !important; /* banner fully opaque (100% black background for videos/images) */
}

@media (max-width: 640px) {
    /* New: Remove white strip (main-nav) and collapse its height on mobile */
    .main-nav {
        height: 0 !important;
    }
    
    /* increase banner/video area height on mobile by 2.3cm and raise video up 0.7cm */
    .banner-slider-container {
        height: calc(60vh + 2.3cm) !important;
        margin-top: calc(var(--header-h) - 0.7cm) !important;
    }
    /* ensure contained video fills the adjusted container */
    .banner-slider-container #hero-slider .slider-slide video {
        height: 100% !important;
        object-fit: cover;
    }
    /* PRODUCT LAYOUT IMPROVEMENTS ON MOBILE */
    #featured-products-container,
    #new-products-container,
    .container .grid {
        gap: 8px !important; /* reduce space between product cards (was larger) */
    }
    .product-card { align-items: center; } /* center image & content on mobile */
    .product-card .product-image { aspect-ratio: 3/4; transform: none; }
    .product-card .product-image img {
        width: 100%; /* allow full width on small screens */
        height: auto; /* keep aspect for narrow devices */
        max-height: 320px; /* ensure not taller than desktop size */
    }
    .product-card .p-4 { padding: 10px; }
    .product-card .product-name { font-size: 18px; line-height:1.2; font-weight:800; }
    .product-card .product-price { 
        font-size: 1.125rem; /* ~18px - larger price text */
        font-weight: 800; /* bold */
        color: #000 !important; /* black */
    }
    .product-card .mt-4 { display:flex; gap:8px; }
    .product-card .btn-buy,
    .product-card .btn-addcart,
    .product-card a.bg-amber-500,
    .product-card a.bg-gray-200 {
        flex:1;
        padding:8px 10px;
        font-size:12px;
    }
    /* make product overlay icons slightly smaller and better spaced */
    .product-card .product-overlay a { height:34px; width:34px; margin:0 4px; }
    
    /* New: ensure product images on mobile use 9:16 and are centered */
    .product-card .product-image { 
        aspect-ratio: 9 / 16; /* enforce 9:16 ratio container */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0.15rem; /* small padding so rounded corners remain visible */
        background: transparent;
        height: auto;
        width: 100%;
        max-width: 420px; /* keep a sensible max on larger small screens */
        margin: 0 auto; /* center the image container */
    }
    .product-card .product-image img {
        width: auto !important;       /* let height control sizing */
        height: 100% !important;      /* fill the 9:16 container */
        object-fit: cover !important; /* crop to fill while preserving center */
        display: block;
        margin: 0 auto;               /* center image horizontally */
        max-width: 100%;
        border-radius: 12px;
    }
    /* reduce max-height to avoid very tall images on small devices */
    .product-card .product-image { max-height: 720px; }
    
    /* ensure product info sits naturally under the image on mobile */
    .product-card .p-4 {
        transform: none !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box;
        /* move product texts/buttons 2cm higher on mobile */
        transform: translateY(-2cm) !important;
    }
    .product-card .mt-4 {
        /* also lift the button row */
        transform: translateY(-2cm) !important;
    }
    /* ensure product info sits naturally under the image on mobile */
    .product-card .p-4 {
        transform: translateY(-2cm) !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Place hamburger in the top-right corner on mobile */
    .header-main .flex.lg\:hidden {
        justify-content: space-between !important;
        position: relative;
    }
    #header-hamburger {
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 60;
    }
    
    /* Make product text and other content justified and ensure images are fully responsive */
    .product-card .p-4,
    .product-card .product-name,
    .product-card .product-price,
    .who-card,
    .contact-card,
    .product-card .mt-4,
    .contact-card p,
    .faq-content,
    .faq-toggle span {
        text-align: center !important; /* override previous justify on mobile */
    }

    .product-card .product-image img,
    .product-card .product-image {
        width: 100% !important;
        height: auto !important;
        max-height: 720px;
        object-fit: cover !important;
    }

    /* Remove vertical lifts that caused overlap on some devices and keep spacing consistent */
    .product-card .p-4,
    .product-card .mt-4 {
        transform: none !important;
        margin-top: 0.5rem !important;
    }

    /* Ensure hero/video fills the adjusted container responsively */
    .banner-slider-container #hero-slider .slider-slide video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

#cart-count-footer, #cart-count-header, #cart-count-header-mobile {
    background-color: #c5a560 !important;
    color: #000 !important;
    border: 2px solid rgba(197,165,96,0.12); /* subtle gold ring to keep contrast */
    position: absolute; /* ensure absolute positioning for precise offset */
    transform: none !important;
    top: -26px !important; /* move badge above the icon without overlapping */
    right: -0.1cm !important;  /* moved 0.1cm further to the right */
    /* ensure text is centered and readable */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

/* Move cart badges to sit above the cart icons for better visibility */
#cart-count-header {
    /* removed previous negative offsets; keep it above and aligned */
    top: -26px !important;
    right: -0.1cm !important;
}
#cart-count-header-mobile {
    top: -28px !important;
    right: -0.1cm !important;
}
#cart-count-footer {
    top: -18px !important;
    right: calc(-6px - 0.1cm) !important;
}

@media (min-width:1024px){
    /* Ensure product prices are black on desktop */
    .product-card .product-price {
        color: #000 !important;
    }
    /* Make header cart icon and badge gold on desktop */
    .header-main .w-1/3 a .fa-cart-shopping,
    .header-main .w-1/3 a .fa-solid.fa-cart-shopping {
        color: #c5a560 !important;
    }
    #cart-count-header {
        background-color: #c5a560 !important;
        color: #000 !important;
        border-color: transparent !important;
    }
    /* target header cart icon(s) and force gold color */
    .header-main a[href="carrinho.html"] .fa-cart-shopping,
    .header-main .w-1\/3 a[href="carrinho.html"] .fa-cart-shopping {
        color: #c5a560 !important;
    }
}

/* Remove all borders/frames from product cards and their inner elements */
.product-card,
.product-card .product-image,
.product-card .p-4,
.product-card img {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Testimonials slider */
.testimonials-slider {
    max-width: 1100px;
    margin: 0 auto 2rem;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    padding: 1rem;
}
.testimonials-track {
    display: flex;
    gap: 16px;
    transition: transform 0.6s cubic-bezier(.22,.9,.37,1);
    will-change: transform;
}
.testimonial {
    min-width: 280px;
    flex: 0 0 auto;
    background: #000;
    color: #fff;
    padding: 14px;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
.testimonial img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid #c5a560;
}
.testimonial .meta { font-size: 14px; }
.testimonial .meta .name { font-weight:700; color:#c5a560; margin-bottom:4px; }
.testimonial .meta .text { color:#e6e6e6; font-size:13px; line-height:1.3; }

/* FAQ styles to match provided design */
.faq-left .faq-item .faq-toggle {
    background: #fff;
    border-left-width: 4px;
    border-left-color: transparent;
}
.faq-left .faq-item.active .faq-toggle {
    background: linear-gradient(180deg,#c5a560 0%,#a37f3f 100%); /* gold -> darker gold */
    color: #fff;
    border-left-color: transparent;
}
.faq-left .faq-item.active .faq-toggle i { transform: rotate(45deg); }
.faq-left .faq-item.active + .faq-content,
.faq-left .faq-item .faq-content { color: #fff; }

/* when opened, show content with magenta background */
.faq-left .faq-item .faq-content {
    background: rgba(197,165,96,0.95); /* gold translucent */
    color: #fff;
    border-radius: 6px;
    margin-top: 8px;
}

/* default closed content hidden */
.faq-left .faq-item .faq-content.hidden { display: none; }

/* contact card styling */
.faq-contact {
    border: 1px solid rgba(0,0,0,0.04);
}
.faq-contact h3 { margin-bottom: 8px; }
.faq-contact input, .faq-contact textarea { background: #fff; }

/* make the purple/magenta button match design */
.faq-contact button {
    background: #c5a560;
    border: none;
    color: #000;
    font-weight:700;
}
.faq-contact button:hover { background: #b08f48; }

/* ensure layout spacing on small screens */
@media (max-width: 1024px) {
    .faq-left .faq-item .faq-toggle { padding: 12px; }
    .faq-left .faq-item .faq-content { padding: 12px; margin-top: 6px; }
}

/* Make block full-width and "app-like" on mobile (sticky above bottom quick bar) */
@media (max-width:640px) {
    .testimonials-slider { 
        padding: 0.6rem;
        border-radius: 8px 8px 0 0;
        margin-bottom: 68px; /* leave space for mobile quick bar */
    }
    .testimonial { min-width: 82%; }
}

/* desktop: center inline and show more slides */
@media (min-width:1024px) {
    .testimonial { min-width: 320px; }
}

.new-products-title {
    display: inline-block;
    transform: translateY(-1cm); /* moved down 3cm from previous -4cm */
}

/* Rounded images for the "PUBLICACIONES RECIENTES" cards */
.bg-black .post-img {
    border-radius: 12px;
    object-fit: cover;
    filter: grayscale(100%) contrast(95%); /* make B&W by default */
    -webkit-filter: grayscale(100%) contrast(95%);
    transition: filter 0.35s ease, -webkit-filter 0.35s ease, transform 0.35s ease;
}
.recent-post-card:hover .post-img,
.bg-black .post-img:hover {
    filter: none;
    -webkit-filter: none;
    transform: scale(1.02);
}

/* Footer map: grayscale by default, color on hover */
footer iframe,
footer .w-full iframe {
    filter: grayscale(100%) contrast(95%);
    -webkit-filter: grayscale(100%) contrast(95%);
    transition: filter 0.35s ease, -webkit-filter 0.35s ease, transform 0.35s ease;
}
footer .w-full:hover iframe,
footer iframe:hover {
    filter: none;
    -webkit-filter: none;
    transform: scale(1.01);
}

/* FAQ layout & styles */
.faq-list .faq-item { background: transparent; border: none; }
.faq-toggle { 
    background: #000 !important; 
    color: #fff !important; 
    border-radius: 6px; 
    padding: 16px; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    cursor:pointer; 
}
.faq-toggle .faq-icon { transition: transform 0.25s, color 0.25s; color: #9a9a9a; }
.faq-item.active .faq-toggle { 
    background: #000 !important; 
    color: #fff !important; 
}
.faq-item.active .faq-toggle .faq-icon { transform: rotate(45deg); color: #fff; }
.faq-content { 
    background: #000 !important; 
    color: #fff !important; 
    padding:16px; 
    border-left: 4px solid transparent; 
    border-radius: 0 0 6px 6px; 
}
.faq-item.active .faq-content { 
    background: #000 !important; 
    color: #fff !important; 
    display: block; 
}

/* Contact form card */
.contact-card { 
    background: #000 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.04);
}
.contact-card input,
.contact-card textarea,
.contact-card select {
    background: #0f0f10;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
}
.submit-purple { background: #c31b8f; }
.submit-purple:hover { background: #7a0aa9; }

/* Info bar (bottom purple strip) */
.info-bar { background: linear-gradient(90deg,#c31b8f 0%, #7a0aa9 100%); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.info-bar i { font-size: 1.2rem; }

/* Responsive tweaks */
@media (max-width: 1024px) {
    .faq-item.active .faq-content { background: rgba(122,10,169,0.95); }
    .info-bar { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
}

.recent-post-card .p-6 {
    background-color: #000 !important;
    color: #fff !important;
}
.recent-post-card .post-img {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Alternate FAQ title colors: odd -> black, even -> gold */
.faq-list .faq-item:nth-child(odd) .faq-toggle span { color: #000 !important; }
.faq-list .faq-item:nth-child(even) .faq-toggle span { color: #c5a560 !important; }

.recent-post-card a[data-lang-key="posts_read_more"] {
    color: #c5a560 !important;
}
.recent-post-card a[data-lang-key="posts_read_more"]:hover {
    color: #b08f48 !important;
}

/* Form input styling for FAQ contact form */
#faq-contact-form input,
#faq-contact-form textarea,
#faq-contact-form select,
.contact-card input,
.contact-card textarea,
.contact-card select {
    background: #ffffff !important;      /* white background */
    color: #000000 !important;           /* black text */
    font-weight: 700 !important;         /* bold font */
    border: 1px solid #c5a560 !important;/* thin gold border */
    border-radius: 6px;
    padding: 10px;
}

/* Placeholder color for better contrast */
#faq-contact-form input::placeholder,
#faq-contact-form textarea::placeholder,
.contact-card input::placeholder,
.contact-card textarea::placeholder {
    color: #4b4b4b !important;
}

/* Ensure any recent-post headings like "Guía: Cuidados de las Prendas" are white */
.recent-post-card h4 {
    color: #ffffff !important;
}

#featured-products-container .product-card .p-4,
#new-products-container .product-card .p-4 {
    /* removed upward transform so text stays below each product image */
    margin-top: 0.25rem !important;
    transform: none !important;
}
/* Increase product title size + bold for homepage featured & new lists */
#featured-products-container .product-name,
#new-products-container .product-name {
    font-size: 1.3em; /* 30% larger */
    font-weight: 800; /* bold */
}

/* Ensure all FAQ question titles are gold */
.faq-list .faq-item .faq-toggle span {
    color: #c5a560 !important;
}

/* Apply gold tint overlay and color-shift to hero/banner and mid-gallery images/videos */
.banner-slider-container .slider-slide::after {
    /* overlay removed to ensure videos/images display without tint */
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    transition: none;
}
.banner-slider-container .slider-slide video,
.banner-slider-container .slider-slide img,
#mid-gallery-slider .mid-slide img,
.banner-3-1 {
    filter: none !important; /* remove color shifts so videos/images remain true and background black */
}

.who-card {
    background: #000 !important;
    border: 1px solid rgba(197,165,96,0.12);
    color: #c5a560 !important; /* gold font for all text inside */
}
.who-card h3, .who-card p, .who-card li, .who-card span {
    color: #c5a560 !important;
}
/* make card text slightly more readable */
.who-card p {
    color: rgba(197,165,96,0.95) !important;
    font-weight: 600;
    line-height: 1.4;
}

.menu-cart-desktop {
    background: #000 !important; /* black background as requested */
    color: #fff !important;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    transition: background-color 0.18s, transform 0.12s;
}
.menu-cart-desktop i { color: #fff; font-size: 1rem; }
.menu-cart-desktop:hover {
    background: #111 !important;
    transform: translateY(-2px);
}
/* ensure cart badge contrast when placed in nav on desktop */
@media (min-width:1024px){
    .menu-cart-desktop .ml-2 {
        margin-left: 0.5rem;
    }
    /* keep original header badge style unaffected for mobile badge id */
    #cart-count-header {
        top: auto !important;
        right: auto !important;
        position: static !important;
        transform: none !important;
    }
}

@media (max-width:640px) {
    /* Mobile: make mobile logo 20% larger and center it */
    .logo-left .logo-img, .logo-img {
        height: calc(2.5rem * 1.3 * 1.2) !important; /* 20% larger on mobile */
        display: block;
        margin: 0 auto;
    }

    /* Place hamburger in the top-right corner on mobile */
    /* center logo row and keep hamburger absolutely positioned */
    .header-main .flex.lg\:hidden {
        justify-content: center !important;
        position: relative;
    }
    #header-hamburger {
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 60;
    }
}

/* Size control visuals and selectable product size badges */
.size-btn {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.06);
    font-weight: 700;
    outline: none;
}
/* ensure explicit selected state styling */
.size-btn.selected,
.size-btn.bg-black,
.size-btn:active,
.size-btn:focus {
    background: #c5a560 !important;
    color: #000 !important;
    box-shadow: 0 0 0 3px rgba(197,165,96,0.12);
    border-color: rgba(197,165,96,0.18) !important;
}
/* add subtle hover to show interactivity while preserving black bg */
.size-btn:hover {
    transform: translateY(-2px);
    cursor: pointer;
}

/* product card inline size badges (clickable) */
.product-card .size-badge,
.product-card span.size-badge {
    display: inline-block;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(197,165,96,0.12);
    background: transparent;
    color: #c5a560;
    font-weight: 800;
    margin: 0 6px;
    transition: background 0.12s, color 0.12s, transform 0.08s;
}
.product-card .size-badge:hover { transform: translateY(-2px); }

/* selected state for both sidebar and product-card badges */
.size-selected,
.size-badge.selected,
.size-btn.bg-black,
.size-btn.selected {
    background: #c5a560 !important;
    color: #000 !important;
    border-color: rgba(160,120,40,0.15) !important;
}

@media (min-width:1024px) {
    /* lift product info (name, price, sizes, buttons) 2cm on desktop */
    .product-card .p-4 {
        transform: translateY(-2cm) !important;
        transition: transform 0.18s ease !important;
    }
    .product-card .mt-4,
    .product-card .product-name,
    .product-card .product-price,
    .product-card .size-badge {
        transform: translateY(-2cm) !important;
    }
}

/* Mobile drawer styles */
#mobile-menu {
    transition: transform 320ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease;
    will-change: transform, opacity;
}
.mobile-drawer-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
}
/* drawer closed state (when used on mobile) */
.mobile-drawer-closed {
    transform: translateY(-6%) !important;
    opacity: 0;
}

/* Override for mobile view: show as full-screen black drawer */
@media (max-width: 1023px) {
    #mobile-menu {
        position: fixed;
        inset: 0 0 0 0;
        z-index: 60;
        background: #000;
        padding: 2.5rem 1.25rem;
        display: none; /* JS toggles display/hidden */
        overflow-y: auto;
    }
    #mobile-menu.open {
        display: block;
    }
    /* Menu links: white by default, gold on hover/focus */
    #mobile-menu a, #mobile-menu button.mobile-submenu-toggle {
        color: #ffffff !important;
        font-weight: 700;
        display: block;
        padding: 0.6rem 0;
        text-decoration: none;
    }
    #mobile-menu a:hover, #mobile-menu a:focus,
    #mobile-menu button.mobile-submenu-toggle:hover, #mobile-menu button.mobile-submenu-toggle:focus {
        color: #d7a654 !important; /* gold hover */
    }

    /* mobile drawer footer icons */
    .mobile-drawer-footer { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1rem; }
    .mobile-drawer-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        color: #fff;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.06);
        transition: background 160ms, color 160ms, transform 120ms;
        font-size: 1.05rem;
    }
    .mobile-drawer-icon:hover, .mobile-drawer-icon:focus {
        color: #d7a654;
        background: rgba(215,166,84,0.06);
        transform: translateY(-3px);
    }

    /* ensure iframe map is accessible and responsive */
    #mobile-menu iframe {
        min-height: 140px;
    }

    /* prevent header hamburger overlapping content: bring to front */
    #header-hamburger { z-index: 80; }

    /* Mobile submenu (Mujeres) — gold background, white text; on hover/focus/tap text becomes black */
    #mobile-menu .mobile-submenu-content {
        background: #c5a560 !important; /* brand gold */
        color: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 8px;
        padding: 0.5rem;
    }
    #mobile-menu .mobile-submenu-content a,
    #mobile-menu .mobile-submenu-content li,
    #mobile-menu .mobile-submenu-content h5 {
        color: #ffffff !important;
    }
    #mobile-menu .mobile-submenu-content a:hover,
    #mobile-menu .mobile-submenu-content a:focus,
    #mobile-menu .mobile-submenu-content li:hover {
        color: #000000 !important; /* black on hover/tap */
        background: rgba(255,255,255,0.06);
    }

    /* Ensure submenu chevrons and arrow icons remain visible */
    #mobile-menu .mobile-submenu-content [data-mobile-arrow] i,
    #mobile-menu .mobile-submenu-content .fas,
    #mobile-menu .mobile-submenu-content .fa {
        color: #ffffff !important;
    }
    #mobile-menu .mobile-submenu-content a:hover .fas,
    #mobile-menu .mobile-submenu-content a:hover .fa {
        color: #000000 !important;
    }
}

/* ensure focus outlines remain visible for accessibility */
#mobile-menu a:focus, .mobile-drawer-icon:focus, button.mobile-submenu-toggle:focus {
    outline: 3px solid rgba(215,166,84,0.18);
    outline-offset: 2px;
}

.testimonial-hero {
    position: relative;
    padding: 2rem 1rem;
}
.quote-circle {
    width: min(78vw,640px);
    height: min(78vw,640px);
    border-radius: 9999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.quote-mark { line-height: 0.6; }
.quote-text {
    font-size: 1.03rem;
    padding: 0 1.5rem;
}
.quote-avatar {
    position: absolute;
    right: calc(50% - 28px); /* overlap on right edge of circle */
    top: 50%;
    transform: translate(40%, -50%);
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-ring { width: 100%; height: 100%; border-radius: 9999px; background: #000; overflow: hidden; }
/* Responsive tweaks */
@media (max-width: 640px) {
    .quote-circle { width: 90vw; height: 90vw; padding: 1.2rem; }
    .quote-text { font-size: 0.95rem; }
    .quote-avatar { width: 110px; height: 110px; transform: translate(30%, -50%); }
}

@media (max-width: 640px) {
    /* Make size container under product images black with white text on mobile */
    .product-card .mt-4 {
        background: #000 !important;
        color: #fff !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
    }
    .product-card .mt-4 span,
    .product-card .mt-4 .size-badge {
        color: #fff !important;
        background: transparent !important;
        border-color: rgba(255,255,255,0.06) !important;
        font-weight: 700;
    }
}

/* mobile: make "Añadir al Carrito" match gold rounded "Comprar" style */
.product-card .btn-addcart,
.product-card a.bg-gray-200 {
    flex:1;
    padding:8px 10px;
    font-size:12px;
    background-color: #c5a560 !important;
    color: #000 !important;
    border-radius: 9999px !important;
    font-weight: 800 !important;
    border: 1px solid rgba(160,120,40,0.12) !important;
}