/**
 * Omni Orders — modern storefront polish.
 *
 * Direction-agnostic by construction: every offset uses logical properties or
 * vertical/scale transforms, so the same rules hold for Arabic (RTL) and
 * English (LTR) without a mirrored copy.
 *
 * Motion is gated behind `prefers-reduced-motion` and, for scroll reveals,
 * behind a `.omni-motion-ready` class that only lands when the observer script
 * runs — so content stays visible if JavaScript never executes.
 */

:root {
    --omni-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --omni-dur: 260ms;
    --omni-dur-slow: 520ms;
    --omni-lift: -4px;
    --omni-ring: rgba(14, 154, 167, 0.28);
    --omni-shadow: 0 10px 30px -12px rgba(16, 42, 67, 0.28);
    --omni-shadow-hi: 0 18px 44px -14px rgba(16, 42, 67, 0.36);
}

/* =============================================================================
   PRODUCT CARDS
   ============================================================================= */

.wd-product {
    transition:
        transform var(--omni-dur) var(--omni-ease),
        box-shadow var(--omni-dur) var(--omni-ease);
    will-change: transform;
}

.wd-product:hover,
.wd-product:focus-within {
    transform: translate3d(0, var(--omni-lift), 0);
    box-shadow: var(--omni-shadow);
}

/* Settle the image zoom so the card frame stays crisp while the photo scales. */
.wd-product .product-image-link,
.wd-product .wd-product-grid-slider {
    overflow: hidden;
}

.wd-product .product-image-link img {
    transition: transform var(--omni-dur-slow) var(--omni-ease);
}

.wd-product:hover .product-image-link img {
    transform: scale(1.055);
}

/* Keyboard users get the same affordance as pointer users. */
.wd-product a:focus-visible {
    outline: 2px solid var(--omni-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* =============================================================================
   BUTTONS & INTERACTIVE CHROME
   ============================================================================= */

.btn,
.button,
.wd-buttons .wd-action-btn > a,
button[type="submit"] {
    transition:
        transform var(--omni-dur) var(--omni-ease),
        box-shadow var(--omni-dur) var(--omni-ease),
        background-color var(--omni-dur) var(--omni-ease);
}

.btn:hover,
.button:hover,
button[type="submit"]:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--omni-shadow);
}

.btn:active,
.button:active,
button[type="submit"]:active {
    transform: translate3d(0, 0, 0);
    box-shadow: none;
}

/* Sale / "new" badges get a single gentle entrance, never a loop. */
.wd-product .product-labels .product-label {
    animation: omni-pop var(--omni-dur-slow) var(--omni-ease) both;
}

@keyframes omni-pop {
    from {
        opacity: 0;
        transform: scale(0.84);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =============================================================================
   CATEGORY TILES & INFO BOXES
   ============================================================================= */

.wd-cat,
.wd-info-box {
    transition:
        transform var(--omni-dur) var(--omni-ease),
        box-shadow var(--omni-dur) var(--omni-ease);
}

.wd-cat:hover,
.wd-info-box:hover {
    transform: translate3d(0, var(--omni-lift), 0);
    box-shadow: var(--omni-shadow-hi);
}

.wd-cat .wd-cat-image img {
    transition: transform var(--omni-dur-slow) var(--omni-ease);
}

.wd-cat:hover .wd-cat-image img {
    transform: scale(1.06);
}

/* =============================================================================
   SCROLL REVEAL

   Only active once the observer has tagged the document; the pre-reveal state
   is scoped under `.omni-motion-ready` so a JS failure leaves content visible.
   ============================================================================= */

.omni-motion-ready .omni-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity var(--omni-dur-slow) var(--omni-ease),
        transform var(--omni-dur-slow) var(--omni-ease);
}

.omni-motion-ready .omni-reveal.omni-revealed {
    opacity: 1;
    transform: none;
}

/* =============================================================================
   SKELETON SHIMMER FOR AJAX GRIDS

   Woodmart adds `.wd-loading` during AJAX shop pagination and filtering.
   `background-position` is flipped for RTL so the sweep follows reading order.
   ============================================================================= */

.wd-loading .wd-product {
    animation: omni-shimmer 1.1s linear infinite;
    background-image: linear-gradient(
        90deg,
        rgba(16, 42, 67, 0) 0%,
        rgba(16, 42, 67, 0.06) 50%,
        rgba(16, 42, 67, 0) 100%
    );
    background-size: 220% 100%;
}

@keyframes omni-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

.rtl .wd-loading .wd-product {
    animation-direction: reverse;
}

/* =============================================================================
   STICKY HEADER REFINEMENT
   ============================================================================= */

.whb-sticked {
    box-shadow: var(--omni-shadow);
    backdrop-filter: saturate(140%) blur(6px);
}

/* =============================================================================
   MODALS (QUICK VIEW, POPUPS)

   The backdrop already fades in on its own; the content box itself had no
   transition at all and simply popped into place. Scoped to magnific-popup's
   own ready/removing lifecycle classes, so open and close both animate.
   ============================================================================= */

.mfp-content {
    transform: scale(0.96);
    opacity: 0;
    transition:
        transform var(--omni-dur-slow) var(--omni-ease),
        opacity var(--omni-dur-slow) var(--omni-ease);
}

.mfp-ready .mfp-content {
    transform: scale(1);
    opacity: 1;
}

.mfp-removing .mfp-content {
    transform: scale(0.96);
    opacity: 0;
}

/* =============================================================================
   WISHLIST / COMPARE / ADD-TO-CART ICON FEEDBACK

   A short, single-shot "pop" the instant an action completes — confirms the
   click landed without competing with the icon's own hover state.
   ============================================================================= */

.wd-wishlist-btn.added .wd-wishlist-icon,
.wd-compare-btn.added .wd-compare-icon,
.add_to_cart_button.added {
    animation: omni-pop var(--omni-dur) var(--omni-ease);
}

/* =============================================================================
   CATEGORY CIRCLES

   Matches the product-card lift so the shop page's category grid and the
   product grid beneath it feel like one system.
   ============================================================================= */

.wd-cat .category-image-wrapp {
    transition: transform var(--omni-dur) var(--omni-ease);
}

.wd-cat:hover .category-image-wrapp {
    transform: scale(1.04);
}

/* =============================================================================
   TAB SWITCHING (product tabs, description/reviews, "Hot Categories")

   Woodmart swaps tab panels with a hard display toggle; a brief fade keeps
   the switch from reading as an abrupt content swap.
   ============================================================================= */

.wd-tab-content,
.woocommerce-tabs .panel {
    animation: omni-fade-in var(--omni-dur-slow) var(--omni-ease);
}

@keyframes omni-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* =============================================================================
   FORM FOCUS STATES (checkout, login, search, reviews)
   ============================================================================= */

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout select:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.search-field:focus {
    transition: box-shadow var(--omni-dur) var(--omni-ease), border-color var(--omni-dur) var(--omni-ease);
    box-shadow: 0 0 0 3px var(--omni-ring);
}

/* =============================================================================
   REDUCED MOTION

   Honour the OS setting: drop movement, keep the colour/shadow feedback that
   communicates state.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .wd-product,
    .wd-product .product-image-link img,
    .wd-cat,
    .wd-cat .wd-cat-image img,
    .wd-cat .category-image-wrapp,
    .wd-info-box,
    .btn,
    .button,
    button[type="submit"],
    .mfp-content,
    .wd-wishlist-btn.added .wd-wishlist-icon,
    .wd-compare-btn.added .wd-compare-icon,
    .add_to_cart_button.added,
    .wd-tab-content,
    .woocommerce-tabs .panel,
    .omni-motion-ready .omni-reveal {
        transition-duration: 1ms;
        animation: none;
    }

    .wd-product:hover,
    .wd-cat:hover,
    .wd-cat:hover .category-image-wrapp,
    .wd-info-box:hover,
    .btn:hover,
    .button:hover,
    button[type="submit"]:hover {
        transform: none;
    }

    .wd-product:hover .product-image-link img,
    .wd-cat:hover .wd-cat-image img {
        transform: none;
    }

    .mfp-content {
        transform: none;
        opacity: 1;
    }

    .omni-motion-ready .omni-reveal {
        opacity: 1;
        transform: none;
    }

    .wd-loading .wd-product {
        animation: none;
    }
}