/* ============================================================
   SROBOTA × WOODMART
   GLOBAL PREMIUM PRODUCT CARDS V6

   - მუშაობს მთელ საიტზე
   - Soft Champagne / Ivory დიზაინი
   - ფასის ORIGINAL ზომა
   - ჩვეულებრივი ფასი: საიტის ოქროსფერი
   - აქციის ფასი: რბილი მოწითალო
============================================================ */

:root {
    --sr-pc-text: #29251f;
    --sr-pc-muted: #938c82;

    --sr-pc-gold: #9f7b45;
    --sr-pc-gold-hover: #b08b57;

    --sr-pc-sale: #b35656;
    --sr-pc-sale-dark: #9e4747;

    --sr-pc-line: rgba(150,130,100,.10);
}


/* ============================================================
   01. PRODUCT CARD
============================================================ */

html body .wd-product,
html body .product-grid-item,
html body li.product {

    position: relative !important;

    border:
        1px solid var(--sr-pc-line) !important;

    border-radius:
        28px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(205,183,145,.05),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffefa 62%,
            #faf7f1 100%
        ) !important;

    box-shadow:
        0 8px 24px rgba(35,29,22,.035),
        inset 0 1px 0 rgba(255,255,255,.98) !important;

    overflow:
        hidden !important;

    transition:
        transform .38s cubic-bezier(.2,.75,.2,1),
        box-shadow .38s ease,
        border-color .38s ease !important;
}


/* ზედა ძალიან რბილი champagne ხაზი */

html body .wd-product::before,
html body .product-grid-item::before,
html body li.product::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 26px !important;
    right: 26px !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185,154,104,.20),
            transparent
        ) !important;

    pointer-events:
        none !important;

    z-index:
        5 !important;
}


/* CARD HOVER */

html body .wd-product:hover,
html body .product-grid-item:hover,
html body li.product:hover {

    transform:
        translateY(-5px) !important;

    border-color:
        rgba(185,154,104,.18) !important;

    box-shadow:
        0 18px 38px rgba(39,31,22,.065),
        0 3px 10px rgba(185,154,104,.025),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}



/* ============================================================
   02. SOFT CHAMPAGNE IMAGE FRAME
============================================================ */

html body .wd-product .product-element-top,
html body .product-grid-item .product-element-top,
html body li.product .product-element-top {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        stretch !important;

    width:
        100% !important;

    aspect-ratio:
        1 / 1 !important;

    padding:
        5px !important;

    border:
        1px solid rgba(181,151,103,.17) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            135deg,

            #f8f1e5 0%,
            #ead9ba 16%,
            #d8bd8d 31%,
            #f4e8d1 46%,
            #e2cca6 61%,
            #cfaf7a 77%,
            #ead9ba 89%,
            #f9f3e9 100%
        ) !important;

    background-size:
        190% 190% !important;

    box-shadow:
        0 6px 16px rgba(93,72,43,.055),
        inset 0 1px 0 rgba(255,253,247,.92),
        inset 0 -1px 0 rgba(157,126,81,.08) !important;

    overflow:
        hidden !important;

    transition:
        transform .4s cubic-bezier(.2,.75,.2,1),
        background-position .75s ease,
        border-color .4s ease,
        box-shadow .4s ease !important;
}



/* ============================================================
   03. SOFT LIGHT SWEEP
============================================================ */

html body .wd-product .product-element-top::after,
html body .product-grid-item .product-element-top::after,
html body li.product .product-element-top::after {

    content:
        "" !important;

    position:
        absolute !important;

    top:
        -75% !important;

    left:
        -45% !important;

    width:
        26% !important;

    height:
        250% !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        ) !important;

    transform:
        rotate(18deg) !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

    z-index:
        6 !important;
}


html body .wd-product:hover .product-element-top::after,
html body .product-grid-item:hover .product-element-top::after,
html body li.product:hover .product-element-top::after {

    animation:
        srSoftChampagneSweep 1.15s ease forwards !important;
}


@keyframes srSoftChampagneSweep {

    0% {
        left: -45%;
        opacity: 0;
    }

    28% {
        opacity: .55;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}



/* ============================================================
   04. WHITE IMAGE CANVAS
   თეთრფონიანი JPG/WEBP აქ ერწყმის
============================================================ */

html body .wd-product .product-image-link,
html body .product-grid-item .product-image-link,
html body li.product .product-image-link {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        0 !important;

    background:
        #ffffff !important;

    background-image:
        none !important;

    border:
        1px solid rgba(255,255,255,.98) !important;

    border-radius:
        16px !important;

    overflow:
        hidden !important;

    box-shadow:
        inset 0 0 0 1px rgba(50,40,28,.018) !important;

    z-index:
        2 !important;
}



/* ============================================================
   05. PRODUCT IMAGE
============================================================ */

html body .wd-product .product-element-top img,
html body .product-grid-item .product-element-top img,
html body li.product .product-element-top img {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    background:
        #ffffff !important;

    background-color:
        #ffffff !important;

    mix-blend-mode:
        normal !important;

    filter:
        none !important;

    box-shadow:
        none !important;

    transform:
        scale(1) !important;

    transition:
        transform .58s cubic-bezier(.2,.75,.2,1) !important;
}


html body .wd-product:hover .product-element-top img,
html body .product-grid-item:hover .product-element-top img,
html body li.product:hover .product-element-top img {

    transform:
        scale(1.025) !important;
}



/* FRAME HOVER */

html body .wd-product:hover .product-element-top,
html body .product-grid-item:hover .product-element-top,
html body li.product:hover .product-element-top {

    transform:
        translateY(-1px) !important;

    background-position:
        100% 50% !important;

    border-color:
        rgba(190,158,106,.30) !important;

    box-shadow:
        0 10px 22px rgba(95,73,43,.075),
        0 0 0 2px rgba(213,190,150,.035),
        inset 0 1px 0 rgba(255,253,247,.98),
        inset 0 -1px 0 rgba(157,126,81,.08) !important;
}



/* ============================================================
   06. CATEGORY / SMALL TEXT
============================================================ */

html body .wd-product .wd-product-cats,
html body .product-grid-item .wd-product-cats,
html body li.product .wd-product-cats,
html body .wd-product .wd-product-cats a,
html body .product-grid-item .wd-product-cats a,
html body li.product .wd-product-cats a {

    color:
        var(--sr-pc-muted) !important;

    -webkit-text-fill-color:
        var(--sr-pc-muted) !important;

    font-weight:
        500 !important;
}



/* ============================================================
   07. PRODUCT TITLE
============================================================ */

html body .wd-product .wd-entities-title,
html body .product-grid-item .wd-entities-title,
html body li.product .wd-entities-title,
html body li.product .woocommerce-loop-product__title {

    color:
        var(--sr-pc-text) !important;

    -webkit-text-fill-color:
        var(--sr-pc-text) !important;

    font-weight:
        700 !important;

    line-height:
        1.36 !important;

    letter-spacing:
        -.012em !important;

    transition:
        color .28s ease,
        transform .28s ease !important;
}


html body .wd-product:hover .wd-entities-title,
html body .product-grid-item:hover .wd-entities-title,
html body li.product:hover .wd-entities-title,
html body li.product:hover .woocommerce-loop-product__title {

    color:
        #81653e !important;

    -webkit-text-fill-color:
        #81653e !important;
}



/* ============================================================
   08. NORMAL PRICE
   IMPORTANT: ORIGINAL SIZE IS PRESERVED
============================================================ */

html body .wd-product .price,
html body .product-grid-item .price,
html body li.product .price {

    color:
        var(--sr-pc-gold) !important;

    -webkit-text-fill-color:
        var(--sr-pc-gold) !important;

    /*
       font-size intentionally NOT changed.
       WoodMart's original price size remains.
    */

    font-weight:
        750 !important;

    letter-spacing:
        -.015em !important;

    text-shadow:
        none !important;

    transition:
        color .28s ease,
        transform .28s cubic-bezier(.2,.75,.2,1),
        filter .28s ease !important;
}


/* currency / amount */

html body .wd-product .price .amount,
html body .product-grid-item .price .amount,
html body li.product .price .amount {

    color:
        inherit !important;

    -webkit-text-fill-color:
        inherit !important;

    font-weight:
        inherit !important;

    line-height:
        inherit !important;
}


/* PRICE HOVER */

html body .wd-product:hover .price,
html body .product-grid-item:hover .price,
html body li.product:hover .price {

    color:
        var(--sr-pc-gold-hover) !important;

    -webkit-text-fill-color:
        var(--sr-pc-gold-hover) !important;

    transform:
        translateY(-2px) !important;

    filter:
        drop-shadow(
            0 3px 7px rgba(185,154,104,.12)
        ) !important;
}



/* ============================================================
   09. SALE PRICE
============================================================ */

/* discounted / current price */

html body .wd-product .price ins,
html body .product-grid-item .price ins,
html body li.product .price ins {

    color:
        var(--sr-pc-sale) !important;

    -webkit-text-fill-color:
        var(--sr-pc-sale) !important;

    text-decoration:
        none !important;

    font-weight:
        780 !important;

    background:
        linear-gradient(
            135deg,
            rgba(179,86,86,.07),
            rgba(179,86,86,.025)
        ) !important;

    border:
        1px solid rgba(179,86,86,.13) !important;

    border-radius:
        999px !important;

    padding:
        3px 9px !important;

    box-shadow:
        0 3px 9px rgba(179,86,86,.055) !important;

    transition:
        color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease !important;
}


html body .wd-product .price ins .amount,
html body .product-grid-item .price ins .amount,
html body li.product .price ins .amount {

    color:
        var(--sr-pc-sale) !important;

    -webkit-text-fill-color:
        var(--sr-pc-sale) !important;

    font-weight:
        inherit !important;
}


/* OLD PRICE */

html body .wd-product .price del,
html body .product-grid-item .price del,
html body li.product .price del {

    color:
        #9e958b !important;

    -webkit-text-fill-color:
        #9e958b !important;

    opacity:
        .60 !important;

    font-weight:
        600 !important;

    text-decoration-thickness:
        1px !important;
}


html body .wd-product .price del .amount,
html body .product-grid-item .price del .amount,
html body li.product .price del .amount {

    color:
        inherit !important;

    -webkit-text-fill-color:
        inherit !important;
}


/* SALE HOVER */

html body .wd-product:hover .price ins,
html body .product-grid-item:hover .price ins,
html body li.product:hover .price ins {

    color:
        var(--sr-pc-sale-dark) !important;

    -webkit-text-fill-color:
        var(--sr-pc-sale-dark) !important;

    border-color:
        rgba(179,86,86,.21) !important;

    box-shadow:
        0 5px 12px rgba(179,86,86,.10) !important;

    transform:
        translateY(-1px) !important;
}



/* ============================================================
   10. SWATCHES
============================================================ */

html body .wd-product .wd-swatches-product,
html body .product-grid-item .wd-swatches-product,
html body li.product .wd-swatches-product {

    margin-top:
        11px !important;

    margin-bottom:
        3px !important;
}



/* ============================================================
   11. SALE COUNTDOWN — DARK / UNIFIED / NO SECONDS
   პროდუქტის ბარათებზე: დღე / საათი / წუთი
============================================================ */

html body .wd-product .wd-product-countdown.wd-timer,
html body .product-grid-item .wd-product-countdown.wd-timer,
html body li.product .wd-product-countdown.wd-timer,
html body .wd-product .woodmart-product-countdown.woodmart-timer,
html body .product-grid-item .woodmart-product-countdown.woodmart-timer,
html body li.product .woodmart-product-countdown.woodmart-timer {

    --wd-timer-size: 14px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    align-items:
        stretch !important;

    justify-content:
        stretch !important;

    gap:
        1px !important;

    width:
        min(100%, 210px) !important;

    max-width:
        100% !important;

    margin:
        12px auto 8px !important;

    padding:
        1px !important;

    border:
        1px solid rgba(36,31,25,.12) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            #2b241d,
            #1f1a15
        ) !important;

    box-shadow:
        0 9px 18px rgba(24,19,14,.10),
        inset 0 1px 0 rgba(255,255,255,.04) !important;

    overflow:
        hidden !important;
}


html body .wd-product .wd-product-countdown.wd-timer > .wd-item,
html body .product-grid-item .wd-product-countdown.wd-timer > .wd-item,
html body li.product .wd-product-countdown.wd-timer > .wd-item,
html body .wd-product .woodmart-product-countdown.woodmart-timer > .wd-item,
html body .product-grid-item .woodmart-product-countdown.woodmart-timer > .wd-item,
html body li.product .woodmart-product-countdown.woodmart-timer > .wd-item,
html body .wd-product .woodmart-timer > .countdown-days,
html body .wd-product .woodmart-timer > .countdown-hours,
html body .wd-product .woodmart-timer > .countdown-min,
html body .product-grid-item .woodmart-timer > .countdown-days,
html body .product-grid-item .woodmart-timer > .countdown-hours,
html body .product-grid-item .woodmart-timer > .countdown-min,
html body li.product .woodmart-timer > .countdown-days,
html body li.product .woodmart-timer > .countdown-hours,
html body li.product .woodmart-timer > .countdown-min {

    min-width:
        0 !important;

    min-height:
        58px !important;

    padding:
        7px 4px 8px !important;

    margin:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        4px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        ) !important;

    box-shadow:
        none !important;

    color:
        #f7f2ea !important;

    -webkit-text-fill-color:
        #f7f2ea !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    font-weight:
        760 !important;

    letter-spacing:
        -.02em !important;
}


html body .wd-product .wd-product-countdown .wd-timer-text,
html body .product-grid-item .wd-product-countdown .wd-timer-text,
html body li.product .wd-product-countdown .wd-timer-text,
html body .wd-product .woodmart-timer > span > span,
html body .product-grid-item .woodmart-timer > span > span,
html body li.product .woodmart-timer > span > span {

    display:
        block !important;

    margin-top:
        0 !important;

    color:
        #71685d !important;

    -webkit-text-fill-color:
        #71685d !important;

    font-size:
        10px !important;

    line-height:
        1 !important;

    font-weight:
        720 !important;

    letter-spacing:
        .08em !important;

    text-transform:
        uppercase !important;
}


html body .wd-product .wd-product-countdown .wd-sep,
html body .product-grid-item .wd-product-countdown .wd-sep,
html body li.product .wd-product-countdown .wd-sep,
html body .wd-product .woodmart-timer .wd-sep,
html body .product-grid-item .woodmart-timer .wd-sep,
html body li.product .woodmart-timer .wd-sep {

    display:
        none !important;
}


html body .wd-product .wd-timer-sec,
html body .product-grid-item .wd-timer-sec,
html body li.product .wd-timer-sec,
html body .wd-product span.countdown-sec,
html body .product-grid-item span.countdown-sec,
html body li.product span.countdown-sec {

    display:
        none !important;
}


html body .wd-product .wd-timer-min + .wd-sep,
html body .product-grid-item .wd-timer-min + .wd-sep,
html body li.product .wd-timer-min + .wd-sep {

    display:
        none !important;
}


@media (max-width: 767px) {

    html body .wd-product .wd-product-countdown.wd-timer,
    html body .product-grid-item .wd-product-countdown.wd-timer,
    html body li.product .wd-product-countdown.wd-timer,
    html body .wd-product .woodmart-product-countdown.woodmart-timer,
    html body .product-grid-item .woodmart-product-countdown.woodmart-timer,
    html body li.product .woodmart-product-countdown.woodmart-timer {

        width:
            min(100%, 198px) !important;

        margin-top:
            10px !important;

        border-radius:
            16px !important;
    }


    html body .wd-product .wd-product-countdown.wd-timer > .wd-item,
    html body .product-grid-item .wd-product-countdown.wd-timer > .wd-item,
    html body li.product .wd-product-countdown.wd-timer > .wd-item,
    html body .wd-product .woodmart-timer > .countdown-days,
    html body .wd-product .woodmart-timer > .countdown-hours,
    html body .wd-product .woodmart-timer > .countdown-min,
    html body .product-grid-item .woodmart-timer > .countdown-days,
    html body .product-grid-item .woodmart-timer > .countdown-hours,
    html body .product-grid-item .woodmart-timer > .countdown-min,
    html body li.product .woodmart-timer > .countdown-days,
    html body li.product .woodmart-timer > .countdown-hours,
    html body li.product .woodmart-timer > .countdown-min {

        min-height:
            52px !important;

        padding:
            6px 4px 7px !important;

        font-size:
            16px !important;
    }


    html body .wd-product .wd-product-countdown .wd-timer-text,
    html body .product-grid-item .wd-product-countdown .wd-timer-text,
    html body li.product .wd-product-countdown .wd-timer-text,
    html body .wd-product .woodmart-timer > span > span,
    html body .product-grid-item .woodmart-timer > span > span,
    html body li.product .woodmart-timer > span > span {

        font-size:
            9px !important;
    }
}

/* ============================================================
   12. MOBILE
============================================================ */

@media (max-width: 1024px) {

    html body .wd-product,
    html body .product-grid-item,
    html body li.product {

        border-radius:
            21px !important;
    }


    html body .wd-product .product-element-top,
    html body .product-grid-item .product-element-top,
    html body li.product .product-element-top {

        padding:
            4px !important;

        border-radius:
            18px !important;
    }


    html body .wd-product .product-image-link,
    html body .product-grid-item .product-image-link,
    html body li.product .product-image-link {

        border-radius:
            13px !important;
    }


    /*
       Price size is NOT changed here either.
       Mobile keeps WoodMart's original responsive size.
    */


    html body .wd-product:hover,
    html body .product-grid-item:hover,
    html body li.product:hover {

        transform:
            none !important;
    }


    html body .wd-product:hover .product-element-top::after,
    html body .product-grid-item:hover .product-element-top::after,
    html body li.product:hover .product-element-top::after {

        animation:
            none !important;
    }
}



/* ============================================================
   13. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    html body .wd-product,
    html body .product-grid-item,
    html body li.product,
    html body .wd-product .product-element-top,
    html body .product-grid-item .product-element-top,
    html body li.product .product-element-top,
    html body .wd-product .product-element-top img,
    html body .product-grid-item .product-element-top img,
    html body li.product .product-element-top img,
    html body .wd-product .price,
    html body .product-grid-item .price,
    html body li.product .price {

        animation:
            none !important;

        transition:
            none !important;
    }
}