/* Mommy Crafts V3.47.0
   Cambios aislados: iconos del header, herramientas de producto,
   vista rápida y comparación. No redefine el diseño general. */

/* Header: búsqueda, cuenta, comparación y carrito como iconos */
.navbar-actions.mc-header-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.navbar-actions.mc-header-actions .mc-header-icon,
.navbar-actions.mc-header-actions .account-button.account-session-chip,
.navbar-actions.mc-header-actions .cart-button {
    width: 4.6rem;
    min-width: 4.6rem;
    height: 4.6rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.navbar-actions.mc-header-actions .mc-header-icon {
    position: relative;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition), color var(--transition), border-color var(--transition), background var(--transition);
}

.navbar-actions.mc-header-actions .mc-header-icon:hover,
.navbar-actions.mc-header-actions .mc-header-icon:focus-visible,
.navbar-actions.mc-header-actions .mc-header-icon.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    transform: translateY(-0.15rem);
}

.navbar-actions.mc-header-actions .mc-header-icon i,
.navbar-actions.mc-header-actions .account-session-icon i,
.navbar-actions.mc-header-actions .cart-button > i {
    font-size: 1.8rem;
}

.navbar-actions.mc-header-actions .account-button.account-session-chip {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.navbar-actions.mc-header-actions .account-session-copy {
    display: none;
}

.navbar-actions.mc-header-actions .account-session-icon {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.navbar-actions.mc-header-actions .account-online-dot {
    top: -0.35rem;
    right: -0.45rem;
}

.navbar-actions.mc-header-actions .badge,
.navbar-actions.mc-header-actions .mc-compare-count {
    position: absolute;
    top: -0.45rem;
    right: -0.35rem;
    min-width: 2rem;
    height: 2rem;
    padding-inline: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.2rem solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-primary-dark);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

.navbar-actions.mc-header-actions .mc-header-search-panel {
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    z-index: 120;
    width: min(40rem, calc(100vw - 3rem));
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.navbar-actions.mc-header-actions .mc-header-search-panel[hidden] {
    display: none !important;
}

.navbar-actions.mc-header-actions .mc-header-search-panel .search-shell {
    width: 100%;
    max-width: none;
    display: block;
}

.navbar.mc-header-ready > .search-shell {
    display: none;
}

/* Acciones aisladas sobre tarjetas minimalistas */
.mc-product-toolbox {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mc-product-tool {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text);
    box-shadow: 0 0.8rem 2rem rgba(55, 42, 50, 0.14);
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.mc-product-tool:hover,
.mc-product-tool:focus-visible,
.mc-product-tool.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-0.2rem);
}

.mc-product-tool i {
    font-size: 1.55rem;
}

/* Botón puntual en la ficha del producto */
.mc-detail-compare-button {
    min-height: 4.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.mc-detail-compare-button.is-active {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Vista rápida: componente completamente aislado */
body.mc-quick-view-open {
    overflow: hidden;
}

.mc-quick-view {
    position: fixed;
    inset: 0;
    z-index: 20000;
}

.mc-quick-view[hidden] {
    display: none !important;
}

.mc-quick-view-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 24, 29, 0.58);
    backdrop-filter: blur(0.35rem);
}

.mc-quick-view-dialog {
    position: relative;
    z-index: 1;
    width: min(106rem, calc(100vw - 3rem));
    max-height: calc(100vh - 3rem);
    margin: 1.5rem auto;
    overflow: auto;
    padding: 2.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 3rem 7rem rgba(55, 42, 50, 0.26);
}

.mc-quick-view-close {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    z-index: 3;
    width: 4.2rem;
    height: 4.2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.mc-quick-view-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(34rem, 0.95fr);
    gap: 3rem;
    align-items: start;
}

.mc-quick-view-main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
}

.mc-quick-view-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1rem;
}

.mc-quick-view-thumb {
    width: 7rem;
    height: 7rem;
    padding: 0.35rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
}

.mc-quick-view-thumb.is-active {
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 0.25rem rgba(142, 69, 106, 0.12);
}

.mc-quick-view-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mc-quick-view-category {
    margin: 0 0 0.5rem;
    color: var(--color-primary-dark);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mc-quick-view-title {
    margin: 0;
    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: 1.15;
}

.mc-quick-view-review {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.3rem 0;
    color: var(--color-text-soft);
    font-size: 1.35rem;
}

.mc-quick-view-stars {
    color: #e7a329;
    letter-spacing: 0.08em;
}

.mc-quick-view-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mc-quick-view-price strong {
    color: var(--color-text);
    font-size: 2.8rem;
}

.mc-quick-view-price del {
    color: #9a8f93;
    font-size: 1.5rem;
}

.mc-quick-view-description {
    margin: 0 0 1.8rem;
    color: var(--color-text-soft);
    line-height: 1.7;
}

.mc-quick-view-option {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.mc-quick-view-option > strong {
    font-size: 1.35rem;
}

.mc-quick-view-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.mc-quick-view-color,
.mc-quick-view-size {
    min-width: 4.4rem;
    min-height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.mc-quick-view-color {
    width: 4.4rem;
    padding: 0;
}

.mc-quick-view-color span {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid rgba(55, 42, 50, 0.18);
}

.mc-quick-view-size {
    padding-inline: 1.4rem;
    font-weight: 700;
}

.mc-quick-view-color.is-active,
.mc-quick-view-size.is-active {
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 0.25rem rgba(142, 69, 106, 0.12);
    color: var(--color-primary-dark);
}

.mc-quick-view-buy-row {
    display: grid;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: end;
    margin-top: 2rem;
}

.mc-quick-view-quantity {
    display: grid;
    gap: 0.7rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.mc-quick-view-quantity-control {
    min-height: 4.8rem;
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr) 4.4rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
}

.mc-quick-view-quantity-control button,
.mc-quick-view-quantity-control input {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    text-align: center;
}

.mc-quick-view-quantity-control button {
    cursor: pointer;
    font-size: 1.8rem;
}

.mc-quick-view-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
}

.mc-quick-view-link,
.mc-quick-view-compare {
    min-height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding-inline: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-weight: 700;
}

.mc-quick-view-compare.is-active {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Página nueva de comparación; no altera otras páginas */
.mc-compare-page {
    padding-block: 5rem 7rem;
}

.mc-compare-heading {
    margin-bottom: 3rem;
    text-align: center;
}

.mc-compare-heading h1 {
    margin: 0 0 1rem;
    font-size: clamp(3rem, 5vw, 5rem);
}

.mc-compare-heading p {
    max-width: 70rem;
    margin: 0 auto;
    color: var(--color-text-soft);
}

.mc-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.mc-compare-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.mc-compare-remove {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    width: 3.8rem;
    height: 3.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.mc-compare-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
}

.mc-compare-category {
    margin: 1.5rem 0 0.4rem;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mc-compare-card h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.3;
}

.mc-compare-card-price {
    margin: 1rem 0;
    font-size: 2.2rem;
    font-weight: 700;
}

.mc-compare-specs {
    display: grid;
    gap: 0.8rem;
    margin: 1.6rem 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-soft);
}

.mc-compare-card-actions {
    display: grid;
    gap: 0.9rem;
    margin-top: auto;
}

.mc-compare-empty {
    grid-column: 1 / -1;
    padding: 4rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    text-align: center;
}

.mc-compare-empty i {
    display: block;
    margin-bottom: 1rem;
    color: var(--color-primary-dark);
    font-size: 3.6rem;
}

.mc-compare-empty h2 {
    margin: 0 0 0.8rem;
}

.mc-compare-empty p {
    margin: 0 auto 1.6rem;
    max-width: 56rem;
    color: var(--color-text-soft);
}

@media (max-width: 950px) {
    .mc-quick-view-grid {
        grid-template-columns: 1fr;
    }

    .mc-compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .navbar-actions.mc-header-actions {
        gap: 0.55rem;
    }

    .navbar-actions.mc-header-actions .mc-header-icon,
    .navbar-actions.mc-header-actions .account-button.account-session-chip,
    .navbar-actions.mc-header-actions .cart-button {
        width: 4rem;
        min-width: 4rem;
        height: 4rem;
    }

    .mc-product-toolbox {
        top: 0.8rem;
        right: 0.8rem;
        gap: 0.55rem;
    }

    .mc-product-tool {
        width: 3.5rem;
        height: 3.5rem;
    }

    .mc-quick-view-dialog {
        padding: 1.6rem;
    }

    .mc-quick-view-buy-row,
    .mc-compare-grid {
        grid-template-columns: 1fr;
    }
}

/* V3.47.0 · posiciones independientes y compatibles con las animaciones internas */
.container-hero .hero > .mc-header-right-group {
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.4rem;
    min-width: 0;
}

.container-hero .mc-header-right-group > .customer-support {
    justify-self: auto;
    flex: none;
    transform: none;
    translate: var(--mc-header-support-x, 0px) var(--mc-header-support-y, 0px);
}

.container-hero .mc-header-right-group > .mc-header-actions,
.container-hero .navbar-actions.mc-header-actions {
    flex: none;
    transform: none;
    translate: var(--mc-header-actions-x, 0px) var(--mc-header-actions-y, 0px);
}

.container-hero .social-icons-header {
    transform: none;
    translate: var(--mc-header-social-x, 0px) var(--mc-header-social-y, 0px);
}

.container-hero .container-logo {
    transform: none;
    translate: var(--mc-header-brand-x, 0px) var(--mc-header-brand-y, 0px);
}

@media (max-width: 820px) {
    .container-hero .hero > .mc-header-right-group {
        gap: 0;
    }

    .container-hero .mc-header-right-group > .customer-support {
        display: none;
    }
}


/* V3.35 · evita salto visual del header al aplicar posiciones guardadas */
.site-header .social-icons-header,
.site-header .container-logo,
.site-header .customer-support,
.site-header .navbar-actions {
    opacity: 0;
}

body.mc-site-settings-ready .site-header .social-icons-header,
body.mc-site-settings-ready .site-header .container-logo,
body.mc-site-settings-ready .site-header .customer-support,
body.mc-site-settings-ready .site-header .navbar-actions,
html.mc-site-settings-ready .site-header .social-icons-header,
html.mc-site-settings-ready .site-header .container-logo,
html.mc-site-settings-ready .site-header .customer-support,
html.mc-site-settings-ready .site-header .navbar-actions {
    opacity: 1;
    transition: opacity 120ms ease;
}

/* V3.35 · badges apilados en todas las tarjetas para no chocar con comparar */
.container-img .product-badge {
    z-index: 5;
    max-width: calc(100% - 7.6rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container-img .product-discount-badge {
    top: calc(1.2rem + 3.2rem);
    right: auto;
    left: 1.2rem;
    z-index: 5;
}

.container-img .product-badge[hidden] + .product-discount-badge {
    top: 1.2rem;
}

@media (max-width: 520px) {
    .container-img .product-badge,
    .container-img .product-discount-badge {
        left: 0.9rem;
        font-size: 0.95rem;
    }

    .container-img .product-discount-badge {
        top: calc(0.9rem + 3rem);
    }

    .container-img .product-badge[hidden] + .product-discount-badge {
        top: 0.9rem;
    }
}


/* V3.47.0 · descuento siempre debajo de etiqueta y lejos de comparar */
.container-img {
    --mc-card-tool-safe-area: 6.8rem;
}

.container-img .product-badge,
.container-img .product-discount-badge {
    right: auto !important;
    left: 1.2rem !important;
    max-width: calc(100% - var(--mc-card-tool-safe-area) - 1.8rem);
}

.container-img .product-discount-badge {
    top: calc(1.2rem + 3.2rem) !important;
}

.container-img .product-badge[hidden] + .product-discount-badge {
    top: 1.2rem !important;
}

@media (max-width: 520px) {
    .container-img {
        --mc-card-tool-safe-area: 5.6rem;
    }

    .container-img .product-badge,
    .container-img .product-discount-badge {
        left: 0.9rem !important;
    }

    .container-img .product-discount-badge {
        top: calc(0.9rem + 3rem) !important;
    }

    .container-img .product-badge[hidden] + .product-discount-badge {
        top: 0.9rem !important;
    }
}

/* V3.36 · badges protegidos en todas las tarjetas con herramientas de comparar */
.card-product .container-img {
    --mc-card-tool-safe-area: 6.8rem;
}

.card-product .container-img .product-badge,
.card-product .container-img .product-discount-badge {
    right: auto !important;
    left: 1.2rem !important;
    max-width: calc(100% - var(--mc-card-tool-safe-area) - 2rem) !important;
    line-height: 1.15;
}

.card-product .container-img .product-discount-badge {
    top: calc(1.2rem + 3.25rem) !important;
}

.card-product .container-img .product-badge[hidden] + .product-discount-badge {
    top: 1.2rem !important;
}

.card-product .mc-product-toolbox {
    z-index: 8;
}

@media (max-width: 520px) {
    .card-product .container-img {
        --mc-card-tool-safe-area: 5.3rem;
    }

    .card-product .container-img .product-badge,
    .card-product .container-img .product-discount-badge {
        left: .85rem !important;
        max-width: calc(100% - var(--mc-card-tool-safe-area) - 1.4rem) !important;
    }

    .card-product .container-img .product-discount-badge {
        top: calc(.85rem + 2.85rem) !important;
    }

    .card-product .container-img .product-badge[hidden] + .product-discount-badge {
        top: .85rem !important;
    }
}