/* ==========================
   SHOP DESIGN SYSTEM
========================== */

:root{

    --primary-blue:#011845;
    --primary-gold:#dda524;

    --container-width:1320px;

    --sidebar-width:300px;

    --card-width:314px;
    --card-height:312px;

    --image-width:280px;
    --image-height:186px;

}


/* ==========================
   SHOP HERO
========================== */

.shop-hero{
    padding:0;
}

.shop-hero .container,
.shop-hero-inner{
    width:100%;
    max-width:none;
}

.shop-banner{
    position:relative;
    min-height:clamp(360px, 52vw, 560px);
    border-radius:0;
    overflow:hidden;
    background-image:url('../images/campaign/shop-heroe.jpg');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.shop-banner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(1, 24, 69, .74) 0%,
        rgba(1, 24, 69, .46) 24%,
        rgba(1, 24, 69, .16) 48%,
        rgba(1, 24, 69, 0) 72%
    );
}

.shop-banner-content{
    position:absolute;
    top:50%;
    right:max(5vw, 24px);
    transform:translateY(-50%);
    z-index:2;
    max-width:450px;
    text-align:left;
}

.shop-banner-tag{
    display:block;
    margin-bottom:10px;
    color:#dda524;
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.shop-banner h1{
    margin:0 0 12px;
    font-size:clamp(34px, 4.4vw, 54px);
    line-height:1.05;
    font-weight:700;
    color:#ffffff;
}

.shop-banner p{
    margin:0;
    font-size:16px;
    color:#ffffff;
}
/* ==========================
   TOP BAR
========================== */

/* ==========================
   SHOP TOP BAR
========================== */

.shop-topbar{
    position:relative;
    z-index:2;
    margin-top:-30px;
    padding:0 0 26px;
    background:transparent;
}


.shop-topbar-inner{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    min-height:58px;
    padding:10px 18px;
    border:1px solid rgba(1, 24, 69, .06);
    border-radius:12px;
    background:#fff;
    box-shadow:0 16px 34px rgba(1, 24, 69, .13);
}

.shop-topbar-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.shop-filter-toggle{
    display:none;
    min-height:38px;
    padding:0 14px;
    border:1px solid rgba(1, 24, 69, .1);
    border-radius:8px;
    background:#fff;
    color:var(--primary-blue);
    cursor:pointer;
    font-size:13px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(1, 24, 69, .08);
    transition:
        border-color .22s ease,
        background-color .22s ease,
        color .22s ease,
        transform .22s ease;
}

.shop-filter-toggle:hover,
.shop-filter-toggle:focus-visible{
    border-color:var(--primary-gold);
    background:var(--primary-gold);
    color:#fff;
    transform:translateY(-1px);
}


.shop-breadcrumb{

    font-size:14px;
    color:var(--primary-blue);
}

.shop-result-count{

    color:#5a6375;
    font-size:14px;
    position:relative;
    padding-left:20px;
}

.shop-result-count::before{

    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:14px;
    background:#d1d5db;
}

/* ==========================
   Breadcrumbs
========================== */


.shop-breadcrumb a{
    text-decoration:none;
    color:var(--primary-blue);
    font-size:14px;
}

.shop-breadcrumb a:hover{
    color:var(--primary-gold);
}

.shop-breadcrumb .separator{
    margin:0 4px;
    color:#9ca3af;
}

.shop-result-count{
    font-size:12px;
    color:#5a6375;
    font-weight:500;
}

.shop-search form{
    position:relative;
}

.shop-search form[aria-busy="true"]::after{
    content:"";
    position:absolute;
    top:50%;
    right:12px;
    width:12px;
    height:12px;
    margin-top:-7px;
    border:2px solid rgba(1, 24, 69, .2);
    border-top-color:var(--primary-gold);
    border-radius:50%;
    animation:shop-search-spin .7s linear infinite;
}

.shop-search input[type="search"]{
    width:100%;
    height:35px;
    padding:0 18px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    outline:none;
    font-size:14px;
    transition:.3s ease;
}

.shop-search input[type="search"]:disabled{
    padding-right:36px;
    background:#f7f8fa;
}

.shop-search input[type="search"]:focus{

    border-color:var(--primary-blue);
}

@keyframes shop-search-spin{
    to{
        transform:rotate(360deg);
    }
}

.shop-search button,
.shop-search input[type="submit"]{

    display:none;
}





/* ==========================
   SHOP CONTAINER
========================== */

.shop-layout .container{

    max-width:1320px;
    width:90%;
    padding-bottom:80px;

}


/* ==========================
   SIDEBAR
========================== */

.shop-sidebar{
   background:#fff;
    border:none;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 25px;

    position: sticky;
    top: 20px;

    height:auto;
    overflow:visible;
}

.shop-filter-drawer-head,
.shop-filter-backdrop{
    display:none;
}

.shop-filter-close{
    position:relative;
    width:38px;
    height:38px;
    border:1px solid rgba(1, 24, 69, .1);
    border-radius:8px;
    background:#fff;
    cursor:pointer;
}

.shop-filter-close span{
    position:absolute;
    top:18px;
    left:10px;
    width:16px;
    height:2px;
    border-radius:999px;
    background:var(--primary-blue);
}

.shop-filter-close span:first-child{
    transform:rotate(45deg);
}

.shop-filter-close span:last-child{
    transform:rotate(-45deg);
}

.shop-sidebar h3{
    margin-top: 0;
}





/* ==========================
   SHOP GRID
========================== */

.shop-container{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    align-items:start;
    padding-top:20px;
}

/* ==========================
   PRODUCT GRID
========================== */

.woocommerce ul.products{

    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    width:100%;
}

.woocommerce ul.products li.product{
    width:100% !important;
    margin:0 !important;
    float:none !important;
    clear:none !important;
}

.woocommerce ul.products{
    padding:0;
    margin:0;
    list-style:none;
}


/* ==========================
   PRODUCT CARD
========================== */

.product-card{

    background:#fff;
    border-radius:14px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    overflow:hidden;
    height:auto;
    display:flex;
    flex-direction:column;
    transition:.3s ease;
    
}

.product-card:hover{
    transform:translateY(-4px);
}

/* ==========================
   IMAGE
========================== */

.product-image-wrapper{

    width:100% !important;
    height:200px !important;
    padding:0px;
    display:flex;
    align-items:center;
    overflow:hidden;
    justify-content:center;
    box-sizing:border-box;
}

.product-image-wrapper img{

    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    align-items: center;
}

.product-image-wrapper img{
    transition:.4s ease;
}

.product-card:hover .product-image-wrapper img{
    transform:scale(1.05);
}



/* ==========================
   DETAILS
========================== */
.product-details{

    flex:1;
    padding-right:10px;
    padding-left:10px;  
    padding-bottom:10px;
    padding-top:0px;
    text-align:left;
    display:flex;
    flex-direction:column;
    border-top:1px solid #eee;
    margin-top:auto;
}

.product-title{
    margin:auto;
    font-family:var(--font-body);
    font-size:16px !important;
    font-weight:600;
    line-height:1.4;
    color:var(--primary-blue);
}

.product-category{
    margin:0px 0 0px;
    font-size:14px;
    color:#8a8a8a;
}

.product-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.product-price{
    font-size:14px;
    font-weight:500;
    color:var(--primary-blue);
}

.select-option-btn{
    position:relative;
    overflow:hidden;
    background:#dda524;
    color:#fff;
    padding:8px 14px;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    box-shadow:0 5px 14px rgba(221, 165, 36, .2);
    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.select-option-btn::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-75%;
    width:45%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .35),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .55s ease;
}

.select-option-btn:hover{
    background:#c9951f;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 9px 20px rgba(221, 165, 36, .3);
}

.select-option-btn:hover::before{
    left:130%;
}

.select-option-btn:active{
    transform:translateY(0);
    box-shadow:0 3px 9px rgba(221, 165, 36, .22);
}

.select-option-btn:focus-visible{
    outline:3px solid rgba(221, 165, 36, .3);
    outline-offset:3px;
}


.woocommerce ul.products.columns-4 li.product,
.woocommerce-page ul.products.columns-4 li.product{
    width:auto !important;
    margin:0 !important;
}

.woocommerce ul.products li.first,
.woocommerce ul.products li.last{
    clear:none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after{
    display:none !important;
    content:none !important;
}


/* FILTERS */


.filter-title{

    color:#011845;

    margin-bottom:25px;
    font-size:28px;
    line-height:1.2;
}

.filter-group{

    margin-bottom:25px;
}

.filter-toggle{
    width:100%;
    padding:0 0 15px;
    border:0;
    background:transparent;
    color:#011845;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font:inherit;
    font-size:16px;
    font-weight:600;
    text-align:left;
    cursor:pointer;
}

.filter-toggle:focus-visible{
    outline:2px solid var(--primary-gold);
    outline-offset:4px;
    border-radius:2px;
}

.filter-chevron{
    width:9px;
    height:9px;
    margin-right:3px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform .4s cubic-bezier(.22, 1, .36, 1);
}

.filter-toggle[aria-expanded="false"] .filter-chevron{
    transform:rotate(-45deg);
}

.filter-content{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-8px);
    transition:
        max-height .48s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease,
        transform .4s cubic-bezier(.22, 1, .36, 1);
    will-change:max-height, opacity, transform;
}

.filter-content.is-open{
    max-height:var(--filter-content-height, 500px);
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .filter-content,
    .filter-chevron{
        transition-duration:.01ms;
    }
}

.filter-group label{

    display:block;

    margin-bottom:10px;

    cursor:pointer;
}

/* Sizes */

.size-grid{

    display:grid;

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

    gap:10px;

    padding:6px 4px 8px;
}

.size-grid button{
    height:40px;
    border:1px solid #d9dde6;
    background:#fff;
    border-radius:7px;
    color:var(--primary-blue);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease;
}

.size-grid button:hover{
    border-color:#aeb6c5;
    background:#f7f8fa;
}

.size-option.active{
    border-color:var(--primary-gold);
    background:#fffaf0;
    color:var(--primary-blue);
    box-shadow:inset 0 0 0 1px rgba(221, 165, 36, .18);
}

.size-option:focus-visible{
    outline:2px solid rgba(221, 165, 36, .45);
    outline-offset:2px;
}



/* Colours */

.colour-options{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.colour-option{

    border:1px solid #ddd;
    background:#fff;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    transition:.3s;
}

.colour-option:hover{

    border-color:#011845;
    color:#011845;
}

.colour{

    width:28px;
    height:28px;
    border-radius:50%;
    cursor:pointer;
    border:2px solid #eee;
    position:relative;
}

.colour-option.active{

    background:#011845;
    color:#fff;
    border-color:#011845;
}

.colour:hover{

    transform:scale(1.1);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}



/* Price range */

.price-display{
    display:grid;
    grid-template-columns:1fr 18px 1fr;
    gap:8px;
    align-items:center;
    margin-bottom:22px;
}

.price-value-card{
    display:block;
    padding:10px 12px;
    border:1px solid rgba(1, 24, 69, .12);
    border-radius:10px;
    background:linear-gradient(145deg, #fff 0%, #f8f9fc 100%);
    box-shadow:0 5px 14px rgba(1, 24, 69, .06);
    cursor:text;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.price-value-card:focus-within{
    border-color:rgba(221, 165, 36, .8);
    box-shadow:
        0 0 0 3px rgba(221, 165, 36, .12),
        0 5px 14px rgba(1, 24, 69, .07);
}

.price-value-label{
    display:block;
    margin-bottom:3px;
    color:#8a91a0;
    font-size:10px;
    font-weight:600;
    letter-spacing:.06em;
    line-height:1.2;
    text-transform:uppercase;
}

.price-input-wrap{
    display:flex;
    align-items:center;
    min-width:0;
    color:var(--primary-blue);
    font-size:14px;
    font-weight:700;
    line-height:1.3;
}

.price-currency{
    flex:0 0 auto;
}

.price-value-input{
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:inherit;
    font:inherit;
    line-height:inherit;
    -moz-appearance:textfield;
}

.price-value-input::-webkit-inner-spin-button,
.price-value-input::-webkit-outer-spin-button{
    margin:0;
    -webkit-appearance:none;
}

.price-value-card:has(.price-value-input[aria-invalid="true"]){
    border-color:#c84b4b;
    box-shadow:0 0 0 3px rgba(200, 75, 75, .1);
}

.price-value-separator{
    width:10px;
    height:1px;
    margin:auto;
    background:rgba(1, 24, 69, .35);
}

.price-slider{
    position:relative;
    height:24px;
}

.price-slider-track{
    position:absolute;
    top:50%;
    right:0;
    left:0;
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:#e6e9ef;
    transform:translateY(-50%);
    box-shadow:inset 0 1px 2px rgba(1, 24, 69, .12);
}

.price-slider-progress{
    position:absolute;
    top:0;
    bottom:0;
    left:var(--range-start);
    right:calc(100% - var(--range-end));
    border-radius:inherit;
    background:linear-gradient(90deg, #c98c10, var(--primary-gold));
    box-shadow:0 0 9px rgba(221, 165, 36, .34);
}

.price-range-input{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:24px;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    pointer-events:none;
    -webkit-appearance:none;
    appearance:none;
}

.price-range-input::-webkit-slider-runnable-track{
    height:6px;
    background:transparent;
}

.price-range-input::-webkit-slider-thumb{
    width:18px;
    height:18px;
    margin-top:-6px;
    border:3px solid #fff;
    border-radius:50%;
    background:var(--primary-gold);
    box-shadow:
        0 0 0 1px rgba(1, 24, 69, .12),
        0 4px 10px rgba(1, 24, 69, .22);
    cursor:grab;
    pointer-events:auto;
    transition:transform .2s ease, box-shadow .2s ease;
    -webkit-appearance:none;
    appearance:none;
}

.price-range-input::-moz-range-track{
    height:6px;
    background:transparent;
}

.price-range-input::-moz-range-thumb{
    width:12px;
    height:12px;
    border:3px solid #fff;
    border-radius:50%;
    background:var(--primary-gold);
    box-shadow:
        0 0 0 1px rgba(1, 24, 69, .12),
        0 4px 10px rgba(1, 24, 69, .22);
    cursor:grab;
    pointer-events:auto;
    transition:transform .2s ease, box-shadow .2s ease;
}

.price-range-input::-webkit-slider-thumb:hover,
.price-range-input:focus-visible::-webkit-slider-thumb{
    transform:scale(1.15);
    box-shadow:
        0 0 0 4px rgba(221, 165, 36, .16),
        0 5px 12px rgba(1, 24, 69, .25);
}

.price-range-input::-moz-range-thumb:hover,
.price-range-input:focus-visible::-moz-range-thumb{
    transform:scale(1.15);
    box-shadow:
        0 0 0 4px rgba(221, 165, 36, .16),
        0 5px 12px rgba(1, 24, 69, .25);
}

.price-range-markers{
    display:flex;
    justify-content:space-between;
    margin-top:4px;
    color:#9a9fab;
    font-size:10px;
    font-weight:600;
}

/* Apply Button */

.apply-filter-btn{

    position:relative;
    overflow:hidden;
    width:100%;
    height:48px;
    border:none;
    border-radius:8px;
    background:#dda524;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(221, 165, 36, .2);
    transition:
        opacity .2s ease,
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.apply-filter-btn::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-75%;
    width:45%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .35),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .55s ease;
}

.apply-filter-btn:hover{
    background:#c9951f;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(221, 165, 36, .3);
}

.apply-filter-btn:hover::before{
    left:130%;
}

.apply-filter-btn:active{
    transform:translateY(0);
    box-shadow:0 4px 10px rgba(221, 165, 36, .22);
}

.apply-filter-btn:focus-visible{
    outline:3px solid rgba(221, 165, 36, .3);
    outline-offset:3px;
}

.apply-filter-btn:disabled{
    opacity:.65;
    cursor:wait;
    transform:none;
}

.apply-filter-btn:disabled::before{
    display:none;
}

.shop-products[aria-busy="true"]{
    opacity:.55;
    pointer-events:none;
    transition:opacity .2s ease;
}

.shop-products .woocommerce-pagination{
    margin-top:34px;
}

.shop-products .woocommerce-pagination ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin:0;
    padding:0;
    border:0;
    list-style:none;
}

.shop-products .woocommerce-pagination ul li{
    border:0;
}

.shop-products .woocommerce-pagination a,
.shop-products .woocommerce-pagination span{
    min-width:42px;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border:1px solid rgba(1, 24, 69, .1);
    border-radius:8px;
    background:#fff;
    color:var(--primary-blue);
    font-size:14px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(1, 24, 69, .08);
}

.shop-products .woocommerce-pagination a:hover,
.shop-products .woocommerce-pagination a:focus-visible,
.shop-products .woocommerce-pagination span.current{
    border-color:var(--primary-gold);
    background:var(--primary-gold);
    color:#fff;
}

/* FILTER */

.filter-group .filter-checkbox{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:38px;
    margin:0 0 6px;
    padding:0 10px;
    border:1px solid transparent;
    border-radius:8px;
    color:#4f5869;
    cursor:pointer;
    font-size:14px;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.filter-group .filter-checkbox:hover{
    background:#f7f8fa;
    color:var(--primary-blue);
}

.filter-group .filter-checkbox:has(input:checked){
    border-color:rgba(1, 24, 69, .1);
    background:#f5f7fb;
    color:var(--primary-blue);
    font-weight:600;
}

.filter-checkbox input{
    position:relative;
    flex:0 0 17px;
    width:17px;
    height:17px;
    margin:0;
    border:1.5px solid #b9c0cc;
    border-radius:5px;
    background:#fff;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.filter-checkbox input::after{
    content:"";
    position:absolute;
    top:2px;
    left:5px;
    width:4px;
    height:8px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    opacity:0;
    transform:rotate(45deg) scale(.7);
    transition:opacity .15s ease, transform .15s ease;
}

.filter-checkbox input:checked{
    border-color:var(--primary-blue);
    background:var(--primary-blue);
    box-shadow:0 0 0 3px rgba(1, 24, 69, .08);
}

.filter-checkbox input:checked::after{
    opacity:1;
    transform:rotate(45deg) scale(1);
}

.filter-checkbox input:focus-visible{
    outline:2px solid rgba(221, 165, 36, .55);
    outline-offset:2px;
}

@media (max-width: 980px){
    .shop-container{
        grid-template-columns:1fr;
        gap:24px;
    }

    .shop-sidebar{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        z-index:90;
        width:min(94vw, 430px);
        padding:22px;
        border-radius:0;
        background:rgba(255, 255, 255, .9);
        backdrop-filter:blur(22px);
        box-shadow:-24px 0 54px rgba(1, 24, 69, .22);
        overflow-y:auto;
        transform:translateX(104%);
        transition:transform .34s cubic-bezier(.22, 1, .36, 1);
    }

    body.shop-filter-open .shop-sidebar{
        transform:translateX(0);
    }

    .shop-filter-backdrop{
        position:fixed;
        inset:0;
        z-index:85;
        display:block;
        background:rgba(1, 24, 69, .46);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .26s ease, visibility .26s ease;
    }

    body.shop-filter-open .shop-filter-backdrop{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .shop-filter-drawer-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        margin-bottom:20px;
    }

    .shop-filter-drawer-head .filter-title{
        margin:0;
    }

    .shop-filter-title-desktop{
        display:none;
    }

    .shop-filter-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .woocommerce ul.products{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px){
    .shop-layout .container{
        width:92%;
    }

    .shop-banner-content{
        left:5%;
        right:5%;
        max-width:520px;
    }

    .shop-topbar{
        margin-top:-22px;
        padding-bottom:20px;
    }

    .shop-topbar-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .shop-topbar-left{
        width:100%;
        display:grid;
        grid-template-columns:1fr auto;
        gap:6px;
    }

    .shop-breadcrumb{
        min-width:0;
    }

    .shop-result-count{
        grid-column:1 / -1;
        padding-left:0;
    }

    .shop-result-count::before{
        display:none;
    }

    .shop-topbar-right,
    .shop-search,
    .shop-search form{
        width:100%;
    }

    .woocommerce ul.products{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
    }

    .product-card{
        border-radius:10px;
    }

    .product-image-wrapper{
        height:150px !important;
    }

    .product-details{
        padding:8px;
    }

    .product-title{
        min-height:38px;
        margin:0 0 4px;
        font-size:13px !important;
        line-height:1.35;
        overflow:hidden;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .product-category{
        font-size:12px;
    }

    .product-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .product-price{
        font-size:12px;
        line-height:1.35;
    }

    .select-option-btn{
        width:100%;
        padding:8px 9px;
        text-align:center;
        font-size:12px;
    }
}

@media (max-width: 380px){
    .woocommerce ul.products{
        gap:10px;
    }

    .product-image-wrapper{
        height:132px !important;
    }
}