:root{

    --primary:#163f89;

    --sale:#d71920;

    --text:#222;

    --muted:#666;

    --border:#e7e7e7;

    --light:#f7f9fd;

    --radius:14px;

}

*{

    box-sizing:border-box;

}

.mayil-product{

    padding:40px 0;

    background:#fff;

}

.mayil-container{

    width:92%;

    max-width:1600px;

    margin:auto;

}

.mayil-grid{

    display:grid;

    grid-template-columns:49% 49%;

    gap:20px;

    align-items:start;

}

.mayil-gallery{

width:100%;

position:relative;

}

/*==========================
Desktop Only
==========================*/

@media(min-width:768px){


.mayil-gallery{

position:sticky;

top:20px;

}
.mayil-summary{position:sticky;top:30px;}
}
.mayil-summary{

    width:100%;
    font-family: "Instrument Sans", Sans-serif !important;

}
.woocommerce .quantity .qty{    width: 100%;
    text-align: center;
    margin: 0 0 6px 0;}

@media(min-width:768px) and (max-width:1200px){

.mayil-grid{

grid-template-columns:49% 49%;

}

.mayil-gallery{

position:relative;

top:auto;

}

}

/*==============================

IMAGE GALLERY

==============================*/

.mayil-gallery-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:8px;

}

.mayil-gallery-item{

overflow:hidden;

background:#f5f5f5;

cursor:pointer;

position:relative;

}

.mayil-gallery-item img{

width:100%;

display:block;

transition:.4s;

}

.mayil-gallery-item:hover img{

transform:scale(1.05);

}

.mayil-gallery-item::after{

content:"";

display:block;

padding-bottom:140%;

}

.mayil-gallery-item img{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

}


@media(max-width:991px){

.mayil-gallery-grid{

grid-template-columns:1fr;

}

}
.mayil-gallery-item{

transition:.35s;

}

.mayil-gallery-item:hover{

transform:translateY(-3px);

}


/*==============================

LIGHTBOX

==============================*/

.mayil-lightbox{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.92);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:99999;

}

.mayil-lightbox.active{

opacity:1;

visibility:visible;

}

.mayil-lightbox img{

max-width:90%;

max-height:90%;

}

.mayil-close{

position:absolute;

right:40px;

top:30px;

font-size:50px;

color:#fff;

cursor:pointer;

}



/*============================

SUMMARY

=============================*/

.mayil-title-row{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:20px;


}

.mayil-title{

font-size:28px;

font-weight:700;


color:#222;

margin:0;

max-width:100%;
font-family: 'Merriweather';

}

.mayil-share{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

}

.mayil-share svg{

width:30px;

height:30px;

}
.mayil-price-row{

display:flex;

align-items:center;

gap:5px;



flex-wrap:wrap;

}

.mayil-old-price{

font-size:12px;

text-decoration:line-through;

color:#888;

}

.mayil-sale-price{

font-size:28px;

font-weight:700;

color:#f3a037;

}

.mayil-discount{
    background: #2a0c00;
    color: #fff;
    padding: 4px 8px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    position: absolute;
    z-index: 9;
    margin: 5px;

}
.mayil-tax{



font-size:9px;

color:#666;

}

.mayil-rating{

    display: flex;
    align-items: center;
    gap: 3px;
    /* margin-top: 20px; */
    font-size: 14px;
}

.mayil-rating .star-rating{

font-size:14px;
color: #913c1a;
margin:0;

}

.mayil-bought{

    margin-top: 15px;
    background: #ffeceb;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10px;
    color: #2a0c00;
}
.mayil-viewers{
      display: flex;
    gap: 5px;
    background: transparent;
    border-radius: 10px;
    font-size: 8px;
    color: #2a0c00;
    /* background: antiquewhite; */
    width: fit-content;
    padding: 2px 4px;
    border: 1px solid #ccc;
}
.mayil-offer{

display:flex;

gap:20px;

padding:22px;

margin-top:30px;

border:1px solid #cfdcff;

border-radius:15px;

background:#f5f9ff;

align-items:flex-start;

}

.offer-icon{

width:50px;

height:50px;

background:#163f89;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:bold;

color:#fff;

flex-shrink:0;

}

.mayil-offer h4{

margin:0 0 8px;

font-size:28px;

}

.mayil-offer p{

margin:0;

font-size:20px;

}

.mayil-offer strong{

color:#123d89;

}



/*==========================
PURCHASE AREA
==========================*/

.mayil-purchase-box{

/*margin-top:35px;*/

}

.mayil-short-description{

margin-top:10px;

font-size:16px;



color:#555;

}

/*==========================
VARIATIONS
==========================*/

.variations{

width:100%;

border-collapse:collapse;

margin-bottom:25px;

}

.variations td{

padding:10px 0;

vertical-align:middle;

}

.variations label{

font-size:16px;

font-weight:600;

color:#222;

}

.variations select{

width:100%;

height:52px;

padding:0 15px;

border:1px solid #ddd;

border-radius:8px;

font-size:15px;

background:#fff;

}


/*==========================
QUANTITY
==========================*/

.quantity{

display:flex !important;

align-items:center;
width: 45%;

}

.quantity input.qty{

width:70px;

height:40px;

text-align:center;

font-size:18px;

border:1px solid #ddd;

}

.single_add_to_cart_button{

    width: 100% !important;
    height: 40px;
    padding: 0px !important;
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #111 !important;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 5px !important;
    transition: .3s;
    margin-top: 15px;
    font-weight: 400 !important;
    text-transform: uppercase;
}

.single_add_to_cart_button:hover{

background:#f3a037 !important;

color:#2a0c00 !important;

}

.mayil-buy-now{

width:100%;

height:45px;

margin-top:5px;

background:#2a0c00;

border:solid 1px #2a0c00;

color:#fff;

font-size:17px;

font-weight:500;

border-radius:5px;

cursor:pointer;

transition:.3s;

}

.mayil-buy-now:hover{

background:transparent;
color: #2a0c00;

}
/*=========================

Hide Default Select

==========================*/

.variations{

display:none;

}

.reset_variations{

display:none !important;

}
/*====================

ATTRIBUTE BOXES

=====================*/

.mayil-option{
    margin-bottom: 20px;
}    

.mayil-option h3{

font-size:18px;

margin-bottom:14px;

font-weight:600;

}

.mayil-option-values{

display:flex;

gap:12px;

flex-wrap:wrap;

}

button.mayil-option-item{
    padding: 5px 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: .25s;
    font-weight: 600;
    width:40px !important;
    height: 40px;
    /*user-select: none;*/
    background: #FCF8F1;
    color: #2a0c00;
}
button.mayil-option-item span{
    font-weight: 400;
    text-transform: uppercase;
}
.mayil-option-item img{
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}


button.mayil-option-item:hover{

border-color:#163f89;
background: #2ac00;
color: #fff;

}

button.mayil-option-item.active{

background:#2a0c00;

color:#fff;

border-color:#163f89;

}

.quantity{

display:flex !important;

align-items:center;

gap:0;

}

.quantity input{

width:70px;

height:50px;

text-align:center;

border:1px solid #ddd;

border-left:none;

border-right:none;

}

.quantity .qty-btn{

    width: 45px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 28px;
    font-weight: 400;
    background: #fff;
    color:#000;
    top: -3px;
    position: relative;
}
.quantity .qty-btn.minus{left:15px;}
.quantity .qty-btn.plus{right: 23px;}

.quantity .qty-btn:hover{background:#2a0c00;color:#fff;}

.mayil-variation-area .cart{
    display: flex !important;
}


/*====================================

Accordion

====================================*/

.mayil-accordion{

margin-top:50px;

border-top:1px solid #ddd;

}

.mayil-accordion-item{

border-bottom:1px solid #ddd;

}

.mayil-accordion-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 0;

cursor:pointer;

user-select:none;

}

.mayil-accordion-header span{

font-size:15px;

font-weight:600;

font-family: 'Instrument sans';

text-transform:uppercase;

}

.mayil-accordion-header .arrow{

font-size:18px;

transition:.3s;

}

.mayil-accordion-item.active .arrow{

transform:rotate(180deg);

}

.mayil-accordion-body{

    max-height:0;
    overflow:hidden;

    transition:
        max-height .45s ease,
        padding .35s ease;

    padding:0;

}

.mayil-accordion-item.active .mayil-accordion-body{

    max-height:700px; /* Increase if your content is longer */
    padding:18px 0;

}

.accordion-scroll{

max-height:320px;

overflow-y:auto;

padding-right:12px;


font-size:16px;

}

.accordion-scroll::-webkit-scrollbar{

width:6px;

}

.accordion-scroll::-webkit-scrollbar-thumb{

background:#bfbfbf;

border-radius:20px;

}




/*====================

Mobile Gallery

====================*/

/*==========================
Mobile Gallery
==========================*/

.mayil-mobile-gallery{

display:none;

}

@media(max-width:767px){

.mayil-mobile-gallery{

display:block;

/*margin:0 -15px;*/
margin: auto;

padding: 5px;
border: solid 1px #ccc;
background: url("https://hazelswillow.com/wp-content/uploads/2026/08/ornamental-lace-floral-endless-texture-repetition-decorative-element-seamless-background-vector-illustration_1284-41633.avif");

}

.mayil-gallery-grid{

display:none !important;

}

}
@media(max-width:767px){
.mayil-product{

    padding:0px 0;
width: 99%;
    

}
.mayil-mobile-gallery img{

width:100% !important;

display:block;

border-radius:0;

}

.swiper-pagination{

bottom:10px !important;

}

.swiper-pagination-bullet{

width:12px;

height:12px;

background:#fff;

opacity:1;

border:1px solid #2a0c00;

}

.swiper-pagination-bullet-active{

background:#163f89;

}

}
@media(max-width:767px){
.mayil-grid{



grid-template-columns:100%;



    gap:15px;


}
.mayil-mobile-gallery .swiper{

width:100%;

height:auto;

}

.mayil-mobile-gallery .swiper-slide{

display:flex;

justify-content:center;

align-items:center;

}

.mayil-mobile-gallery img{

width:100%;

height:auto;

display:block;

object-fit:cover;

}
.quantity .qty-btn.minus{left:1px;}
.quantity .qty-btn.plus{right: 10px;}
.woocommerce .quantity .qty{    padding: 0 0px 0 4px;
    width: 54px;
    text-align: center;
    margin: 0 0 6px 0;}
}
.swiper-slide{width:100% !important;}

.swiper-pagination-bullet{

    width:10px;
    height:10px;
    background:#fff;
    opacity:1;
}

.swiper-pagination-bullet-active{

    background:#b8860b;
    transform:scale(1.5);

}

.mayil-mobile-gallery {
    width: 100%;
}

.mayilSwiper {
    width: 100%;
}

.mayilSwiper .swiper-slide {
    width: 100%;
}

.mayilSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* Thumbnail area */

.mayilThumbSwiper {
    width: 100%;
    margin-top: 10px;
    /*padding: 0 10px;*/
    box-sizing: border-box;
}

.mayilThumbSwiper .swiper-slide {
    
    

    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid #aaa;
    box-sizing: border-box;
}
.mayilThumbSwiper .swiper-wrapper{justify-content:center;flex-wrap:wrap;}
.mayilThumbSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mayilThumbSwiper .swiper-slide-thumb-active {
    opacity: 1;
    border-color: #2a0c00;
    border-width: 2px;
}
.mayilThumbSwiper .swiper-wrapper .swiper-slide{    width: 60px !important;
    height: 85px;
    border-radius: 5px;}

.mayil-option-item.is-out-of-stock {
    position: relative;
    opacity: 0.45;
    cursor: not-allowed;
}

.mayil-option-item.is-out-of-stock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
}

.mayil-option-item.is-out-of-stock img {
    opacity: 0.5;
}

.mayil-option-item:disabled {
    cursor: not-allowed;
}
.related{
    
    margin: 45px auto !important;
    width: 92%;
    max-width: 1600px;
    margin: auto;
    
}
 .mayil-container .mobile-cart-button{display:flex;}
/*.related h2{font-family: 'Merriweather' !important;}*/
.woocommerce-loop-product__title{font-family:'Instrument-sans' !important;}
.woocommerce-variation-add-to-cart {display:flex;}
.single_variation_wrap{width:100%;}
.woocommerce-variation.single_variation{display:none !important;}
form.cart{display:flex;flex-direction:column;}
button.mayil-option-item:hover,button.mayil-option-item:focus {
background: #2a0c00;
color: #f3a037;
}