/* ============================
   MERCAVO STOREFRONT — Custom CSS
   ============================ */

/* Nav desktop: forzamos visibilidad porque Tailwind CDN ordena hidden > lg:flex */
@media (min-width: 1024px) {
    .mercavo-nav-desktop { display: flex !important; }
}

/* Modal panels — posiciones iniciales (oculto fuera del viewport) y abierto */
.mercavo-panel { will-change: transform; max-width: 28rem; }
.mercavo-panel-right { transform: translateX(100%); }
.mercavo-panel-left  { transform: translateX(-100%); max-width: 20rem; }
.mercavo-panel-top   { transform: translateY(-100%); max-width: 100%; }
.mercavo-panel-right.is-open { transform: translateX(0) !important; }
.mercavo-panel-left.is-open  { transform: translateX(0) !important; }
.mercavo-panel-top.is-open   { transform: translateY(0) !important; }

/* Hamburger mobile: visible solo en mobile */
#mercavo-mobile-menu-trigger { display: inline-flex; }
@media (min-width: 1024px) {
  #mercavo-mobile-menu-trigger { display: none; }
}
/* El nav default de wp_nav_menu añade <ul> con sus <li> en bloque; los hacemos inline-flex */
.mercavo-nav-list { display: flex; align-items: center; gap: 1.75rem; list-style: none; padding: 0; margin: 0; }
.mercavo-nav-list li { display: inline-block; }
.mercavo-nav-list a { color: inherit; text-decoration: none; transition: color .2s ease; }
.mercavo-nav-list a:hover { color: #dc4646; }

/* Marquesina infinita */
@keyframes mercavo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.mercavo-marquee-track {
    will-change: transform;
}

/* Pulse para FAB WhatsApp */
.mercavo-fab-pulse {
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Product card hover */
.mercavo-product-card:hover .mercavo-card-image {
    transform: scale(1.05);
}
.mercavo-card-image {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Badge HOT SALE animado */
@keyframes mercavo-slide-badge {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.mercavo-hot-badge {
    animation: mercavo-slide-badge 8s linear infinite;
}

/* Modal transitions */
.mercavo-modal-active #mercavo-cart-panel {
    transform: translateX(0) !important;
}
.mercavo-modal-active #mercavo-search-panel {
    transform: translateY(0) !important;
}

/* Social proof toast */
@keyframes mercavo-toast-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mercavo-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}
.mercavo-toast-enter { animation: mercavo-toast-in 0.4s ease-out forwards; }
.mercavo-toast-exit  { animation: mercavo-toast-out 0.3s ease-in forwards; }

/* Countdown flip */
.mercavo-countdown-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: 0.375rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.875rem;
}

/* Sticky header scroll state */
#mercavo-header.scrolled {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Sticky mobile CTA */
.mercavo-sticky-cta {
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.mercavo-sticky-cta.visible {
    transform: translateY(0);
}

/* Scrollbar custom */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Image zoom on hover */
.mercavo-zoom-container {
    overflow: hidden;
    cursor: zoom-in;
}
.mercavo-zoom-container img {
    transition: transform 0.1s ease-out;
    transform-origin: var(--zoom-x, center) var(--zoom-y, center);
}
.mercavo-zoom-container:hover img {
    transform: scale(2);
}

/* Swatches */
.mercavo-swatch {
    transition: all 0.15s ease;
}
.mercavo-swatch.active,
.mercavo-swatch:hover {
    ring: 2px;
    ring-offset: 2px;
}
.mercavo-swatch-color.active {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
}
.mercavo-swatch-size.active {
    background-color: var(--color-primary);
    color: white;
}

/* Glassmorphism utility */
.mercavo-glass {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Safe area for mobile bottom bar */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Hide scrollbar on horizontal scroll */
.mercavo-scroll-hide::-webkit-scrollbar { display: none; }
.mercavo-scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Lightbox */
.mercavo-lightbox {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mercavo-lightbox.active {
    opacity: 1;
}

/* Print styles */
@media print {
    #mercavo-header,
    #mercavo-mobile-bar,
    #mercavo-modals,
    #mercavo-social-proof,
    .mercavo-fab-pulse,
    .whatsapp-fab { display: none !important; }
}
.mercavo-hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: transparent;
    transition: width 220ms ease, background-color 220ms ease;
}

.mercavo-hero-dot.active {
    width: 28px;
    background: #fff;
}

.mercavo-hero-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Mercavo 1.2 — sistema visual editorial de comercio */
:root {
    --mc-ink: #171a18;
    --mc-muted: #697264;
    --mc-warm: #f7f2ea;
    --mc-line: #e6ded3;
    --mc-sage: #6f7d67;
    --mc-red: #dc4646;
    --mc-display: 'DM Serif Display', Georgia, serif;
}

body { color: var(--mc-ink); background: #fff; }
.mercavo-display { font-family: var(--mc-display); }
.mercavo-primary-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 30px; border-radius: 999px;
    background: var(--mc-red); color: #fff; font-size: 14px; font-weight: 700;
    text-decoration: none; box-shadow: 0 12px 30px rgba(220,70,70,.18);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mercavo-primary-button:hover { background: #171a18; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(23,26,24,.18); }

.mercavo-editorial-hero { padding: 12px 12px 0; background: #fff; }
.mercavo-hero-stage { height: 690px; border-radius: 18px; }
.mercavo-hero-media { left: 38%; }
.mercavo-hero-media img { object-position: center; }
.mercavo-hero-copy {
    z-index: 2; width: 58%; padding: 64px max(6vw, 56px);
    background: rgba(247,242,234,.97);
    clip-path: polygon(0 0, 87% 0, 100% 50%, 87% 100%, 0 100%);
}
.mercavo-hero-arrow {
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 999px; color: var(--mc-ink); background: rgba(255,255,255,.92);
    box-shadow: 0 8px 24px rgba(0,0,0,.1); transition: transform .2s ease, background-color .2s ease;
}
.mercavo-hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.mercavo-hero-arrow-prev { left: 24px; }
.mercavo-hero-arrow-next { right: 24px; }
.mercavo-editorial-hero .mercavo-hero-dot { border-color: rgba(23,26,24,.45); }
.mercavo-editorial-hero .mercavo-hero-dot.active { background: var(--mc-red); border-color: var(--mc-red); }

/* Ritmo editorial en secciones existentes */
main h2.text-3xl, main h2.text-4xl, main h2.text-5xl,
.home h2.text-3xl, .home h2.text-4xl, .home h2.text-5xl {
    font-family: var(--mc-display); font-weight: 400; letter-spacing: -.025em; color: var(--mc-ink);
}
.mercavo-product-card .mercavo-card-image,
.mercavo-product-page img { background: #f4f0e9; }
.mercavo-product-card { transition: transform .25s ease; }
.mercavo-product-card:hover { transform: translateY(-4px); }
.mercavo-quick-add-wrap { z-index: 12; }
.mercavo-quick-add { box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.mercavo-quick-add:disabled { cursor: wait; opacity: .75; }

.mercavo-quick-choice { display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.mercavo-quick-color { width: 38px; height: 38px; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px #d9d5ce; }
.mercavo-quick-color.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mc-ink); }
.mercavo-quick-text { min-height: 40px; padding: 0 16px; border: 1px solid #d9d5ce; border-radius: 999px; background: #fff; color: var(--mc-ink); font-size: 13px; font-weight: 600; }
.mercavo-quick-text.is-selected { border-color: var(--mc-ink); background: var(--mc-ink); color: #fff; }
.mercavo-product-whatsapp-support { margin-top: -2px; margin-bottom: 12px; }
.mercavo-section-shell { background: transparent; }
.mercavo-section-compact > section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.mercavo-section-none > section { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (min-width: 1024px) { .mercavo-section-mobile { display: none !important; } }
@media (max-width: 1023px) { .mercavo-section-desktop { display: none !important; } }

.mercavo-product-buy { padding-top: 4px; }
.mercavo-product-main-image { min-height: 540px; }
.mercavo-product-gallery .mercavo-gallery-thumb { border-radius: 8px; opacity: .72; transition: opacity .2s ease, border-color .2s ease; }
.mercavo-product-gallery .mercavo-gallery-thumb:hover { opacity: 1; }
.mercavo-product-buy #mercavo-cod-cta,
.mercavo-product-buy #mercavo-add-to-cart,
.mercavo-product-buy .mercavo-wa-buy { min-height: 54px; letter-spacing: .01em; }
.mercavo-product-buy #mercavo-add-to-cart { background: transparent; color: var(--mc-ink); border: 1px solid var(--mc-ink); }
.mercavo-product-buy #mercavo-add-to-cart:hover { background: var(--mc-ink); color: #fff; }

.mercavo-summary-card { background: var(--mc-warm) !important; border: 1px solid var(--mc-line); border-radius: 16px; box-shadow: 0 18px 50px rgba(61,49,34,.06); }
.mercavo-cart-row a.font-medium { font-size: 16px; }
.mercavo-cart-layout { align-items: start; }

.mercavo-commerce-trust { margin: 48px 0 0; border-top: 1px solid var(--mc-line); border-bottom: 1px solid var(--mc-line); background: #fbfaf7; }
.mercavo-commerce-trust-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.mercavo-commerce-trust-item { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 22px 24px; border-right: 1px solid var(--mc-line); }
.mercavo-commerce-trust-item:last-child { border-right: 0; }
.mercavo-commerce-trust-index { font-family: var(--mc-display); color: var(--mc-red); font-size: 28px; line-height: 1; }
.mercavo-commerce-trust-item strong, .mercavo-commerce-trust-item span { display: block; }
.mercavo-commerce-trust-item strong { font-size: 14px; }
.mercavo-commerce-trust-item div span { margin-top: 3px; color: var(--mc-muted); font-size: 12px; }

.woocommerce-checkout .form-row { margin-bottom: 16px !important; }
.woocommerce-checkout .form-row label { color: #545b52 !important; margin-bottom: 7px !important; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection { min-height: 50px; border-color: #dcd8d0 !important; border-radius: 10px !important; background: #fff; }
.woocommerce-checkout .form-row textarea { min-height: 110px; }
.woocommerce-checkout #payment .place-order button,
.cart_totals [data-mercavo-cart-checkout] { min-height: 54px; box-shadow: 0 12px 28px rgba(220,70,70,.16); }

@media (max-width: 1023px) {
    .mercavo-editorial-hero { padding: 8px 8px 0; }
    .mercavo-hero-stage { height: 680px; border-radius: 14px; }
    .mercavo-hero-media { left: 0; top: 42%; }
    .mercavo-hero-copy { width: 100%; height: 48%; padding: 42px 28px; clip-path: none; }
    .mercavo-hero-copy h1, .mercavo-hero-copy h2 { max-width: 600px; }
    .mercavo-hero-arrow { top: auto; bottom: 24px; transform: none; }
    .mercavo-hero-arrow:hover { transform: scale(1.05); }
    .mercavo-product-main-image { min-height: 0; }
    .mercavo-commerce-trust-grid { grid-template-columns: repeat(2,1fr); }
    .mercavo-commerce-trust-item:nth-child(2) { border-right: 0; }
    .mercavo-commerce-trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--mc-line); }
}

@media (min-width: 1024px) {
    .mercavo-product-page > div > .grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(380px, .85fr); }
    .mercavo-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; }
    .mercavo-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 460px; }
    .mercavo-cart-row img { width: 170px; height: 124px; }
}

@media (max-width: 639px) {
    .mercavo-hero-stage { height: 610px; }
    .mercavo-hero-media { top: 48%; }
    .mercavo-hero-copy { height: 54%; padding: 34px 22px; }
    .mercavo-hero-copy h1, .mercavo-hero-copy h2 { font-size: 43px; }
    .mercavo-hero-arrow { width: 40px; height: 40px; bottom: 18px; }
    .mercavo-hero-arrow-prev { left: 18px; }
    .mercavo-hero-arrow-next { right: 18px; }
    .mercavo-product-gallery { grid-template-columns: 58px 1fr; }
    .mercavo-commerce-trust-grid { grid-template-columns: 1fr; }
    .mercavo-commerce-trust-item { min-height: 84px; border-right: 0; border-bottom: 1px solid var(--mc-line); }
    .mercavo-commerce-trust-item:last-child { border-bottom: 0; }
    .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100% !important; margin-right: 0 !important; }
}

@media (max-width: 1023px) {
    body.single-product {
        padding-bottom: 76px;
    }

    body.single-product #mercavo-mobile-bar,
    body.single-product .mercavo-wa-fab {
        display: none !important;
    }
}
