/* =====================================================================
   LABEEB — Brand Identity Override for Easy Orders Store  (v5)
   Paste this whole file into: Store Settings → Theme → Custom CSS
   =====================================================================
   Palette & COLOR ROLES (this is what actually fixes "blue everywhere"):
     Cobalt Blue #3157D5  → nav, links, spark-free brand accents, and
                             exactly TWO full-bleed anchor sections
                             (About Us + Footer). Not used for headings.
     Ink         #1D1B2E  → default color for every section heading and
                             all body text. This is the biggest change:
                             previously ~10 headings down the page were
                             all the same cobalt blue, which is what
                             read as "blue everywhere." Now cobalt shows
                             up with intention, not by default.
     Coral       #FF7A6B  → buy / add-to-cart / checkout ONLY.
     Warm Yellow #FFD45A  → sale badges + a small spark (✦) mark before
                             section headings, a nod to LABEEB's "little
                             spark" symbol from the brand brief.
     Warm Cream  #FFF9EF  → dominant background, ~65-70% of the page.

   v5 changes from v4:
   - Headings are ink by default everywhere except the two solid-cobalt
     anchor sections (About Us, Footer), where they stay cream so they
     don't disappear against the blue.
   - "New Born" featured band and "Our Values" both switched from solid
     cobalt to cream — between them and About Us + Footer, the page was
     stacking FOUR full-bleed blue walls in a row. Now there are two.
   - Our Values cards get a color-coded top edge (cobalt / coral /
     amber) instead of living on a blue background, so all three brand
     colors still appear together in one section.
   - Added a small yellow spark (✦) mark before plain section headings
     as a recurring, ownable brand signature.
   - Replaced the demo theme's hard black flat-offset shadows
     (-8px 8px 0 #101010, a generic "bold template" look) with soft,
     blurred, cobalt/coral-tinted shadows and larger corner radii on
     cards, buttons, and the compare-slider frame — this is the other
     big lever for making the site feel designed for LABEEB rather than
     a recolored demo.
   Typography: Nunito (Latin) + Almarai (Arabic, kept from base theme)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Fredoka:wght@500;600;700&display=swap');

/* ---------- 1. Root brand variables ---------- */
:root {
    --ft-bg: #3157D5 !important;
    --ann-bg: #3157D5 !important;
    --body-bg: #FFF9EF !important;
    --ft-text: #FFF9EF !important;
    --hd-text: #1D1B2E !important;
    --body-text: #1D1B2E !important;
    --buy-btn-bg: #FF7A6B !important;
    --crt-btn-text: #3157D5 !important;
    --buy-btn-border: #FF7A6B !important;
    --crt-btn-border: #3157D5 !important;
    --product-name-text: #1D1B2E !important;
    --secondry-yellow: #FFD45A;
    /* ---------- 4. Warm Yellow Scale (Spark, Joy & Highlights) ---------- */
        --lb-yellow-900: #8C6000;
        /* High-contrast accent borders */
        --lb-yellow-800: #C98A00;
        /* Dark Amber (legible text on cream/white) */
        --lb-yellow-500: var(--lb-yellow);
        /* The Spark (✦) & Sale badge primary */
        --lb-yellow-300: #FFE48F;
        /* Glows, active lines & radial highlights */
        --lb-yellow-100: #FFF8E6;
        /* Soft card highlight surfaces */
        --lb-yellow-glow: rgba(255, 212, 90, 0.40);
        /* Spark pulse glow & badge shadow */
}

/* Product detail page: Buy Now / Add to Cart / checkout buttons.
   Kept separate from nav & headings so this is the one color that
   always means "take action". */
.buy-btn,
.crt-btn,
button[class*="buy"],
button[class*="checkout"],
button[class*="cart-btn"]:not(.cart-btn) {
    background-color: #FF7A6B !important;
    border-color: #FF7A6B !important;
    color: #FFF9EF !important;
}

.buy-btn:hover,
button[class*="buy"]:hover {
    background-color: #E85F50 !important;
    /* darker coral on hover */
}

/* ---------- 2. Global typography & page background ---------- */
body,
.ps-theme,
.app_container {
    font-family: 'Nunito', 'Almarai', sans-serif !important;
    background-color: #FFF9EF !important;
    color: #1D1B2E !important;
}

h1,
h2,
h3,
.ab-categories-title,
.favorites-season__title,
.save-up-promo-hero__title,
.psc-compare__heading,
.ovs-values__title,
.lbcm__title,
.hs-faq__title,
.fim-marquee__title,
.ps-plist-title,
.ps-featured-section-heading {
    font-family: 'Fredoka', 'Nunito', 'Almarai', sans-serif !important;
    letter-spacing: -0.01em !important;
    color: #1D1B2E !important;
}

/* The only two headings that sit on a solid cobalt background — kept
   cream so they stay readable. Every other heading on the page is ink
   (above), which is what makes cobalt read as an accent again instead
   of the default color of everything. */
.hero-banner__title,
.aus-about__title {
    font-family: 'Fredoka', 'Nunito', 'Almarai', sans-serif !important;
    letter-spacing: -0.01em !important;
    color: #FFF9EF !important;
}

/* Small recurring brand mark in front of plain-background section
   headings — a nod to LABEEB's "little spark" symbol without needing
   a new logo asset. */
.ab-categories-title::before,
.favorites-season__title::before,
.psc-compare__heading::before,
.ovs-values__title::before,
.lbcm__title::before,
.hs-faq__title::before,
.fim-marquee__title::before,
.ps-plist-title::before,
.ps-featured-section-heading::before {
    content: "✦";
    display: inline-block;
    color: #FFD45A;
    font-size: 0.6em;
    margin-inline-end: 0.35em;
    vertical-align: middle;
    transform: translateY(-0.15em);
}

/* ---------- 3. Header & navigation ---------- */

.ps-desktop-nav-link,
.ps-nav-top-item,
.ps-mobile-link {
    color: #1D1B2E !important;
    font-weight: 600 !important;
}

.ps-desktop-nav-link:hover,
.ps-nav-dropdown-trigger:hover {
    color: #3157D5 !important;
}

.ps-icon-mask,
.ps-icon-btn {
    color: #3157D5 !important;
}

/* ---------- 4. Announcement bar ---------- */
.ps-announce {
    background-color: #3157D5 !important;
    color: #FFF9EF !important;
}

/* ---------- 5. Hero banner ---------- */
.hero-banner {
    --hb-overlay: #1D1B2E !important;
    --hb-overlay-a: 0.25 !important;
    --hb-text: #FFF9EF !important;
    --hb-btn-bg: #FFD45A !important;
    --hb-btn-text: #1D1B2E !important;
    --hb-btn-border: #FFD45A !important;
    --hb-bg: #3157D5 !important;
}

.hero-banner__cta:hover {
    background: #FF7A6B !important;
    border-color: #FF7A6B !important;
    color: #FFF9EF !important;
}

.hero-banner__dot-progress {
    background: #FFD45A !important;
}

/* ---------- 6. "Crafting Smiles" marquee ---------- */
/* Secondary color (coral) instead of cobalt — gives the page a second
   accent color in play instead of repeating the brand blue again. */
.csm-marquee {
    --csm-color: #FF7A6B !important;
}

/* ---------- 7. Category tiles ---------- */
.ab-categories-kicker {
    color: #FF7A6B !important;
}

/* Do NOT force a solid background here — .ab-cat-tile__label is a
   full-cover element in this theme, so a solid fill blanks out the
   category photo underneath it. Recolor the text only. */
.ab-cat-tile__label {
    color: #FFF9EF !important;
    text-shadow: 0 2px 8px rgba(29, 27, 46, 0.45) !important;
}

/* ---------- 8. Featured band (e.g. "New Born") ---------- */
/* Switched from solid cobalt to cream — this sat directly under the
   hero and was the first of four stacked blue walls down the page.
   Heading color now comes from the shared ink + spark rule above. */
.ps-featured-bg,
.ps-featured-clip {
    color: #FFF9EF !important;
}

.ps-featured-bg__fill {
    background-color: #FFF9EF !important;
}

/* ---------- 9. Sale badges everywhere ---------- */
/* Yellow, not coral — coral is reserved for buy/add-to-cart so the
   two never compete for attention on the same product card. */
.ps-sale-badge,
.eo-hs-card__sale,
.ps-product-custom-badge {
    background-color: #FFD45A !important;
    color: #1D1B2E !important;
}

/* ---------- 10. About Us ---------- */
.aus-about {
    --aus-bg: #3157D5 !important;
    --aus-curve: #FFF9EF !important;
    --aus-eyebrow: #FFD45A !important;
    --aus-headline: #FFF9EF !important;
    --aus-body: #FFF9EF !important;
    --aus-btn-bg: #FFD45A !important;
    --aus-btn-text: #1D1B2E !important;
}

/* ---------- 11. Favorites of the Season ---------- */
.favorites-season {
    --fsg-bg: #FFF9EF !important;
    --fsg-title: #1D1B2E !important;
    --fsg-desc: #1D1B2E !important;
    --fsg-promo-title: #FFF9EF !important;
    --fsg-promo-overlay: 0.4 !important;
    --fsg-unit-bg: #FFF9EF !important;
    --fsg-unit-num: #C98A00 !important;
    /* deepened yellow — readable on cream, keeps coral exclusive to buy actions */
    --fsg-unit-label: #1D1B2E !important;
}

.favorites-season__track .eo-hs-card--product {
    background: #FFF9EF !important;
    border-color: #1D1B2E !important;
}

/* ---------- 12. Service-promise marquee ---------- */
/* Cream background with secondary coral text — matches the "Crafting
   Smiles" marquee above so both scrolling-text bands use the same
   accent color instead of repeating cobalt a second time. */
.spm-marquee {
    --spm-color: #FF7A6B !important;
    --spm-bg: #FFF9EF !important;
}

/* ---------- 13. "Save Up to 50%" promo hero ---------- */
.save-up-promo-hero {
    --suph-text: #FFF9EF !important;
    --suph-btn-bg: #FFD45A !important;
    --suph-btn-text: #1D1B2E !important;
    --suph-overlay: 0.35 !important;
    --suph-curve: #FFF9EF !important;
}

.save-up-promo-hero__btn:hover {
    background: #FF7A6B !important;
    border-color: #FF7A6B !important;
}

/* ---------- 14. Before/after compare slider ---------- */
.psc-compare {
    --psc-divider: #3157D5 !important;
    --psc-title: #1D1B2E !important;
    --psc-desc: #1D1B2E !important;
    --psc-accent: #FF7A6B !important;
}

/* ---------- 15. "Featured In" marquee badges ---------- */
/* Secondary color (yellow) instead of cobalt — the badges are meant
   to feel like small stamps/tags, which suits the warmer accent
   better than repeating the brand blue again. */
.fim-marquee {
    --fim-bg: #FFF9EF !important;
    --fim-title: #1D1B2E !important;
    --fim-badge-bg: #FFD45A !important;
    --fim-badge-text: #1D1B2E !important;
    --fim-badge-shadow: #1D1B2E !important;
}

/* ---------- 16. Our Values cards ---------- */
/* Also switched from solid cobalt to cream (see note on the Featured
   band above) — between this, About Us, the Featured band, and the
   Footer, the page was stacking four full-bleed blue sections. Now
   there are two (About Us, Footer). Each card gets a color-coded top
   edge instead, so cobalt/coral/amber still appear together here
   without another full wall of blue. */
.ovs-values {
    --ovs-bg: #FFF9EF !important;
    --ovs-curve: #FFF9EF !important;
    --ovs-headline: #1D1B2E !important;
    --ovs-card-bg: #FFFFFF !important;
    --ovs-card-shadow: #1D1B2E !important;
    --ovs-left-title: #3157D5 !important;
    --ovs-center-title: #FF7A6B !important;
    --ovs-right-title: #C98A00 !important;
    /* deepened amber for legibility on white */
}

.ovs-card__body {
    filter: drop-shadow(0 10px 24px rgba(29, 27, 46, 0.14)) !important;
}

.ovs-values__cards>.ovs-card:nth-child(1) .ovs-card__body {
    border-top: 4px solid #3157D5 !important;
}

.ovs-values__cards>.ovs-card:nth-child(2) .ovs-card__body {
    border-top: 4px solid #FF7A6B !important;
}

.ovs-values__cards>.ovs-card:nth-child(3) .ovs-card__body {
    border-top: 4px solid #C98A00 !important;
}

/* ---------- 17. Loved by Our Community gallery ---------- */
.lbcm {
    --lbcm-bg: #FFF9EF !important;
    --lbcm-title: #1D1B2E !important;
}

/* ---------- 18. FAQ accordion ---------- */
/* Cream cards with cobalt text instead of solid cobalt cards — keeps
   this section light so the cobalt Our Values band right before it
   and the cobalt footer right after it don't sandwich a third block
   of solid blue. Toggle circle uses yellow (not coral) so coral stays
   exclusively the buy/add-to-cart signal across the whole site. */
.hs-faq {
    --hs-faq-bg: #FFF9EF !important;
    --hs-faq-title: #1D1B2E !important;
    --hs-faq-card: #FFFFFF !important;
    --hs-faq-q-open: #3157D5 !important;
    --hs-faq-q: #1D1B2E !important;
    --hs-faq-a: #1D1B2E !important;
    --hs-faq-toggle: #FFD45A !important;
    --hs-faq-shadow: #1D1B2E !important;
}

.hs-faq__item {
    border: 1px solid rgba(29, 27, 46, 0.12) !important;
}

/* ---------- 19. Footer ---------- */
.ps-footer {
    background-color: #3157D5 !important;
    color: #FFF9EF !important;
}

.ps-footer-hero__heading,
.ps-footer-copy,
.ps-footer-powered a {
    color: #FFF9EF !important;
}

.ps-footer-subscribe-btn {
    background-color: #FFD45A !important;
    color: #1D1B2E !important;
}

.ps-footer-subscribe-btn:hover {
    background-color: #FF7A6B !important;
    color: #FFF9EF !important;
}

/* ---------- 20. Scroll-to-top & mobile bottom nav ---------- */
.ps-scroll-top__btn {
    background-color: #3157D5 !important;
    color: #FFF9EF !important;
}

.ps-bottom-nav {
    background-color: #3157D5 !important;
}

.ps-cart-count,
.ps-bottom-nav__cart-count {
    background-color: #FF7A6B !important;
    color: #FFF9EF !important;
}

/* ---------- 21. Product-grid quick-add / add-to-cart buttons ---------- */
/* Same coral as the buy button on product pages — this is the action
   color across the whole store, always distinct from cobalt (brand)
   and yellow (sale badges). */
.ps-product-quick-add,
.ps-pgrid-add,
.ps-plist-add {
    background-color: #FF7A6B !important;
    color: #FFF9EF !important;
}

.ps-product-quick-add:hover,
.ps-pgrid-add:hover,
.ps-plist-add:hover {
    background-color: #E85F50 !important;
}

/* ---------- 22. Tone down / remove leftover demo-theme illustrations ----------
   These are baked-color PNG/SVG assets from the original "Toyo" demo
   theme (swirls, blobs, decorative shapes). They can't be recolored
   with CSS since the color is part of the image file, and several of
   them clash badly with LABEEB's cream/cobalt palette or are wildly
   oversized. Until they're replaced with LABEEB-branded artwork, this
   mutes them so they read as quiet texture instead of loud shapes. */

/* "Find the Perfect Match" — the giant blob was dominating the whole
   section and burying the actual comparison slider. Remove it. */
.psc-compare__decor-shape--bg {
    display: none !important;
}

.psc-compare {
    background-color: #FFF9EF !important;
}

/* Our Values card artwork (Organic / Innovative / Eco Friendly icons)
   render as solid dark shapes that vanish against the cobalt band.
   Lighten the card surface behind them so the cards read as cards. */
.ovs-card__body {
    background-color: #FFFFFF !important;
}

.ovs-card__body::before {
    opacity: 0.5 !important;
}

/* Soften the remaining decorative swirls sitewide (favorites-season,
   values, community, FAQ, category grid) so they sit quietly in the
   background rather than competing with the buttons and headings. */
.favorites-season__decor,
.ovs-values__decor-shape,
.lbcm__decor-shape,
.hs-faq__decor-shape,
.psc-compare__decor-shape--tl,
.ab-categories-grid__decor-img {
    opacity: 0.3 !important;
}

/* =====================================================================
   23. Smooth micro-interactions
   Restrained, purposeful motion — no bouncing/spinning/flashing, per
   LABEEB's "smooth, playful but sophisticated" motion language.
   ===================================================================== */

/* Baseline: everything that moves does so smoothly */
.hero-banner__cta,
.aus-about__btn,
.save-up-promo-hero__btn,
.ps-footer-subscribe-btn,
.buy-btn,
.crt-btn,
.ps-product-quick-add,
.ps-pgrid-add,
.ps-plist-add,
.ps-scroll-top__btn,
.hs-faq__toggle,
.ab-cat-tile__img,
.ps-pgrid-img-primary,
.ps-plist-img-primary,
.eo-hs-card__media img {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
        background-color 0.3s ease, opacity 0.3s ease !important;
}

/* Buy / Add to Cart on product pages — soft breathing glow that keeps
   drawing the eye at rest, then lifts on hover and settles on press */
@keyframes labeeb-pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 122, 107, 0.45);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(255, 122, 107, 0);
    }
}

.buy-btn,
button[class*="buy"] {
    animation: labeeb-pulse-glow 2.6s ease-in-out infinite !important;
}

.buy-btn:hover,
button[class*="buy"]:hover {
    animation: none !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(255, 122, 107, 0.35) !important;
}

.buy-btn:active,
button[class*="buy"]:active {
    transform: translateY(0) scale(0.97) !important;
}

/* Quick-add buttons slide into view on card hover instead of just
   sitting there statically */
.ps-product-quick-add,
.ps-pgrid-add,
.ps-plist-add {
    transform: translateY(4px);
}

.ps-pgrid-card:hover .ps-product-quick-add,
.ps-plist-card:hover .ps-product-quick-add,
.favorites-season__track .eo-hs-card--product:hover .ps-product-quick-add {
    transform: translateY(0) !important;
}

.ps-product-quick-add:hover {
    transform: scale(1.04) !important;
}

/* Product card lift + gentle image zoom */
.ps-pgrid-card,
.ps-plist-card,
.favorites-season__track .eo-hs-card--product {
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.ps-pgrid-card:hover,
.ps-plist-card:hover,
.favorites-season__track .eo-hs-card--product:hover {
    transform: translateY(-6px) !important;
}

.ps-pgrid-card:hover .ps-pgrid-img-primary,
.ps-plist-card:hover .ps-plist-img-primary {
    transform: scale(1.06) !important;
}

/* Category tile — quiet zoom, not a bounce */
.ab-cat-tile:hover .ab-cat-tile__img {
    transform: scale(1.05) !important;
}

.ab-cat-tile {
    transition: box-shadow 0.3s ease !important;
}

/* Sale badge — quick pop-in instead of appearing flat/static */
@keyframes labeeb-badge-pop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    70% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.ps-sale-badge {
    animation: labeeb-badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

/* Hero CTA — lift on hover */
.hero-banner__cta:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

/* Footer subscribe button */
.ps-footer-subscribe-btn:hover {
    transform: translateY(-2px) !important;
}

/* FAQ toggle — small rotate as it opens, on top of the base theme's
   own plus-to-minus icon animation */
.hs-faq__item[open] .hs-faq__toggle {
    transform: rotate(90deg) !important;
}

/* Scroll-to-top button */
.ps-scroll-top__btn:hover {
    transform: translateY(-3px) scale(1.05) !important;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

    .buy-btn,
    button[class*="buy"],
    .ps-sale-badge {
        animation: none !important;
    }
}

/* =====================================================================
   24. Soft shadow system
   The base theme uses hard, flat, black offset shadows everywhere
   (box-shadow: -8px 8px 0 #101010) — a generic "bold template" look.
   This swaps them for soft, blurred, brand-tinted shadows and larger
   corner radii, which reads as considerably more "designed for
   LABEEB" than a straight color swap ever could.
   ===================================================================== */

:root {
    --ps-ink: #2A2750 !important;
    --ps-product-card-radius: 18px !important;
    --ps-product-card-border: rgba(49, 87, 213, 0.14) !important;
    --ps-product-card-hover-shadow: 0 16px 32px rgba(49, 87, 213, 0.18) !important;
    --ps-product-card-cta-shadow: 0 10px 22px rgba(255, 122, 107, 0.32) !important;
}

.ps-pgrid-card,
.ps-plist-card,
.favorites-season__track .eo-hs-card--product {
    border-radius: 18px !important;
    border: 1px solid rgba(49, 87, 213, 0.14) !important;
    box-shadow: 0 4px 14px rgba(29, 27, 46, 0.06) !important;
}

.ps-pgrid-card:hover,
.ps-plist-card:hover,
.favorites-season__track .eo-hs-card--product:hover {
    border-color: rgba(49, 87, 213, 0.32) !important;
    box-shadow: 0 16px 32px rgba(49, 87, 213, 0.18) !important;
}

.psc-compare__frame {
    border: 1px solid rgba(49, 87, 213, 0.18) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 44px rgba(29, 27, 46, 0.12) !important;
}

.hs-faq__item[open] {
    box-shadow: 0 14px 30px rgba(49, 87, 213, 0.16) !important;
}

.fim-marquee__badge {
    box-shadow: 0 6px 16px rgba(29, 27, 46, 0.18) !important;
}

.hero-banner__cta:hover {
    box-shadow: 0 12px 26px rgba(29, 27, 46, 0.22) !important;
}

.aus-about__btn:hover,
.save-up-promo-hero__btn:hover,
.ps-footer-subscribe-btn:hover {
    box-shadow: 0 10px 22px rgba(255, 122, 107, 0.32) !important;
}

/* header custom adjustements */
.ps-header {
    background-color: transparent !important;
}
/* logo adjustments for mobile */
.ps-footer-powered {
    display: none !important;
}
#eo-header {
    padding: 5px 10px !important;
}
#eo-header > div {
    padding: 5px 10px !important;
}
#eo-header > div > a > img {
    width: 90px !important;
    height: 30px !important;
}

/* footer */
.ps-footer-socials > a > span {
    background-color: var(--aus-btn-bg) !important;
}

/* add to cart animation */

/* ================================================================
   LABEEB — ADD TO CART INTERACTION
   A small "spark" interaction inspired by the LABEEB identity
   ================================================================ */

.add_to_cart_btn {

    position: relative !important;

    overflow: hidden !important;

    isolation: isolate;

    background: #FFFFFF !important;

    color: #1D1B2E !important;

    border: 1.5px solid #3157D5 !important;

    border-radius: 14px !important;

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s cubic-bezier(.22, .72, .2, 1),
        box-shadow .35s ease !important;
}


/* ------------------------------------------------
   The LABEEB spark
   ------------------------------------------------ */

/* =========================================================
   LABEEB — ADD TO CART INTERACTION v2
   ========================================================= */

.add_to_cart_btn {

    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    background: #FFFFFF !important;
    color: #1D1B2E !important;

    border: 1.5px solid #3157D5 !important;
    border-radius: 14px !important;

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s cubic-bezier(.22, .72, .2, 1),
        box-shadow .35s ease !important;
}


/* =========================================================
   HOVER SPARK
   ========================================================= */

.add_to_cart_btn::before {

    content: "✦";

    position: absolute;

    top: 50%;
    right: 20px;

    font-size: 13px;

    color: #FFD45A;

    opacity: 0;

    transform:
        translateY(-50%) translateX(12px) scale(.5) rotate(-20deg);

    transition:
        opacity .25s ease,
        transform .45s cubic-bezier(.22, .72, .2, 1);

    pointer-events: none;

    z-index: 2;
}


@media (hover: hover) {

    .add_to_cart_btn:hover {

        background: #3157D5 !important;
        color: #FFFFFF !important;

        transform:
            translateY(-2px);

        box-shadow:
            0 10px 24px rgba(49, 87, 213, .17) !important;
    }


    .add_to_cart_btn:hover::before {

        opacity: 1;

        transform:
            translateY(-50%) translateX(0) scale(1) rotate(0deg);
    }

}


/* =========================================================
   CLICK RIPPLE
   ========================================================= */

.add_to_cart_btn::after {

    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    background: rgba(255, 255, 255, .35);

    transform:
        translate(-50%, -50%) scale(0);

    opacity: 0;

    pointer-events: none;

    z-index: 1;
}


.add_to_cart_btn.lb-cart-ripple::after {

    animation:
        lb-cart-ripple .65s cubic-bezier(.22, .72, .2, 1);
}


@keyframes lb-cart-ripple {

    0% {

        transform:
            translate(-50%, -50%) scale(0);

        opacity:
            .65;
    }

    100% {

        transform:
            translate(-50%, -50%) scale(22);

        opacity:
            0;
    }

}


/* =========================================================
   SPARK TRAVEL
   ========================================================= */

.lb-cart-spark {

    position: absolute;

    width: 7px;
    height: 7px;

    right: 18px;
    top: 50%;

    color: #FFD45A;

    font-size: 15px;

    line-height: 1;

    pointer-events: none;

    z-index: 5;

    opacity: 0;

    transform:
        translate(0, -50%) scale(.4) rotate(-20deg);
}


.add_to_cart_btn.lb-cart-active .lb-cart-spark {

    animation:
        lb-cart-spark-travel .65s cubic-bezier(.22, .72, .2, 1);
}


@keyframes lb-cart-spark-travel {

    0% {

        opacity: 0;

        transform:
            translate(0, -50%) scale(.4) rotate(-20deg);
    }

    15% {

        opacity: 1;

        transform:
            translate(-5px, -50%) scale(1) rotate(0deg);
    }

    55% {

        opacity: 1;

        transform:
            translate(-85px, -50%) scale(1.25) rotate(15deg);
    }

    100% {

        opacity: 0;

        transform:
            translate(-145px, -50%) scale(.35) rotate(35deg);
    }

}


/* =========================================================
   SMALL STAR TRAIL
   ========================================================= */

.lb-cart-spark::before,
.lb-cart-spark::after {

    content: "✦";

    position: absolute;

    color: #FFD45A;

    opacity: 0;

    font-size: 7px;
}


.add_to_cart_btn.lb-cart-active .lb-cart-spark::before {

    animation:
        lb-cart-trail-one .65s ease-out;
}


.add_to_cart_btn.lb-cart-active .lb-cart-spark::after {

    animation:
        lb-cart-trail-two .65s .08s ease-out;
}


@keyframes lb-cart-trail-one {

    0%,
    20% {

        opacity: 0;

        transform:
            translate(0, 0) scale(.3);
    }

    45% {

        opacity: 1;
    }

    100% {

        opacity: 0;

        transform:
            translate(-35px, -10px) scale(.2);
    }

}


@keyframes lb-cart-trail-two {

    0%,
    25% {

        opacity: 0;

        transform:
            translate(0, 0) scale(.3);
    }

    50% {

        opacity: .8;
    }

    100% {

        opacity: 0;

        transform:
            translate(-55px, 12px) scale(.15);
    }

}


/* =========================================================
   CLICK RESPONSE
   ========================================================= */

.add_to_cart_btn.lb-cart-active {

    animation:
        lb-cart-button .65s cubic-bezier(.22, .72, .2, 1);

}


@keyframes lb-cart-button {

    0% {

        transform:
            scale(1);
    }

    22% {

        transform:
            scale(.965);
    }

    45% {

        transform:
            scale(1.015);
    }

    70% {

        transform:
            scale(1);
    }

    100% {

        transform:
            scale(1);
    }

}


/* =========================================================
   ADDED STATE
   ========================================================= */

.add_to_cart_btn.lb-cart-added {

    background:
        #3157D5 !important;

    color:
        #FFFFFF !important;

    border-color:
        #3157D5 !important;

    box-shadow:
        0 10px 24px rgba(49, 87, 213, .18) !important;
}


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

@media (max-width: 767px) {

    .add_to_cart_btn {

        border-radius:
            13px !important;
    }

}