/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/


/*************************  myShopAddOn CSS *****************/

.myShopAddOn {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 50px;
}


/*************************  PRODUCT ADDON *****************/

.myProductAddOn {

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 10px 12px;

    /* margin: 10px 0 6px !important; */
	/* margin: 8px 0 2px !important; */
	margin: 6px 0 0px !important;

    background: #fcfcfc;

    border: 1px solid #f0f0f0;
    border-radius: 8px;

    line-height: 1.4;

    transition: all .2s ease;
}

.myProductAddOn:hover{
    background:#f8f8f8;
    border-color:#e5e5e5;
}

.giftText{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.giftText strong{
    font-size:13px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:#333;
    line-height:1.2;
}

.giftText span{
    font-size:14px;
    color:#222;
    line-height:1.35;
}

/* tighter Woodmart spacing */

.single-product .summary .stock {
    margin-bottom: 6px !important;
}

.single-product .summary .price {
    margin-top: 4px !important;
}


/* image */

.myProductAddOn img {

    display: block;

    width: 72px;
    height: auto;

    border-radius: 6px;

    flex-shrink: 0;
}


/*************************  Pulse Animation *****************/

@-webkit-keyframes pulse {

    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44,0.4);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(204,169,44,0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44,0);
    }
}

@keyframes pulse {

    0% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44,0.4);
        box-shadow: 0 0 0 0 rgba(204,169,44,0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204,169,44,0);
        box-shadow: 0 0 0 10px rgba(204,169,44,0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44,0);
        box-shadow: 0 0 0 0 rgba(204,169,44,0);
    }
}

.shadow {

    position: absolute;

    width: 80px;
    height: 80px;

    box-shadow: inset 3px 3px 10px 0 #ccc;

    animation: pulse 2s infinite;

    border-radius: 50px;

    top: -15px;
    right: -15px;
}


/*************************  Tooltip *****************/

*[data-tooltip]::after {

    content: attr(data-tooltip);

    position: relative;

    right: 12px;

    width: 70px;

    pointer-events: none;

    opacity: 0;

    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;

    font-size: 10px;
    line-height: 16px;

    background: #fefdcd;

    padding: 2px;

    border: 1px solid #c0c0c0;

    box-shadow: 2px 4px 5px rgba(0,0,0,0.4);

    color: #000;
}

*[data-tooltip]:hover::after {
    opacity: 1;
}


/*********************************  style myCustom Search *************************/


.search_bar {

    padding: 0;

    margin: 0 auto;
}

.search_bar form {

    display: flex;

    justify-content: space-between;

    max-width: 300px;

    margin: auto;
}

#brand_search input,
#brand_search select {

    width: 100%;

    padding: 5px 10px;

    border-radius: 0;

    border-bottom: 1px solid #aaa;
    border-left: none;
    border-right: none;
    border-top: none;

    margin-right: 5px;
}

#brand_search input {

    background-image: url(searchImage.svg);

    background-size: 18px 18px;

    background-position-y: 10px;

    background-repeat: no-repeat;

    text-indent: 20px;
}

div#datafetch {

    margin: auto;
}

div#datafetch ul {

    max-width: 300px;

    list-style: none;

    padding: 0;

    margin: auto;

    text-align: left;

    text-indent: 40px;
}

div#datafetch li img {

    max-width: 50px;

    height: auto;
}

div#datafetch li {

    padding: 5px;

    margin-bottom: 0;
}

div#datafetch li h4 {

    margin: 0 !important;

    font-size: 14px;

    border-bottom: 1px solid #eee;
}

div#datafetch ul a span {

    display: inline-block;

    margin-right: 10px;
}

div#datafetch a {
    color: #000;
}