/*
 * Micro-interactions Casas Vela.
 * Les états restent purement visuels ; Woo et les comportements natifs ne
 * sont pas modifiés.
 */

body.wp-theme-casas-vela {
    --casas-interaction-fast: 180ms;
    --casas-interaction-media: 460ms;
    --casas-interaction-collection-media: 480ms;
    --casas-interaction-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --casas-interaction-hover: #f2e7d8;
    --casas-interaction-active: #ead9c4;
    --casas-interaction-primary-hover: #173f3a;
    --casas-interaction-primary-active: #0f302c;
}

html {
    scroll-padding-top: 88px;
}

/* Le header conserve sa géométrie ; son fond et son filet existants restent opaques. */
body.wp-theme-casas-vela .wp-block-template-part:has(.casas-pro-header) {
    position: sticky;
    top: 0;
    z-index: 30;
}

body.wp-theme-casas-vela .casas-pro-header {
    background-color: var(--wp--preset--color--ivory);
}

/* Le contrôle reste sous le header et les overlays Woo, sans affecter le flux. */
body.wp-theme-casas-vela .casas-pro-back-to-top {
    position: fixed;
    z-index: 20;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(36, 72, 74, 0.22);
    border-radius: 12px;
    background-color: var(--wp--preset--color--ivory);
    color: var(--wp--preset--color--deep-green);
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color var(--casas-interaction-fast) var(--casas-interaction-ease),
        border-color var(--casas-interaction-fast) var(--casas-interaction-ease),
        color var(--casas-interaction-fast) var(--casas-interaction-ease);
}

body.wp-theme-casas-vela .casas-pro-back-to-top[hidden] {
    display: none;
}

body.wp-theme-casas-vela .casas-pro-back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

body.wp-theme-casas-vela .casas-pro-back-to-top:focus-visible {
    outline: 2px solid #24484a;
    outline-offset: 2px;
    box-shadow: none;
}

body.wp-theme-casas-vela .casas-pro-back-to-top:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

/* Boutons primaires, secondaires et compacts. */
body.wp-theme-casas-vela :where(
    .woocommerce a.button,
    .woocommerce button.button,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .wc-block-mini-cart__footer-actions a,
    .wc-block-mini-cart__shopping-button
) {
    transition:
        background-color var(--casas-interaction-fast) var(--casas-interaction-ease),
        border-color var(--casas-interaction-fast) var(--casas-interaction-ease),
        color var(--casas-interaction-fast) var(--casas-interaction-ease);
}

body.wp-theme-casas-vela :where(
    .wp-element-button,
    .woocommerce a.button,
    .woocommerce button.button,
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .wc-block-mini-cart__footer-actions a,
    .wc-block-mini-cart__shopping-button
):active:not(:disabled, .disabled) {
    border-color: var(--casas-interaction-primary-active);
    background-color: var(--casas-interaction-primary-active);
    color: var(--wp--preset--color--ivory);
}

body.wp-theme-casas-vela .wp-element-button:not(.has-border-color, .has-contrast-background-color, [style*="background-color:#fdf8ef"]):active {
    border-color: var(--casas-interaction-primary-active) !important;
    background-color: var(--casas-interaction-primary-active) !important;
    color: var(--wp--preset--color--ivory) !important;
}

/* Boutons éditoriaux clairs ou bordés : retour tonal, jamais de bascule brutale. */
body.wp-theme-casas-vela .wp-element-button:is(.has-contrast-background-color, [style*="background-color:#fdf8ef"]):active {
    border-color: var(--casas-interaction-active) !important;
    background-color: var(--casas-interaction-active) !important;
    color: var(--wp--preset--color--deep-green) !important;
}

body.wp-theme-casas-vela .wp-element-button.has-border-color:not([style*="color:#fdf8ef"], [style*="color:#fffdf7"]):active {
    border-color: var(--casas-interaction-primary-hover) !important;
    background-color: var(--casas-interaction-active) !important;
    color: var(--wp--preset--color--deep-green) !important;
}

body.wp-theme-casas-vela .wp-element-button.has-border-color:is([style*="color:#fdf8ef"], [style*="color:#fffdf7"]):active {
    background-color: rgba(253, 248, 239, 0.2) !important;
}

/* La CTA produit conserve son contraste sur son fond sable. */
body.wp-theme-casas-vela.single-product .casas-pro-product-purchase .single_add_to_cart_button:active:not(:disabled, .disabled) {
    border-color: var(--casas-interaction-primary-active);
    background-color: var(--casas-interaction-primary-active);
    color: #fffdf7;
}

/* Navigation et liens fonctionnels : soulignement sans déplacement. */
body.wp-theme-casas-vela :where(
    .casas-pro-navigation .wp-block-navigation-item__content,
    .casas-pro-footer .wp-block-navigation-item__content,
    .casas-pro-product-card__title a,
    .casas-pro-product-nav__link a,
    .casas-pro-product-assurance__item a,
    .wc-block-components-product-name
) {
    text-decoration-color: transparent;
    transition:
        color var(--casas-interaction-fast) ease,
        text-decoration-color var(--casas-interaction-fast) ease;
}

body.wp-theme-casas-vela .casas-pro-navigation .current-menu-item > a {
    text-decoration-color: currentColor;
}

/* Le padding est présent au repos afin que le fond de survol ne déplace rien. */
body.wp-theme-casas-vela .casas-pro-navigation .wp-block-navigation-item__content {
    box-sizing: border-box;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-inline: 10px;
    border-radius: 12px;
    background-color: transparent;
    text-decoration-line: none;
    transition:
        background-color var(--casas-interaction-fast) var(--casas-interaction-ease),
        color var(--casas-interaction-fast) var(--casas-interaction-ease),
        text-decoration-color var(--casas-interaction-fast) var(--casas-interaction-ease);
}

body.wp-theme-casas-vela .casas-pro-navigation .current-menu-item > .wp-block-navigation-item__content {
    text-decoration-line: underline;
}

body.wp-theme-casas-vela .casas-pro-navigation .wp-block-navigation-item__content:focus-visible {
    background-color: var(--casas-interaction-hover);
    outline: 2px solid #24484a;
    outline-offset: 2px;
    box-shadow: none;
}

/* Icônes du header : même surface légère, sans bloc permanent. */
body.wp-theme-casas-vela .casas-pro-header-icons :is(
    .wc-block-mini-cart__button,
    .wc-block-customer-account__link
) {
    box-sizing: border-box;
    border-radius: 12px;
    background: transparent;
    opacity: 1;
    transition:
        background-color var(--casas-interaction-fast) var(--casas-interaction-ease),
        color var(--casas-interaction-fast) var(--casas-interaction-ease),
        opacity var(--casas-interaction-fast) var(--casas-interaction-ease);
}

body.wp-theme-casas-vela .casas-pro-header-icons :is(
    .wc-block-mini-cart__button,
    .wc-block-customer-account__link
):active {
    background-color: var(--casas-interaction-active);
    opacity: 1;
}

body.wp-theme-casas-vela:has(
    .wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden)
) .casas-pro-header-icons .wc-block-mini-cart__button {
    background-color: var(--casas-interaction-active);
    opacity: 1;
}

/* Les contrôles du drawer partagent le même tempo sans changer leur logique. */
body.wp-theme-casas-vela :where(
    .wc-block-components-drawer__close,
    .wc-block-components-quantity-selector__button,
    .wc-block-cart-item__remove-link
) {
    transition:
        background-color var(--casas-interaction-fast) var(--casas-interaction-ease),
        color var(--casas-interaction-fast) var(--casas-interaction-ease),
        opacity var(--casas-interaction-fast) var(--casas-interaction-ease);
}

/* L’image bouge dans son cadre ; la carte et son rayon restent fixes. */
body.wp-theme-casas-vela .casas-pro-product-card__media img,
body.wp-theme-casas-vela .casas-pro-product-card__media .wc-block-components-product-image__image {
    transform: scale(1) rotate(0deg);
    transform-origin: center;
    transition:
        opacity 220ms ease,
        transform var(--casas-interaction-media) var(--casas-interaction-ease);
}

/* La grande image Collection se déplace seule, dans son cadre existant. */
body.wp-theme-casas-vela.home .casas-pro-collection-feature > .wp-block-image {
    overflow: hidden;
    border-radius: 12px;
}

body.wp-theme-casas-vela.home .casas-pro-collection-feature > .wp-block-image > a > img {
    transform: scale(1) rotate(0deg);
    transform-origin: center;
    transition: transform var(--casas-interaction-collection-media) var(--casas-interaction-ease);
}

body.wp-theme-casas-vela.home .casas-pro-collection-feature > .wp-block-image > a:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

body.wp-theme-casas-vela.home .casas-pro-collection-feature > .wp-block-image > a:focus-visible {
    outline: 2px solid #24484a;
    outline-offset: -2px;
    border-radius: 12px;
    box-shadow: none;
}

/* Le visuel seul suit une dérive de caméra continue dans le cadre Cover natif. */
body.wp-theme-casas-vela .casas-pro-hero > .wp-block-cover__image-background {
    transform-origin: center;
    will-change: transform;
    animation: casas-hero-image-breathe 30s cubic-bezier(0.45, 0.32, 0.55, 0.68) infinite;
}

@keyframes casas-hero-image-breathe {
    0% {
        transform: translate3d(-0.12%, -0.08%, 0) scale(1.014);
    }

    8% {
        transform: translate3d(-0.19%, -0.13%, 0) scale(1.013);
    }

    20% {
        transform: translate3d(-0.3%, -0.18%, 0) scale(1.022);
    }

    29% {
        transform: translate3d(-0.36%, -0.2%, 0) scale(1.029);
    }

    38% {
        transform: translate3d(-0.33%, -0.22%, 0) scale(1.034);
    }

    50% {
        transform: translate3d(-0.13%, -0.15%, 0) scale(1.037);
    }

    62% {
        transform: translate3d(0.1%, -0.03%, 0) scale(1.04);
    }

    69% {
        transform: translate3d(0.25%, 0.07%, 0) scale(1.039);
    }

    78% {
        transform: translate3d(0.36%, 0.15%, 0) scale(1.035);
    }

    87% {
        transform: translate3d(0.25%, 0.2%, 0) scale(1.028);
    }

    94% {
        transform: translate3d(0.05%, 0.11%, 0) scale(1.02);
    }

    100% {
        transform: translate3d(-0.12%, -0.08%, 0) scale(1.014);
    }
}

@media (hover: hover) and (pointer: fine) {
    body.wp-theme-casas-vela :where(
        .woocommerce a.button,
        .woocommerce button.button,
        .wc-block-cart__submit-button,
        .wc-block-components-checkout-place-order-button,
        .wc-block-mini-cart__footer-actions a,
        .wc-block-mini-cart__shopping-button
    ):hover:not(:disabled, .disabled) {
        border-color: var(--casas-interaction-primary-hover);
        background-color: var(--casas-interaction-primary-hover);
        color: var(--wp--preset--color--ivory);
    }

    body.wp-theme-casas-vela .wp-element-button:not(.has-border-color, .has-contrast-background-color, [style*="background-color:#fdf8ef"]):hover {
        border-color: var(--casas-interaction-primary-hover) !important;
        background-color: var(--casas-interaction-primary-hover) !important;
        color: var(--wp--preset--color--ivory) !important;
    }

    body.wp-theme-casas-vela .wp-element-button:is(.has-contrast-background-color, [style*="background-color:#fdf8ef"]):hover {
        border-color: var(--casas-interaction-hover) !important;
        background-color: var(--casas-interaction-hover) !important;
        color: var(--wp--preset--color--deep-green) !important;
    }

    body.wp-theme-casas-vela .wp-element-button.has-border-color:not([style*="color:#fdf8ef"], [style*="color:#fffdf7"]):hover {
        border-color: var(--casas-interaction-primary-hover) !important;
        background-color: var(--casas-interaction-hover) !important;
        color: var(--wp--preset--color--deep-green) !important;
    }

    body.wp-theme-casas-vela .wp-element-button.has-border-color:is([style*="color:#fdf8ef"], [style*="color:#fffdf7"]):hover {
        background-color: rgba(253, 248, 239, 0.12) !important;
    }

    body.wp-theme-casas-vela :where(
        .casas-pro-navigation .wp-block-navigation-item__content,
        .casas-pro-footer .wp-block-navigation-item__content,
        .casas-pro-product-card__title a,
        .casas-pro-product-nav__link a,
        .casas-pro-product-assurance__item a,
        .wc-block-components-product-name
    ):hover {
        text-decoration-color: currentColor;
    }

    body.wp-theme-casas-vela .casas-pro-navigation .wp-block-navigation-item__content:hover {
        background-color: var(--casas-interaction-hover);
        text-decoration-color: transparent;
        text-decoration-line: none;
    }

    body.wp-theme-casas-vela .casas-pro-navigation .current-menu-item > .wp-block-navigation-item__content:hover {
        text-decoration-color: currentColor;
        text-decoration-line: underline;
    }

    body.wp-theme-casas-vela .casas-pro-header-icons :is(
        .wc-block-mini-cart__button,
        .wc-block-customer-account__link
    ):hover {
        background-color: var(--casas-interaction-hover);
        opacity: 1;
    }

    body.wp-theme-casas-vela .casas-pro-back-to-top:hover {
        border-color: rgba(36, 72, 74, 0.3);
        background-color: var(--casas-interaction-hover);
        color: var(--wp--preset--color--deep-green);
    }

    body.wp-theme-casas-vela.single-product .casas-pro-product-purchase .single_add_to_cart_button:hover:not(:disabled, .disabled) {
        border-color: var(--casas-interaction-primary-hover);
        background-color: var(--casas-interaction-primary-hover);
        color: #fffdf7;
    }

    body.wp-theme-casas-vela.single-product .casas-pro-product-purchase .single_add_to_cart_button:hover:active:not(:disabled, .disabled) {
        border-color: var(--casas-interaction-primary-active) !important;
        background-color: var(--casas-interaction-primary-active) !important;
        color: #fffdf7 !important;
    }

    body.wp-theme-casas-vela .casas-pro-header-icons :is(
        .wc-block-mini-cart__button,
        .wc-block-customer-account__link
    ):hover:active {
        background-color: var(--casas-interaction-active);
    }

    body.wp-theme-casas-vela .casas-pro-product-card__media:hover img,
    body.wp-theme-casas-vela .casas-pro-product-card__media:hover .wc-block-components-product-image__image {
        opacity: 0.98;
        transform: scale(1.03) rotate(0.4deg);
    }

    body.wp-theme-casas-vela.home .casas-pro-collection-feature > .wp-block-image:hover > a > img {
        transform: scale(1.02) rotate(0.25deg);
    }
}

@media (hover: none) {
    body.wp-theme-casas-vela .casas-pro-product-card__media:hover img,
    body.wp-theme-casas-vela .casas-pro-product-card__media:hover .wc-block-components-product-image__image {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 600px) {
    body.wp-theme-casas-vela .casas-pro-hero > .wp-block-cover__image-background {
        animation-name: casas-hero-image-breathe-mobile;
    }

    @keyframes casas-hero-image-breathe-mobile {
        0% {
            transform: translate3d(-0.07%, -0.05%, 0) scale(1.013);
        }

        8% {
            transform: translate3d(-0.11%, -0.08%, 0) scale(1.012);
        }

        20% {
            transform: translate3d(-0.18%, -0.11%, 0) scale(1.018);
        }

        29% {
            transform: translate3d(-0.22%, -0.12%, 0) scale(1.022);
        }

        38% {
            transform: translate3d(-0.2%, -0.13%, 0) scale(1.025);
        }

        50% {
            transform: translate3d(-0.08%, -0.09%, 0) scale(1.027);
        }

        62% {
            transform: translate3d(0.07%, -0.02%, 0) scale(1.029);
        }

        69% {
            transform: translate3d(0.15%, 0.04%, 0) scale(1.028);
        }

        78% {
            transform: translate3d(0.21%, 0.09%, 0) scale(1.026);
        }

        87% {
            transform: translate3d(0.15%, 0.12%, 0) scale(1.021);
        }

        94% {
            transform: translate3d(0.03%, 0.06%, 0) scale(1.016);
        }

        100% {
            transform: translate3d(-0.07%, -0.05%, 0) scale(1.013);
        }
    }

    body.wp-theme-casas-vela .casas-pro-back-to-top {
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.wp-theme-casas-vela .casas-pro-hero > .wp-block-cover__image-background {
        transform: none;
        animation: none;
    }

    body.wp-theme-casas-vela :where(a, button, img) {
        transition-duration: 0.01ms;
    }

    body.wp-theme-casas-vela .casas-pro-header-icons :is(
        .wc-block-mini-cart__button,
        .wc-block-customer-account__link
    ),
    body.wp-theme-casas-vela .casas-pro-product-card__media img,
    body.wp-theme-casas-vela .casas-pro-product-card__media .wc-block-components-product-image__image,
    body.wp-theme-casas-vela.home .casas-pro-collection-feature > .wp-block-image > a > img {
        transition-duration: 0.01ms;
    }

    body.wp-theme-casas-vela :is(
        .wp-element-button,
        .woocommerce a.button,
        .woocommerce button.button,
        .wc-block-cart__submit-button,
        .wc-block-components-checkout-place-order-button,
        .wc-block-mini-cart__footer-actions a,
        .wc-block-mini-cart__shopping-button,
        .casas-pro-header-icons .wc-block-mini-cart__button,
        .casas-pro-header-icons .wc-block-customer-account__link
    ):is(:hover, :active),
    body.wp-theme-casas-vela .casas-pro-product-card__media:hover img,
    body.wp-theme-casas-vela .casas-pro-product-card__media:hover .wc-block-components-product-image__image,
    body.wp-theme-casas-vela.home .casas-pro-collection-feature > .wp-block-image:hover > a > img {
        transform: none;
    }
}