/* ========================================
   WONDERLAND
   Global Design System
======================================== */

:root {
    /* Brand */
    --wl-purple: #7b4ce2;
    --wl-purple-dark: #5d34bd;
    --wl-purple-light: #eee7ff;

    --wl-pink: #ff75b5;
    --wl-blue: #72c7ff;
    --wl-yellow: #ffd75e;
    --wl-green: #7ed9a6;

    /* Backgrounds */
    --wl-bg: #ffffff;
    --wl-bg-soft: #faf7ff;
    --wl-bg-purple: #f4efff;

    /* Text */
    --wl-text: #282438;
    --wl-text-soft: #746f80;

    /* Borders */
    --wl-border: #ece7f5;

    /* Radius */
    --wl-radius-sm: 10px;
    --wl-radius: 18px;
    --wl-radius-lg: 26px;
    --wl-radius-pill: 999px;

    /* Shadows */
    --wl-shadow-sm: 0 4px 14px rgba(62, 42, 91, .08);
    --wl-shadow: 0 10px 30px rgba(62, 42, 91, .12);

    /* Animation */
    --wl-transition: .2s ease;
}


/* ========================================
   BASE
======================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--wl-bg);
    color: var(--wl-text);
}


/* Links */

a {
    transition: color var(--wl-transition);
}


/* ========================================
   BUTTONS
======================================== */

button,
.button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-radius: var(--wl-radius-pill) !important;
    border: 0;
    font-weight: 700;
    transition:
        transform var(--wl-transition),
        box-shadow var(--wl-transition),
        background-color var(--wl-transition);
}

button:hover,
.button:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--wl-shadow-sm);
}


/* Primary buttons */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single_add_to_cart_button {
    background: var(--wl-purple) !important;
    color: #fff !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover {
    background: var(--wl-purple-dark) !important;
}


/* ========================================
   FORM ELEMENTS
======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    border-radius: var(--wl-radius-sm);
    border: 1px solid var(--wl-border);
    transition:
        border-color var(--wl-transition),
        box-shadow var(--wl-transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--wl-purple);
    box-shadow: 0 0 0 3px rgba(123, 76, 226, .12);
    outline: none;
}


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

.woocommerce ul.products li.product {
    border-radius: var(--wl-radius);
    background: #fff;
    transition:
        transform var(--wl-transition),
        box-shadow var(--wl-transition);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--wl-shadow);
}


/* Product image */

.woocommerce ul.products li.product img {
    border-radius: var(--wl-radius);
}


/* Product title */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--wl-text);
    font-weight: 700;
}


/* Product price */

.woocommerce ul.products li.product .price {
    color: var(--wl-purple);
    font-weight: 800;
}


/* Old price */

.woocommerce ul.products li.product .price del {
    color: var(--wl-text-soft);
    opacity: .7;
}


/* Sale badge */

.woocommerce span.onsale {
    background: var(--wl-pink);
    color: #fff;
    border-radius: var(--wl-radius-pill);
    min-width: auto;
    min-height: auto;
    padding: 7px 12px;
    line-height: 1;
    font-weight: 800;
}


/* ========================================
   WOOCOMMERCE MESSAGES
======================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--wl-radius);
    border-top: 0;
    box-shadow: var(--wl-shadow-sm);
}


/* ========================================
   CONTENT WIDTH
======================================== */

.container,
.site-main,
.woocommerce-page .site-main {
    --wl-content-width: 1400px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    :root {
        --wl-radius: 14px;
        --wl-radius-lg: 20px;
    }

    .woocommerce ul.products li.product:hover {
        transform: none;
    }

}