<?php

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

$product = $args['product'] ?? null;

if ( ! $product ) {
    return;
}

/*====================================================
23.01-A
PRODUCT CARD WRAPPER ENGINE v1.0

Purpose :
• Premium Product Card
• Equal Height
• Clean Layout
• Smooth Animation
• Shadow System

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Product Card
----------------------------------*/

.shopex-product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:18px;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}


/*----------------------------------
02. Product Card Hover
----------------------------------*/

.shopex-product-card:hover{

    transform:translateY(-8px);

    border-color:#e4e4e4;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}


/*----------------------------------
03. Product Inner Layout
----------------------------------*/

.shopex-product-card > *{

    width:100%;

}


/*----------------------------------
04. Equal Height Support
----------------------------------*/

.shopex-product-content{

    flex:1;

}

/*====================================================
23.01-B
PRODUCT IMAGE ENGINE v2.0

Purpose :
• Product Image Wrapper
• Aspect Ratio
• Image Fit
• Hover Zoom
• Background
• Performance

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Product Image Wrapper
----------------------------------*/

.shopex-product-image{

    position:relative;

    width:100%;

    aspect-ratio: 1/.3;

    overflow:hidden;

    background:#fafafa;

    border-radius:8px 8px 0 0;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*----------------------------------
02. Product Image
----------------------------------*/

.shopex-product-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .45s ease,
        opacity .30s ease;

}


/*----------------------------------
03. Image Hover
----------------------------------*/

.shopex-product-card:hover .shopex-product-image img{

    transform:scale(1.08);

}


/*----------------------------------
04. Performance
----------------------------------*/

.shopex-product-image img{

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    transform:translateZ(0);

    will-change:transform;

}

/*----------------------------------
07. Desktop
----------------------------------*/

@media (min-width:1200px){

    .shopex-product-image{

        min-height:200px;

    }

}


/*----------------------------------
08. Laptop
----------------------------------*/

@media (min-width:992px) and (max-width:1199px){

    .shopex-product-image{

        min-height:170px;

    }

}


/*----------------------------------
09. Tablet
----------------------------------*/

@media (min-width:768px) and (max-width:991px){

    .shopex-product-image{

        min-height:180px;

    }

}


/*----------------------------------
10. Mobile
----------------------------------*/

@media (max-width:767px){

    .shopex-product-image{

        min-height:180px;

    }

}


/*----------------------------------
11. Small Mobile
----------------------------------*/

@media (max-width:480px){

    .shopex-product-image{

        min-height:170px;

    }

}

/*====================================================
23.01-C
SALE BADGE ENGINE v2.0

Purpose :
• WooCommerce Sale Badge
• Discount %
• Premium Badge
• Hover Ready
• Mobile Ready

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------*
*01. Sale Badge — Circle*
*----------------------------------*/

.shopex-sale-badge {

    position: absolute;

    top: 62px;

    right: 14px;

    z-index: 20;

    width: 48px;

    height: 48px;

    padding: 0;

    border-radius: 50%;

    background: #ff6b00;

    color: #ffffff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0;

    white-space: nowrap;

    box-shadow: 0 8px 18px rgba(255,107,0,.22);

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}


/*----------------------------------*
*02. Hover Effect*
*----------------------------------*/

.shopex-product-card:hover .shopex-sale-badge {

    transform: scale(1.08);

    box-shadow: 0 12px 24px rgba(255,107,0,.28);

}


/*----------------------------------*
*03. Small Badge*
*----------------------------------*/

.shopex-sale-badge.small {

    width: 42px;

    height: 42px;

    font-size: 11px;

}


/*----------------------------------*
*04. Large Badge*
*----------------------------------*/

.shopex-sale-badge.large {

    width: 54px;

    height: 54px;

    font-size: 13px;

}


/*----------------------------------*
*05. Mobile*
*----------------------------------*/

@media (max-width: 767px) {

    .shopex-sale-badge {

        top: 58px;

        right: 10px;

        width: 44px;

        height: 44px;

        font-size: 11px;

    }

}

/*====================================================
23.01-D
WISHLIST ENGINE v2.0

Purpose :
• Floating Wishlist Button
• Premium Hover
• WooCommerce Ready
• Future Plugin Ready

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Wishlist Button
----------------------------------*/

.shopex-wishlist-btn{

    position:absolute;

    top:14px;

    right:14px;

    z-index:25;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:50%;

    background:#ffffff;

    color:#444444;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

    transition:
        all .30s ease;

}


/*----------------------------------
02. Icon
----------------------------------*/

.shopex-wishlist-btn i{

    font-size:17px;

    transition:.30s ease;

}


/*----------------------------------
03. Hover
----------------------------------*/

.shopex-wishlist-btn:hover{

    background:#ff9900;

    color:#ffffff;

    transform:translateY(-2px);

}


/*----------------------------------
04. Active State
----------------------------------*/

.shopex-wishlist-btn.active{

    background:#ff4d4f;

    color:#ffffff;

}


/*----------------------------------
05. Active Icon
----------------------------------*/

.shopex-wishlist-btn.active i{

    font-weight:900;

}


/*----------------------------------
06. Mobile
----------------------------------*/

@media (max-width:767px){

    .shopex-wishlist-btn{

        width:36px;

        height:36px;

        top:10px;

        right:10px;

    }

    .shopex-wishlist-btn i{

        font-size:15px;

    }

}

/*====================================================
23.01-E
QUICK VIEW ENGINE v2.1

Purpose :
• Compact Quick View Button
• Premium Hover Animation
• Center Position
• Mobile Ready

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/

/*----------------------------------*
*01. Quick View Button*
*----------------------------------*/

.shopex-quick-view {

    position:absolute;

    left:50%;

    bottom:-48px;

    transform:translateX(-50%);

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-width:112px;

    height:34px;

    padding:0 14px;

    border-radius:50px;

    background:#111111;

    color:#ffffff;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    z-index:30;

    opacity:0;

    visibility:hidden;

    box-shadow:0 8px 18px rgba(0,0,0,.18);

    transition:
        bottom .30s ease,
        opacity .30s ease,
        visibility .30s ease,
        background .30s ease,
        transform .30s ease;

}


/*----------------------------------*
*02. Icon*
*----------------------------------*/

.shopex-quick-view i {

    font-size:12px;

}


/*----------------------------------*
*03. Card Hover*
*----------------------------------*/

.shopex-product-card:hover .shopex-quick-view {

    bottom:14px;

    opacity:1;

    visibility:visible;

}


/*----------------------------------*
*04. Button Hover*
*----------------------------------*/

.shopex-quick-view:hover {

    background:#ff9900;

    color:#ffffff;

    transform:translateX(-50%) translateY(-2px);

}


/*----------------------------------*
*05. Mobile*
*----------------------------------*/

@media (max-width:767px) {

    .shopex-quick-view {

        min-width:100px;

        height:32px;

        padding:0 12px;

        font-size:11px;

        gap:5px;

        bottom:-42px;

    }

    .shopex-quick-view i {

        font-size:11px;

    }

    .shopex-product-card:hover .shopex-quick-view {

        bottom:10px;

    }

}

/*====================================================
23.01-N
QUICK VIEW MODAL ENGINE v1.0
====================================================*/

.shopex-quick-view-modal {

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .30s ease,
        visibility .30s ease;

}


.shopex-quick-view-modal.is-active {

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/*----------------------------------*
* Overlay
*----------------------------------*/

.shopex-quick-view-overlay {

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(4px);

}


/*----------------------------------*
* Dialog
*----------------------------------*/

.shopex-quick-view-dialog {

    position:relative;

    width:min(900px,100%);

    max-height:90vh;

    overflow:auto;

    background:#ffffff;

    border-radius:20px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);

    transform:translateY(20px) scale(.97);

    transition:.30s ease;

}


.shopex-quick-view-modal.is-active
.shopex-quick-view-dialog {

    transform:translateY(0) scale(1);

}


/*----------------------------------*
* Inner
*----------------------------------*/

.shopex-quick-view-inner {

    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:420px;

}


/*----------------------------------*
* Image
*----------------------------------*/

.shopex-quick-view-image {

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:#fafafa;

}


.shopex-quick-view-image img {

    width:100%;

    max-height:430px;

    object-fit:contain;

}


/*----------------------------------*
* Content
*----------------------------------*/

.shopex-quick-view-content {

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.shopex-quick-view-title {

    margin:0 0 14px;

    font-size:28px;

    line-height:1.3;

    color:#222;

}


.shopex-quick-view-rating {

    margin-bottom:14px;

    color:#ffb400;

}


.shopex-quick-view-price {

    margin-bottom:20px;

    font-size:24px;

    font-weight:800;

}


.shopex-quick-view-price del {

    margin-right:8px;

    color:#999;

    font-size:16px;

    font-weight:400;

}


.shopex-quick-view-price ins {

    color:#111;

    text-decoration:none;

}


.shopex-quick-view-description {

    margin-bottom:25px;

    color:#666;

    line-height:1.7;

}


/*----------------------------------*
* Actions
*----------------------------------*/

.shopex-quick-view-actions {

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}


.shopex-quick-view-add-cart,
.shopex-quick-view-details {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:24px;

    padding:0 20px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

}


.shopex-quick-view-add-cart {

    background:#ff9900;

    color:#fff;

}


.shopex-quick-view-details {

    background:#111;

    color:#fff;

}


.shopex-quick-view-add-cart:hover {

    background:#ff6b00;

    color:#fff;

}


.shopex-quick-view-details:hover {

    background:#222;

    color:#fff;

}


/*----------------------------------*
* Close
*----------------------------------*/

.shopex-quick-view-close {

    position:absolute;

    top:14px;

    right:14px;

    z-index:10;

    width:38px;

    height:38px;

    border:0;

    border-radius:50%;

    background:#fff;

    color:#222;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

}


.shopex-quick-view-close:hover {

    background:#ff9900;

    color:#fff;

}


/*----------------------------------*
* Loader
*----------------------------------*/

.shopex-quick-view-loader {

    position:absolute;

    inset:0;

    z-index:20;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.75);

}


.shopex-quick-view-loader.is-loading {

    display:flex;

}


.shopex-quick-view-loader span {

    width:36px;

    height:36px;

    border:4px solid #eee;

    border-top-color:#ff9900;

    border-radius:50%;

    animation:shopexQuickViewSpin .7s linear infinite;

}


@keyframes shopexQuickViewSpin {

    to {

        transform:rotate(360deg);

    }

}


/*----------------------------------*
* Error
*----------------------------------*/

.shopex-quick-view-error {

    padding:50px;

    text-align:center;

    color:#c00;

}


/*----------------------------------*
* Body Lock
*----------------------------------*/

body.shopex-quick-view-open {

    overflow:hidden;

}


/*----------------------------------*
* Mobile
*----------------------------------*/

@media (max-width:767px) {

    .shopex-quick-view-modal {

        padding:15px;

    }

    .shopex-quick-view-inner {

        grid-template-columns:1fr;

    }

    .shopex-quick-view-image {

        min-height:280px;

        padding:20px;

    }

    .shopex-quick-view-image img {

        max-height:280px;

    }

    .shopex-quick-view-content {

        padding:25px;

    }

    .shopex-quick-view-title {

        font-size:22px;

    }

    .shopex-quick-view-price {

        font-size:21px;

    }

    .shopex-quick-view-actions {

        flex-direction:column;

    }

    .shopex-quick-view-add-cart,
    .shopex-quick-view-details {

        width:100%;

    }

}

/*====================================================
23.01-F
PRODUCT CONTENT ENGINE v2.0

Purpose :
• Product Content Layout
• Equal Height
• Vertical Alignment
• Clean Spacing
• Premium Design

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Product Content Wrapper
----------------------------------*/

.shopex-product-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:12px;

    gap:12px;

}


/*----------------------------------
02. Content Top Area
----------------------------------*/

.shopex-product-info{

    display:flex;

    flex-direction:column;

    gap:10px;

}


/*----------------------------------
03. Content Bottom Area
----------------------------------*/

.shopex-product-footer{

    margin-top:auto;

}


/*----------------------------------
04. Typography Reset
----------------------------------*/

.shopex-product-content p{

    margin:0;

}

.shopex-product-content h1,

.shopex-product-content h2,

.shopex-product-content h3,

.shopex-product-content h4{

    margin:0;

}


/*----------------------------------
05. Product Meta
----------------------------------*/

.shopex-product-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}


/*----------------------------------
06. Stock Label
----------------------------------*/

.shopex-stock{

    font-size:13px;

    font-weight:600;

    color:#1ea83c;

}

.shopex-stock.out{

    color:#e53935;

}


/*----------------------------------
07. Smooth Transition
----------------------------------*/

.shopex-product-content,

.shopex-product-info,

.shopex-product-footer{

    transition:.30s ease;

}


/*----------------------------------
08. Mobile
----------------------------------*/

@media (max-width:767px){

    .shopex-product-content{

        padding:14px;

        gap:10px;

    }

}

/*====================================================
23.01-G
PRODUCT TITLE ENGINE v2.0

Purpose :
• Product Title
• Two Line Clamp
• Equal Height
• Premium Typography
• Hover Effect

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Product Title
----------------------------------*/

.shopex-product-title{

    margin:0 0 2px;

    min-height:0;

    font-size:16px;

    font-weight:700;

    line-height:1.3;

    overflow:hidden;

}


/*----------------------------------
02. Two Line Clamp
----------------------------------*/

.shopex-product-title{

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    line-clamp:2;

}


/*----------------------------------
03. Product Link
----------------------------------*/

.shopex-product-title a{

    color:#222222;

    text-decoration:none;

    transition:color .30s ease;

}


/*----------------------------------
04. Hover
----------------------------------*/

.shopex-product-title a:hover{

    color:#ff9900;

}


/*----------------------------------
05. Long Product Name
----------------------------------*/

.shopex-product-title{

    word-break:break-word;

    overflow-wrap:break-word;

}


/*----------------------------------
06. Desktop
----------------------------------*/

@media (min-width:1200px){

    .shopex-product-title{

        font-size:18px;

    }

}


/*----------------------------------
07. Tablet
----------------------------------*/

@media (max-width:991px){

    .shopex-product-title{

        font-size:17px;

        min-height:50px;

    }

}


/*----------------------------------
08. Mobile
----------------------------------*/

@media (max-width:767px){

    .shopex-product-title{

        font-size:16px;

        min-height:46px;

        line-height:1.40;

    }

}


/*----------------------------------
09. Small Mobile
----------------------------------*/

@media (max-width:480px){

    .shopex-product-title{

        font-size:15px;

        min-height:42px;

    }

}

/*====================================================
23.01-H
PRODUCT RATING ENGINE v2.0

Purpose :
• WooCommerce Rating
• Star Display
• Review Count
• Empty Rating Support
• Premium Alignment

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Rating Wrapper
----------------------------------*/

.shopex-product-rating{

    display:flex;

    align-items:center;

    gap:5px;

    min-height:18px;

    font-size:13px;

    line-height:1;

}


/*----------------------------------
02. WooCommerce Stars
----------------------------------*/

.shopex-product-rating .star-rating{

    margin:0;

    color:#ffb400;

    font-size:11px;

}


/*----------------------------------
03. Review Count
----------------------------------*/

.shopex-product-rating .count{

    font-size:12px;

    font-weight:400;

    color:#777777;

}


/*----------------------------------
04. Empty Rating
----------------------------------*/

.shopex-product-rating.empty{

    color:#bbbbbb;

}


/*----------------------------------
05. Hover
----------------------------------*/

.shopex-product-card:hover .star-rating{

    color:#ff9900;

}


/*----------------------------------
06. Mobile
----------------------------------*/

@media (max-width:767px){

    .shopex-product-rating{

        gap:6px;

        font-size:13px;

    }

    .shopex-product-rating .count{

        font-size:12px;

    }

}

/*====================================================
23.01-I
PRODUCT PRICE ENGINE v2.0

Purpose :
• WooCommerce Price
• Sale Price
• Regular Price
• Variable Product
• Premium Typography

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Price Wrapper
----------------------------------*/

.shopex-product-price{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    min-height:34px;

}


/*----------------------------------
02. Current Price
----------------------------------*/

.shopex-product-price ins,

.shopex-product-price .price ins{

    margin:0;

    padding:0;

    background:none;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    color:#111111;

}


/*----------------------------------
03. Regular Price
----------------------------------*/

.shopex-product-price del,

.shopex-product-price .price del{

    color:#999999;

    font-size:14px;

    font-weight:600;

    text-decoration:line-through;

    opacity:.85;

}


/*----------------------------------
04. WooCommerce Price
----------------------------------*/

.shopex-product-price .price{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin:0;

}


/*----------------------------------
05. Currency Symbol
----------------------------------*/

.shopex-product-price .woocommerce-Price-currencySymbol{

    font-size:.90em;

    font-weight:700;

}


/*----------------------------------
06. Variable Product Price
----------------------------------*/

.shopex-product-price .from{

    color:#777777;

    font-size:13px;

    font-weight:500;

    margin-right:4px;

}


/*----------------------------------
07. Empty Price
----------------------------------*/

.shopex-product-price:empty{

    display:none;

}


/*----------------------------------
08. Responsive
----------------------------------*/

@media (max-width:767px){

    .shopex-product-price ins,

    .shopex-product-price .price ins{

        font-size:26px;

    }

    .shopex-product-price del,

    .shopex-product-price .price del{

        font-size:14px;

    }

}

/*====================================================
23.01-J
PRODUCT ACTION BAR ENGINE v2.0

Purpose :
• Action Layout
• WooCommerce Cart
• Buy Now
• Equal Width
• Premium Button System

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Action Wrapper
----------------------------------*/

.shopex-product-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:7px;

    margin-top:auto;

    align-items:stretch;

}


/*----------------------------------
02. Equal Height
----------------------------------*/

.shopex-product-actions > *{

    width:100%;

}


/*----------------------------------
03. Button Reset
----------------------------------*/

.shopex-product-actions a,
.shopex-product-actions button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    height:32px;

    min-height:32px;

    padding:0 7px;

    border-radius:9px;

    font-size:11px;

    font-weight:700;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    box-sizing:border-box;

    transition:.30s ease;

}


/*----------------------------------
04. WooCommerce Wrapper
----------------------------------*/

.shopex-product-actions .woocommerce{

    width:100%;

}


.shopex-product-actions .woocommerce a{

    width:100%;

}

/*====================================================
23.01-K
ADD TO CART ENGINE v2.0

Purpose :
• WooCommerce Add To Cart
• Premium Button
• Loading
• Added State
• Hover Effect

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. WooCommerce Button
----------------------------------*/

.shopex-product-actions .button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    width:100%;

    height:32px;

    min-height:32px;

    padding:0 7px;

    border:none;

    border-radius:9px;

    background:#ff9900;

    color:#ffffff;

    font-size:11px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    box-sizing:border-box;

    text-decoration:none;

    cursor:pointer;

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease,
        box-shadow .30s ease;

}

/*----------------------------------
02. Hover
----------------------------------*/

.shopex-product-actions .button:hover{

    background:#ff7800;

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(255,153,0,.28);

}


/*----------------------------------
03. Focus
----------------------------------*/

.shopex-product-actions .button:focus{

    outline:none;

}


/*----------------------------------
04. Loading
----------------------------------*/

.shopex-product-actions .loading{

    opacity:.70;

    pointer-events:none;

}


/*----------------------------------
05. Added To Cart
----------------------------------*/

.shopex-product-actions .added{

    background:#28a745;

    color:#ffffff;

}


/*----------------------------------
06. Disabled
----------------------------------*/

.shopex-product-actions .button.disabled,

.shopex-product-actions .button:disabled{

    opacity:.55;

    cursor:not-allowed;

}


/*----------------------------------
07. Icon
----------------------------------*/

.shopex-product-actions .button i{

    font-size:12px;

}


/*----------------------------------
08. Mobile
----------------------------------*/

@media (max-width:767px){

    .shopex-product-actions .button{

        height:40px;

        font-size:13px;

    }

}

/*====================================================
23.01-L
BUY NOW ENGINE v2.0

Purpose :
• Premium Buy Now Button
• Direct Checkout Ready
• Hover Animation
• Equal Height
• Mobile Ready

Location :
assets/css/product-card.css

Author :
Charka Creative Design
====================================================*/


/*----------------------------------
01. Buy Now Button
----------------------------------*/

.shopex-buy-now{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    height:44px;

    padding:0 16px;

    border-radius:12px;

    background:#111111;

    color:#ffffff;

    text-decoration:none;

    font-size:10px;

    font-weight:400;

    cursor:pointer;

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease,
        box-shadow .30s ease;

}


/*----------------------------------
02. Icon
----------------------------------*/

.shopex-buy-now i{

    font-size:12px;

}


/*----------------------------------
03. Hover
----------------------------------*/

.shopex-buy-now:hover{

    background:#ff9900;

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(255,153,0,.28);

}


/*----------------------------------
04. Active
----------------------------------*/

.shopex-buy-now:active{

    transform:scale(.98);

}


/*----------------------------------
05. Focus
----------------------------------*/

.shopex-buy-now:focus{

    outline:none;

}


/*----------------------------------
06. Disabled
----------------------------------*/

.shopex-buy-now.disabled{

    opacity:.55;

    pointer-events:none;

}


/*----------------------------------
07. Mobile
----------------------------------*/

@media (max-width:767px){

    .shopex-buy-now{

        height:40px;

        font-size:13px;

    }

}



/* ====================================================
   PRODUCT CARD COMPACT SPACING & ACTION BUTTONS
==================================================== */


/* ----------------------------------
   01. Reduce Title → Rating Gap
---------------------------------- */

.shopex-product-title {
    margin-bottom: 2px;
}


/* ----------------------------------
   02. Rating Compact
---------------------------------- */

.shopex-product-rating {
    min-height: 12px;
    gap: 5px;
}


/* ----------------------------------
   03. Smaller Rating Stars
---------------------------------- */

.shopex-product-rating .star-rating {
    font-size: 11px;
}


/* ----------------------------------
   04. Product Actions
---------------------------------- */

.shopex-product-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    white-space: nowrap;
}


/* ----------------------------------
   05. Add to Cart + Buy Now
---------------------------------- */

.shopex-product-actions a,
.shopex-product-actions button {
    font-size: 12px;
    line-height: 1.2;
    padding: 8px 10px;
    min-height: 34px;
    white-space: nowrap;
    box-sizing: border-box;
}


/* ----------------------------------
   06. WooCommerce Add to Cart
---------------------------------- */

.shopex-product-actions .add_to_cart_button {
    flex: 1 1 0;
}


/* ----------------------------------
   07. Buy Now
---------------------------------- */

.shopex-product-actions .shopex-buy-now {
    flex: 1 1 0;
}


/* ----------------------------------
   08. Prevent Text Wrapping
---------------------------------- */

.shopex-product-actions a span {
    white-space: nowrap;
}


/* ----------------------------------
   09. Mobile
---------------------------------- */

@media (max-width: 767px) {

    .shopex-product-actions {
        gap: 5px;
    }

    .shopex-product-actions a,
    .shopex-product-actions button {
        font-size: 11px;
        padding: 7px 8px;
        min-height: 32px;
    }

}