@media only screen and (max-width: 767px) {
    body.single-product .related.products {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
}




/* =========================================================
   WHEELOPEDIA
   FINAL PREMIUM PRODUCT CTA SYSTEM
   Add to Cart + Buy Now

   FINAL VERSION
   Desktop + Tablet + Mobile
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

body.single-product {

    --wpcta-dark: #2d2c2b;
    --wpcta-dark-hover: #1f1e1d;

    --wpcta-yellow: #ffc600;
    --wpcta-yellow-top: #ffdb4d;
    --wpcta-yellow-bottom: #efb900;

    --wpcta-white: #ffffff;

    --wpcta-radius: 999px;
    --wpcta-gap: 12px;
}


/* =========================================================
   02. SIMPLE PRODUCT CTA ROW
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart:not(.variations_form) {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: space-between !important;

    gap: var(--wpcta-gap) !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 18px 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* =========================================================
   03. VARIABLE PRODUCT
   Do not disturb variation selectors
   ========================================================= */

body.single-product
.summary.entry-summary
form.variations_form {

    width: 100% !important;
    max-width: 100% !important;

    margin-bottom: 18px !important;
}


body.single-product
.summary.entry-summary
form.variations_form
.woocommerce-variation-add-to-cart {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: space-between !important;

    gap: var(--wpcta-gap) !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   04. REMOVE WOOCOMMERCE / THEME CLEARFIX
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart:not(.variations_form)::before,

body.single-product
.summary.entry-summary
form.cart:not(.variations_form)::after,

body.single-product
.summary.entry-summary
.woocommerce-variation-add-to-cart::before,

body.single-product
.summary.entry-summary
.woocommerce-variation-add-to-cart::after {

    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    flex: 0 0 0 !important;
}


/* =========================================================
   05. HIDE QUANTITY
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.quantity {

    display: none !important;

    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   06. COMMON BUTTON SYSTEM
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 1 1 0 !important;

    width: auto !important;

    min-width: 0 !important;
    max-width: none !important;

    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;

    padding: 0 22px !important;

    float: none !important;
    clear: none !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    border-radius:
        var(--wpcta-radius) !important;

    font-family:
        "Futura PT",
        "Futura",
        Arial,
        sans-serif !important;

    font-size: 15.5px !important;

    font-style: normal !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    letter-spacing: .05px !important;

    text-align: center !important;

    text-decoration: none !important;
    text-transform: none !important;

    white-space: nowrap !important;

    text-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    -webkit-font-smoothing:
        antialiased !important;

    text-rendering:
        optimizeLegibility !important;

    transform:
        translate3d(0,0,0) !important;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .28s ease,
        transform .20s cubic-bezier(.22,1,.36,1)
        !important;
}


/* =========================================================
   07. ADD TO CART
   DESKTOP / TABLET SECONDARY CTA
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button:not(.gc-instant-buy-now) {

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfdfd 100%
        ) !important;

    color:
        var(--wpcta-dark) !important;

    -webkit-text-fill-color:
        var(--wpcta-dark) !important;

    border:
        1.7px solid
        var(--wpcta-dark) !important;

    box-shadow:
        0 2px 5px rgba(45,44,43,.025),
        0 5px 14px rgba(45,44,43,.045)
        !important;
}


/* =========================================================
   08. ADD TO CART HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine) {

    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button:not(.gc-instant-buy-now):hover {

        background:
            linear-gradient(
                180deg,
                #383735 0%,
                #2d2c2b 100%
            ) !important;

        color:
            #ffffff !important;

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

        border-color:
            var(--wpcta-dark) !important;

        box-shadow:
            0 10px 24px
            rgba(45,44,43,.17)
            !important;

        transform:
            translate3d(0,-2px,0) !important;
    }
}


/* =========================================================
   09. BUY NOW
   PRIMARY CTA
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.gc-instant-buy-now {

    margin: 0 !important;
    margin-top: 0 !important;

    background:
        linear-gradient(
            180deg,
            var(--wpcta-yellow-top) 0%,
            var(--wpcta-yellow) 52%,
            var(--wpcta-yellow-bottom) 100%
        ) !important;

    color:
        #24221f !important;

    -webkit-text-fill-color:
        #24221f !important;

    border:
        1.7px solid
        #dda900 !important;

    box-shadow:
        0 3px 6px
        rgba(45,44,43,.035),

        0 8px 20px
        rgba(255,198,0,.20),

        inset 0 1px 0
        rgba(255,255,255,.55)

        !important;

    font-weight:
        700 !important;
}


/* =========================================================
   10. BUY NOW SUBTLE PREMIUM SHINE
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.gc-instant-buy-now::after {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: -75% !important;

    width: 38% !important;
    height: 100% !important;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.20) 48%,
            transparent 100%
        ) !important;

    pointer-events: none !important;

    transform:
        skewX(-18deg) !important;

    transition:
        left .58s
        cubic-bezier(.22,1,.36,1)
        !important;
}


/* =========================================================
   11. BUY NOW HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine) {

    body.single-product
    .summary.entry-summary
    form.cart
    .gc-instant-buy-now:hover {

        background:
            linear-gradient(
                180deg,
                #ffe266 0%,
                #ffcc16 52%,
                #f3bb00 100%
            ) !important;

        color:
            #211f1c !important;

        -webkit-text-fill-color:
            #211f1c !important;

        border-color:
            #cea000 !important;

        box-shadow:
            0 4px 8px
            rgba(45,44,43,.04),

            0 12px 27px
            rgba(255,198,0,.27),

            inset 0 1px 0
            rgba(255,255,255,.65)

            !important;

        transform:
            translate3d(0,-2px,0) !important;
    }


    body.single-product
    .summary.entry-summary
    form.cart
    .gc-instant-buy-now:hover::after {

        left:
            135% !important;
    }
}


/* =========================================================
   12. FOCUS
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button:focus {

    outline:
        none !important;
}


body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button:focus-visible {

    outline:
        3px solid
        rgba(255,198,0,.38) !important;

    outline-offset:
        3px !important;
}


/* =========================================================
   13. PRESS / CLICK
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button:active {

    transform:
        translate3d(0,0,0)
        scale(.975) !important;

    transition-duration:
        .08s !important;
}


/* =========================================================
   14. DISABLED / LOADING
   ========================================================= */

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button:disabled,

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button.disabled {

    opacity:
        .64 !important;

    cursor:
        not-allowed !important;

    transform:
        none !important;

    box-shadow:
        none !important;
}


/* Add to Cart disabled text */

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button:not(.gc-instant-buy-now):disabled,

body.single-product
.summary.entry-summary
form.cart
.single_add_to_cart_button:not(.gc-instant-buy-now).disabled {

    color:
        var(--wpcta-dark) !important;

    -webkit-text-fill-color:
        var(--wpcta-dark) !important;
}


/* Buy Now loading text */

body.single-product
.summary.entry-summary
form.cart
.gc-instant-buy-now:disabled,

body.single-product
.summary.entry-summary
form.cart
.gc-instant-buy-now.disabled {

    color:
        var(--wpcta-dark) !important;

    -webkit-text-fill-color:
        var(--wpcta-dark) !important;
}


body.single-product
.summary.entry-summary
form.cart
.gc-instant-buy-now:disabled::after,

body.single-product
.summary.entry-summary
form.cart
.gc-instant-buy-now.disabled::after {

    display:
        none !important;
}


/* =========================================================
   15. PRICE CARD -> CTA GAP
   ========================================================= */

body.single-product
.summary.entry-summary
.wa4-price-card {

    margin-bottom:
        15px !important;
}


body.single-product
.summary.entry-summary
form.cart,

body.single-product
.summary.entry-summary
.woocommerce-variation-add-to-cart {

    margin-top:
        0 !important;
}


/* =========================================================
   16. TABLET
   ========================================================= */

@media only screen
and (min-width:768px)
and (max-width:1024px) {

    body.single-product {

        --wpcta-gap:
            10px;
    }


    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button {

        height:
            53px !important;

        min-height:
            53px !important;

        padding:
            0 15px !important;

        font-size:
            14.5px !important;
    }
}


/* =========================================================
   17. MOBILE
   STRONG / PROMINENT CTA DESIGN
   ========================================================= */

@media only screen
and (max-width:767px) {

    body.single-product {

        --wpcta-gap:
            9px;
    }


    body.single-product
    .summary.entry-summary
    form.cart:not(.variations_form),

    body.single-product
    .summary.entry-summary
    form.variations_form
    .woocommerce-variation-add-to-cart {

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            stretch !important;

        justify-content:
            space-between !important;

        gap:
            9px !important;

        width:
            100% !important;
    }


    /* =====================================================
       MOBILE COMMON BUTTON
       ===================================================== */

    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button {

        flex:
            1 1 0 !important;

        width:
            auto !important;

        min-width:
            0 !important;

        height:
            52px !important;

        min-height:
            52px !important;

        padding:
            0 10px !important;

        border-radius:
            16px !important;

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        letter-spacing:
            0 !important;

        white-space:
            nowrap !important;

        text-align:
            center !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }


    /* =====================================================
       MOBILE ADD TO CART
       Solid Dark
       ===================================================== */

    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button:not(.gc-instant-buy-now) {

        background:
            linear-gradient(
                180deg,
                #393836 0%,
                #2d2c2b 100%
            ) !important;

        color:
            #ffffff !important;

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

        border:
            1.5px solid
            #2d2c2b !important;

        box-shadow:
            0 5px 13px
            rgba(45,44,43,.17),

            inset 0 1px 0
            rgba(255,255,255,.08)

            !important;
    }


    /* =====================================================
       MOBILE BUY NOW
       Strong Wheelopedia Yellow
       ===================================================== */

    body.single-product
    .summary.entry-summary
    form.cart
    .gc-instant-buy-now {

        margin:
            0 !important;

        margin-top:
            0 !important;

        background:
            linear-gradient(
                180deg,
                #ffdb45 0%,
                #ffc600 55%,
                #efb800 100%
            ) !important;

        color:
            #211f1c !important;

        -webkit-text-fill-color:
            #211f1c !important;

        border:
            1.5px solid
            #dda900 !important;

        box-shadow:
            0 6px 15px
            rgba(255,198,0,.30),

            inset 0 1px 0
            rgba(255,255,255,.58)

            !important;

        font-weight:
            700 !important;
    }


    body.single-product
    .summary.entry-summary
    form.cart
    .gc-instant-buy-now::after {

        opacity:
            .55 !important;
    }
}


/* =========================================================
   18. SMALL MOBILE
   ========================================================= */

@media only screen
and (max-width:420px) {

    body.single-product {

        --wpcta-gap:
            8px;
    }


    body.single-product
    .summary.entry-summary
    form.cart:not(.variations_form),

    body.single-product
    .summary.entry-summary
    form.variations_form
    .woocommerce-variation-add-to-cart {

        gap:
            8px !important;
    }


    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button {

        height:
            51px !important;

        min-height:
            51px !important;

        padding:
            0 8px !important;

        border-radius:
            15px !important;

        font-size:
            13.5px !important;
    }
}


/* =========================================================
   19. EXTRA SMALL MOBILE
   ========================================================= */

@media only screen
and (max-width:360px) {

    body.single-product {

        --wpcta-gap:
            7px;
    }


    body.single-product
    .summary.entry-summary
    form.cart:not(.variations_form),

    body.single-product
    .summary.entry-summary
    form.variations_form
    .woocommerce-variation-add-to-cart {

        gap:
            7px !important;
    }


    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button {

        height:
            50px !important;

        min-height:
            50px !important;

        padding:
            0 5px !important;

        font-size:
            13px !important;

        letter-spacing:
            -.05px !important;
    }
}


/* =========================================================
   20. VERY NARROW MOBILE
   ========================================================= */

@media only screen
and (max-width:320px) {

    body.single-product {

        --wpcta-gap:
            6px;
    }


    body.single-product
    .summary.entry-summary
    form.cart:not(.variations_form),

    body.single-product
    .summary.entry-summary
    form.variations_form
    .woocommerce-variation-add-to-cart {

        gap:
            6px !important;
    }


    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button {

        height:
            48px !important;

        min-height:
            48px !important;

        padding:
            0 4px !important;

        font-size:
            12.5px !important;

        border-radius:
            14px !important;
    }
}


/* =========================================================
   21. REDUCED MOTION
   ========================================================= */

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

    body.single-product
    .summary.entry-summary
    form.cart
    .single_add_to_cart_button,

    body.single-product
    .summary.entry-summary
    form.cart
    .gc-instant-buy-now::after {

        animation:
            none !important;

        transition:
            none !important;
    }
}



/* =========================================
   PREMIUM PRODUCT PRICE CARD
   ========================================= */

.wa-dynamic-price-box {
    position: relative;
    overflow: hidden;

    width: 100%;
    margin: 0 0 20px;
    padding: 20px 22px 17px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafafa 100%
        );

    border: 1px solid #ebebeb;
    border-radius: 16px;

    box-shadow:
        0 8px 28px rgba(0,0,0,0.055);

    box-sizing: border-box;
}


/* Premium small accent */

.wa-dynamic-price-box::before {
    content: "";
    position: absolute;

    top: 0;
    left: 22px;

    width: 46px;
    height: 3px;

    background: #2d2c2b;

    border-radius: 0 0 4px 4px;
}


/* =========================
   PRICE LINE
   ========================= */

.wa-price-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    column-gap: 12px;
    row-gap: 7px;
}


/* =========================
   SALE PRICE
   ========================= */

.wa-sale-price {
    order: 1;

    color: #111111;

    font-size: 32px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.7px;

    white-space: nowrap;
}


.wa-sale-price .woocommerce-Price-amount,
.wa-sale-price .woocommerce-Price-currencySymbol {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}


/* =========================
   DISCOUNT
   ========================= */

.wa-discount {
    order: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 9px;

    background: #1d1d1d;

    color: #ffffff;

    border-radius: 7px;

    font-size: 13px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.1px;

    white-space: nowrap;
}


/* =========================
   MRP - NEW LINE
   ========================= */

.wa-mrp {
    order: 3;

    flex-basis: 100%;

    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 2px;

    color: #777777;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 400;
}


.wa-mrp del {
    color: #8a8a8a;

    opacity: 1;

    text-decoration-thickness: 1px;
    text-decoration-color: #999999;
}


.wa-mrp del .woocommerce-Price-amount {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}


/* =========================
   TAX TEXT
   ========================= */

.wa-tax-text {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 8px;

    color: #6e6e6e;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 400;
}


/* Small premium tick */

.wa-tax-text::before {
    content: "✓";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    background: #eaf7f5;
    color: #008c82;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 700;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    .wa-dynamic-price-box {
        padding: 18px 17px 15px;

        border-radius: 14px;

        box-shadow:
            0 6px 20px rgba(0,0,0,0.05);
    }


    .wa-dynamic-price-box::before {
        left: 17px;
        width: 38px;
    }


    .wa-sale-price {
        font-size: 27px;
    }


    .wa-discount {
        padding: 5px 8px;
        font-size: 11px;
    }


    .wa-mrp {
        font-size: 13px;
    }


    .wa-tax-text {
        margin-top: 7px;
        font-size: 12px;
    }

}


/* Hide Wishlist button on single product pages */
body.single-product
.wishsuite-btn.wishsuite-product-after_cart_btn {
    display: none !important;
}









/* =========================================================
   WHEELOPEDIA - LUXURY PRODUCT IMAGE TRANSITION
   Soft reveal + micro zoom + subtle depth
   All screen sizes
   ========================================================= */

body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
> .cg-psp-gallery {
    position: relative !important;
    overflow: hidden !important;
}


/* Every slide occupies exactly the same stage */
body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
> .cg-psp-gallery
> li {

    position: absolute !important;

    inset: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    z-index: 1 !important;

    transform:
        scale(1.012)
        translateY(3px) !important;

    filter:
        blur(1.2px) !important;

    transition:
        opacity .46s
            cubic-bezier(.22, 1, .36, 1),
        transform .58s
            cubic-bezier(.22, 1, .36, 1),
        filter .48s
            cubic-bezier(.22, 1, .36, 1),
        visibility .46s ease !important;
}


/* Active image */
body.single-product
#commercegurus-pdp-gallery.wp-gallery-ready
.cg-main-swiper
> .cg-psp-gallery
> li.wp-gallery-active {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 3 !important;

    transform:
        scale(1)
        translateY(0) !important;

    filter:
        blur(0) !important;
}


/* Initial first image */
body.single-product
#commercegurus-pdp-gallery:not(.wp-gallery-ready)
.cg-main-swiper
> .cg-psp-gallery
> li:first-child {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 3 !important;

    transform:
        scale(1)
        translateY(0) !important;

    filter:
        blur(0) !important;
}


/* Premium reveal triggered by JS */
body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
> .cg-psp-gallery
> li.wp-premium-reveal {

    animation:
        wpLuxuryImageReveal
        .56s
        cubic-bezier(.22, 1, .36, 1)
        both !important;
}


@keyframes wpLuxuryImageReveal {

    0% {

        opacity: 0;

        transform:
            scale(1.025)
            translateY(5px);

        filter:
            blur(2px)
            brightness(.985);
    }

    45% {

        opacity: .92;
    }

    100% {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0)
            brightness(1);
    }
}


/* Image itself settles gently */
body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
.swiper-slide-imglink img {

    transition:
        transform .6s
            cubic-bezier(.22, 1, .36, 1),
        filter .5s
            cubic-bezier(.22, 1, .36, 1) !important;
}


/* No global image zoom when mouse enters frame */
body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper:hover
.swiper-slide-imglink img {

    transform:
        none !important;
}


/* Counter subtly reacts when image changes */
body.single-product
.wp-gallery-counter {

    transition:
        opacity .25s ease,
        transform .25s ease,
        background-color .25s ease !important;
}


/* Respect accessibility setting */
@media
(prefers-reduced-motion: reduce) {

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    > .cg-psp-gallery
    > li,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    > .cg-psp-gallery
    > li.wp-premium-reveal {

        animation: none !important;

        transition:
            opacity .15s ease !important;

        transform:
            none !important;

        filter:
            none !important;
    }
}


/* =========================================================
   WHEELOPEDIA - THUMBNAIL SCROLL FINAL POLISH
   Desktop / Laptop only
   ========================================================= */

@media only screen and (min-width: 1025px) {

    /* -----------------------------------------
       THUMBNAIL SCROLL AREA
       Extra breathing room top/bottom
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper {

        padding:
            6px 7px
            6px 3px !important;

        scroll-padding-top: 6px !important;
        scroll-padding-bottom: 6px !important;

        /*
         * Firefox:
         * light grey scrollbar with approx 50% feel
         */
        scrollbar-width: thin !important;
        scrollbar-color:
            rgba(180, 180, 180, 0.50)
            transparent !important;
    }


    /* Give first/last thumbnail room */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    > .swiper-wrapper {

        padding:
            2px 0
            4px 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       THUMBNAIL DEFAULT
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide {

        position: relative !important;

        transform: none !important;

        box-shadow:
            0 2px 7px
            rgba(45, 44, 43, 0.05) !important;

        transition:
            border-color .20s ease,
            box-shadow .20s ease,
            opacity .20s ease !important;
    }


    /* -----------------------------------------
       HOVER
       No movement = no clipping
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide:hover {

        transform: none !important;

        border-color:
            rgba(45, 44, 43, 0.55) !important;

        box-shadow:
            0 3px 9px
            rgba(45, 44, 43, 0.09) !important;

        z-index: 3 !important;
    }


    /* -----------------------------------------
       SELECTED IMAGE
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.active,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.swiper-slide-thumb-active {

        border:
            2px solid #2d2c2b !important;

        box-shadow:
            0 3px 10px
            rgba(45, 44, 43, 0.10) !important;

        transform: none !important;
    }


    /* CommerceKit's old inner active border */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    ul.swiper-wrapper
    li.active::before,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    ul.swiper-wrapper
    li.swiper-slide-thumb-active::before {

        display: none !important;
        content: none !important;
        border: none !important;
    }


    /* =====================================================
       CHROME / EDGE / SAFARI SCROLLBAR
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar {

        width: 6px !important;
    }


    /* Transparent track */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-track {

        background:
            rgba(235, 235, 235, 0.35) !important;

        border-radius: 20px !important;
    }


    /*
     * Scroll thumb:
     * light grey + 50% transparency
     */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-thumb {

        background:
            rgba(170, 170, 170, 0.50) !important;

        border-radius: 20px !important;

        border: none !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-thumb:hover {

        background:
            rgba(45, 44, 43, 0.50) !important;
    }


    /* -----------------------------------------
       SCROLL UP ARROW
       #2d2c2b
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    ::-webkit-scrollbar-button:single-button:vertical:decrement {

        height: 13px !important;

        background-color:
            transparent !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center !important;

        background-size:
            8px 5px !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%232d2c2b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }


    /* -----------------------------------------
       SCROLL DOWN ARROW
       #2d2c2b
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    ::-webkit-scrollbar-button:single-button:vertical:increment {

        height: 13px !important;

        background-color:
            transparent !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center !important;

        background-size:
            8px 5px !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%232d2c2b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

}

/* =========================================================
   WHEELOPEDIA - PREMIUM PRODUCT GALLERY (REFINED)
   Desktop/Laptop custom UI
   Tablet + Mobile retain native CommerceKit behaviour
   Brand colors: #ffc600 + #2d2c2b
   ========================================================= */


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media only screen and (min-width: 1200px) {

    /* -----------------------------------------
       GALLERY WRAPPER
       ----------------------------------------- */

    body.single-product #commercegurus-pdp-gallery-wrapper {
        width: 650px !important;
        max-width: 650px !important;
        flex: 0 1 650px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.single-product
    #commercegurus-pdp-gallery.cg-layout-vertical-scroll {
        display: flex !important;
        align-items: flex-start !important;
        gap: 18px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* -----------------------------------------
       MAIN IMAGE FRAME
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper {
        order: 2 !important;
        flex: 0 1 560px !important;
        width: 560px !important;
        max-width: 560px !important;
        height: 560px !important;
        margin: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        background: #f8f8f6 !important;
        border: 1px solid rgba(45, 44, 43, 0.08) !important;
        border-radius: 20px !important;
        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.06),
            0 2px 8px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    > .cg-psp-gallery {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        gap: 0 !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    > .cg-psp-gallery
    > li {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: auto !important;
    }

    body.single-product
    #commercegurus-pdp-gallery:not(.wp-gallery-ready)
    .cg-main-swiper
    > .cg-psp-gallery
    > li {
        display: none !important;
    }

    body.single-product
    #commercegurus-pdp-gallery:not(.wp-gallery-ready)
    .cg-main-swiper
    > .cg-psp-gallery
    > li:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.single-product
    #commercegurus-pdp-gallery.wp-gallery-ready
    .cg-main-swiper
    > .cg-psp-gallery
    > li {
        display: none !important;
    }

    body.single-product
    #commercegurus-pdp-gallery.wp-gallery-ready
    .cg-main-swiper
    > .cg-psp-gallery
    > li.wp-gallery-active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* -----------------------------------------
       IMAGE HOLDER
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-slide-imglink {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    /* MAIN IMAGE WILL COVER FRAME */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-slide-imglink img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        border-radius: 20px !important;
        transition: transform 0.25s ease !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper:hover
    .swiper-slide-imglink img {
        transform: scale(1.01);
    }

    /* -----------------------------------------
       THUMBNAIL COLUMN
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper {
        display: block !important;
        order: 1 !important;
        flex: 0 0 72px !important;
        width: 72px !important;
        height: 560px !important;
        max-height: 560px !important;
        margin: 0 !important;
        padding: 0 6px 0 0 !important;
        position: relative !important;
        top: auto !important;
        align-self: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        scrollbar-width: thin;
        scrollbar-color: #ffc600 transparent;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    > .swiper-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide {
        flex: 0 0 62px !important;
        width: 62px !important;
        height: 62px !important;
        padding: 3px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(45, 44, 43, 0.12) !important;
        border-radius: 12px !important;
        opacity: 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease,
            background-color 0.2s ease !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide:hover {
        border-color: rgba(45, 44, 43, 0.28) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.active,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.swiper-slide-thumb-active {
        border: 2px solid #ffc600 !important;
        background: #fffdf4 !important;
        box-shadow:
            0 0 0 2px rgba(255, 198, 0, 0.15),
            0 6px 14px rgba(0,0,0,0.06) !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar {
        width: 4px;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-track {
        background: transparent;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-thumb {
        background: #ffc600;
        border-radius: 20px;
    }

    /* -----------------------------------------
       ARROWS
       ----------------------------------------- */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next {
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(45, 44, 43, 0.10) !important;
        border-radius: 50% !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important;
        color: #2d2c2b !important;
        cursor: pointer !important;
        z-index: 20 !important;
        opacity: 1 !important;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev {
        left: 16px !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next {
        right: 16px !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev::after,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next::after {
        font-family: Arial, sans-serif !important;
        font-size: 30px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        color: #2d2c2b !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev::after {
        content: "‹" !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next::after {
        content: "›" !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev:hover,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next:hover {
        background: #ffc600 !important;
        border-color: #ffc600 !important;
        box-shadow: 0 10px 22px rgba(255,198,0,0.22) !important;
    }

    /* -----------------------------------------
       IMAGE COUNTER
       ----------------------------------------- */

    body.single-product .wp-gallery-counter {
        position: absolute !important;
        right: 16px !important;
        bottom: 16px !important;
        z-index: 20 !important;
        padding: 8px 12px !important;
        background: rgba(45, 44, 43, 0.88) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: 0.3px !important;
        pointer-events: none !important;
        box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important;
    }

}



/* =========================================================
   LAPTOP
   1025px - 1199px
   ========================================================= */

@media only screen and (min-width: 1025px) and (max-width: 1199px) {

    body.single-product #commercegurus-pdp-gallery-wrapper {
        width: 548px !important;
        max-width: 548px !important;
        flex: 0 1 548px !important;
        box-sizing: border-box !important;
    }

    body.single-product
    #commercegurus-pdp-gallery.cg-layout-vertical-scroll {
        display: flex !important;
        align-items: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper {
        order: 2 !important;
        flex: 0 1 480px !important;
        width: 480px !important;
        max-width: 480px !important;
        height: 480px !important;
        position: relative !important;
        overflow: hidden !important;
        margin: 0 !important;
        background: #f8f8f6 !important;
        border: 1px solid rgba(45, 44, 43, 0.08) !important;
        border-radius: 18px !important;
        box-shadow:
            0 10px 24px rgba(0,0,0,0.05),
            0 2px 6px rgba(0,0,0,0.04) !important;
        box-sizing: border-box !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    > .cg-psp-gallery {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        gap: 0 !important;
    }

    body.single-product
    #commercegurus-pdp-gallery.wp-gallery-ready
    .cg-main-swiper
    > .cg-psp-gallery
    > li {
        display: none !important;
    }

    body.single-product
    #commercegurus-pdp-gallery.wp-gallery-ready
    .cg-main-swiper
    > .cg-psp-gallery
    > li.wp-gallery-active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.single-product
    #commercegurus-pdp-gallery:not(.wp-gallery-ready)
    .cg-main-swiper
    > .cg-psp-gallery
    > li {
        display: none !important;
    }

    body.single-product
    #commercegurus-pdp-gallery:not(.wp-gallery-ready)
    .cg-main-swiper
    > .cg-psp-gallery
    > li:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-slide-imglink {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-slide-imglink img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 18px !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper {
        display: block !important;
        order: 1 !important;
        flex: 0 0 58px !important;
        width: 58px !important;
        height: 480px !important;
        max-height: 480px !important;
        margin: 0 !important;
        padding-right: 4px !important;
        position: relative !important;
        top: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        scrollbar-width: thin;
        scrollbar-color: #ffc600 transparent;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    > .swiper-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide {
        flex: 0 0 54px !important;
        width: 54px !important;
        height: 54px !important;
        padding: 3px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(45, 44, 43, 0.12) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 7px !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.active,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.swiper-slide-thumb-active {
        border: 2px solid #ffc600 !important;
        background: #fffdf4 !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next {
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        background: rgba(255,255,255,.94) !important;
        border: 1px solid rgba(45,44,43,0.10) !important;
        border-radius: 50% !important;
        z-index: 20 !important;
        cursor: pointer !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev {
        left: 12px !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next {
        right: 12px !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev::after,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next::after {
        font-family: Arial, sans-serif !important;
        font-size: 27px !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        color: #2d2c2b !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev::after {
        content: "‹" !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next::after {
        content: "›" !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev:hover,
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next:hover {
        background: #ffc600 !important;
        border-color: #ffc600 !important;
    }

    body.single-product .wp-gallery-counter {
        position: absolute !important;
        right: 13px !important;
        bottom: 12px !important;
        z-index: 20 !important;
        padding: 6px 10px !important;
        background: rgba(45,44,43,.88) !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }

}



/* =========================================================
   TABLET + MOBILE SAFETY
   Native CommerceKit gallery untouched
   ========================================================= */

@media only screen and (max-width: 1024px) {

    body.single-product
    #commercegurus-pdp-gallery-wrapper {
        max-width: 100% !important;
    }

    body.single-product
    #commercegurus-pdp-gallery
    img {
        max-width: 100% !important;
        height: auto !important;
    }

}

/* =========================================================
   WHEELOPEDIA PDP GALLERY - FINAL FINE TUNE
   Desktop / Laptop only
   ========================================================= */

@media only screen and (min-width: 1025px) {

    /* =====================================================
       1. GALLERY + CONTENT GAP FIX
       ===================================================== */

    body.single-product .product-details-wrapper {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: calc(100% - 48px) !important;
        max-width: 1320px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        gap: 38px !important;

        box-sizing: border-box !important;
    }


    /* Right content should use remaining space */
    body.single-product
    #page div.product
    .summary.entry-summary {

        flex: 1 1 0 !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        /*
         * Shoptimizer makes summary sticky by default.
         * We want gallery sticky instead.
         */
        position: relative !important;
        top: auto !important;

        align-self: flex-start !important;
    }


    /* =====================================================
       2. STICKY PRODUCT IMAGE SECTION
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery-wrapper {

        position: sticky !important;

        top: 90px !important;

        align-self: flex-start !important;

        z-index: 10 !important;
    }


    /* =====================================================
       3. REMOVE COMMERCEKIT INNER BLACK ACTIVE BORDER
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    ul.swiper-wrapper
    li.active::before,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    ul.swiper-wrapper
    li.swiper-slide-thumb-active::before {

        display: none !important;

        content: none !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    /* Remove browser focus outline inside thumb */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide img {

        outline: none !important;
    }


    /* =====================================================
       4. SELECTED THUMBNAIL
       #2d2c2b
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.active,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide.swiper-slide-thumb-active {

        border: 2px solid #2d2c2b !important;

        background: #ffffff !important;

        box-shadow:
            0 4px 12px rgba(45, 44, 43, 0.10) !important;
    }


    /* =====================================================
       5. THUMBNAILS - FIT 8 CLEANLY
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    > .swiper-wrapper {

        gap: 8px !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide {

        width: 58px !important;
        height: 58px !important;

        flex: 0 0 58px !important;

        border-radius: 11px !important;

        padding: 3px !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide img {

        border-radius: 7px !important;
    }


    /* =====================================================
       6. LIGHT GREY THUMBNAIL SCROLLBAR
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper {

        scrollbar-width: thin;

        scrollbar-color:
            #d5d5d5
            #f3f3f3;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar {

        width: 7px !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-track {

        background: #f2f2f2 !important;

        border-radius: 20px !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-thumb {

        background: #d2d2d2 !important;

        border-radius: 20px !important;

        border: 1px solid #f2f2f2 !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-thumb:hover {

        background: #bdbdbd !important;
    }


    /* Scroll UP arrow */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-button:single-button:vertical:decrement {

        display: block !important;

        height: 12px !important;

        background-color: transparent !important;

        background-repeat: no-repeat !important;

        background-position: center !important;

        background-size: 8px 5px !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%232d2c2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }


    /* Scroll DOWN arrow */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper::-webkit-scrollbar-button:single-button:vertical:increment {

        display: block !important;

        height: 12px !important;

        background-color: transparent !important;

        background-repeat: no-repeat !important;

        background-position: center !important;

        background-size: 8px 5px !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%232d2c2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }


    /* =====================================================
       7. MAIN IMAGE
       Keep frame completely filled
       No image zoom on whole gallery hover
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-slide-imglink img {

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        object-position: center center !important;

        transform: none !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper:hover
    .swiper-slide-imglink img {

        transform: none !important;
    }


    /* =====================================================
       8. MAIN LEFT / RIGHT ARROWS
       GLASS EFFECT
       Same normal tone
       Hover = only slight zoom
       ===================================================== */

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next {

        background:
            rgba(255, 255, 255, 0.62) !important;

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

        color: #2d2c2b !important;

        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter:
            blur(12px) saturate(140%) !important;

        box-shadow:
            0 6px 18px rgba(45, 44, 43, 0.10) !important;

        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            background-color 0.18s ease !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev::after,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next::after {

        color: #2d2c2b !important;
    }


    /* IMPORTANT:
       no yellow background on hover */
    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev:hover,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next:hover {

        background:
            rgba(255, 255, 255, 0.76) !important;

        border-color:
            rgba(255, 255, 255, 0.90) !important;

        box-shadow:
            0 9px 22px rgba(45, 44, 43, 0.14) !important;

        transform:
            translateY(-50%)
            scale(1.07) !important;
    }


    /* =====================================================
       9. IMAGE COUNT - GLASS EFFECT
       ===================================================== */

    body.single-product
    .wp-gallery-counter {

        right: 16px !important;
        bottom: 16px !important;

        padding: 8px 12px !important;

        background:
            rgba(45, 44, 43, 0.48) !important;

        color: #ffffff !important;

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

        border-radius: 999px !important;

        backdrop-filter:
            blur(12px) saturate(140%) !important;

        -webkit-backdrop-filter:
            blur(12px) saturate(140%) !important;

        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.10) !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        letter-spacing: 0.3px !important;
    }

}



/* =========================================================
   LAPTOP FINE TUNE
   1025px - 1199px
   ========================================================= */

@media only screen
and (min-width: 1025px)
and (max-width: 1199px) {

    body.single-product
    .product-details-wrapper {

        width: calc(100% - 32px) !important;

        max-width: 1120px !important;

        gap: 26px !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    > .swiper-wrapper {

        gap: 7px !important;
    }


    body.single-product
    #commercegurus-pdp-gallery
    .cg-thumb-swiper
    .swiper-slide {

        width: 50px !important;
        height: 50px !important;

        flex-basis: 50px !important;
    }


    body.single-product
    #commercegurus-pdp-gallery-wrapper {

        top: 80px !important;
    }

}



/* =========================================================
   TABLET / MOBILE
   Do not apply desktop sticky/gap system
   ========================================================= */

@media only screen and (max-width: 1024px) {

    body.single-product
    #commercegurus-pdp-gallery-wrapper {

        position: relative !important;

        top: auto !important;
    }


    body.single-product
    #page div.product
    .summary.entry-summary {

        width: 100%;

        max-width: 100%;
    }

}

/* =========================================================
   WHEELOPEDIA - FINAL RESPONSIVE GALLERY OVERRIDE
   FUNCTION-SAFE VERSION
   Desktop / Tablet / Mobile
   Brand: #ffc600 + #2d2c2b

   IMPORTANT:
   - Keeps the existing wp-gallery-active system used by the gallery JS.
   - Does NOT remove the active/non-active slide logic on mobile/tablet.
   - Arrow buttons stay clickable and advance the active image correctly.
   - Mobile/tablet visual design remains the same.
   ========================================================= */

/* DESKTOP / LAPTOP: SAFE STICKY OFFSET + LAYERING */
@media only screen and (min-width: 1025px) {
    body.single-product #commercegurus-pdp-gallery-wrapper {
        position: sticky !important;
        top: 78px !important;
        align-self: flex-start !important;
        z-index: 2 !important;
    }

    body.admin-bar.single-product #commercegurus-pdp-gallery-wrapper {
        top: 110px !important;
    }

    body.single-product .product-details-wrapper {
        justify-content: flex-start !important;
        gap: 38px !important;
    }
}

/* =========================================================
   TABLET + MOBILE
   Preserve current design + preserve custom gallery JS logic
   ========================================================= */
@media only screen and (max-width: 1024px) {

    body.single-product .product-details-wrapper {
        display: block !important;
        width: calc(100% - 32px) !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.single-product #commercegurus-pdp-gallery-wrapper {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 22px 0 !important;
        box-sizing: border-box !important;
    }

    body.single-product #commercegurus-pdp-gallery.cg-layout-vertical-scroll {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Main image stage */
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper {
        order: 1 !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #f8f8f6 !important;
        border: 1px solid rgba(45,44,43,.08) !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04) !important;
        box-sizing: border-box !important;
        isolation: isolate !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /*
     * CRITICAL FUNCTION FIX:
     * The site's gallery script changes .wp-gallery-active when arrows/thumbs
     * are used. Keep that mechanism on tablet/mobile instead of relying on a
     * separate Swiper translate state.
     */
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery > li {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready)
    .cg-main-swiper > .cg-psp-gallery > li:first-child,

    body.single-product #commercegurus-pdp-gallery.wp-gallery-ready
    .cg-main-swiper > .cg-psp-gallery > li.wp-gallery-active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 3 !important;
        transform: scale(1) translateY(0) !important;
        filter: none !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        border-radius: 18px !important;
        transform: none !important;
        filter: none !important;
    }

    /* Thumbnail row - keep existing mobile/tablet appearance */
    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper {
        display: block !important;
        order: 2 !important;
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 3px 2px 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(170,170,170,.50) transparent !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper > .swiper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: max-content !important;
        min-width: 100% !important;
        height: auto !important;
        padding: 2px 0 3px !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide {
        position: relative !important;
        flex: 0 0 68px !important;
        width: 68px !important;
        height: 68px !important;
        padding: 3px !important;
        margin: 0 !important;
        background: #fff !important;
        border: 1px solid rgba(45,44,43,.12) !important;
        border-radius: 11px !important;
        opacity: 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transform: none !important;
        box-shadow: 0 2px 7px rgba(45,44,43,.05) !important;
        touch-action: manipulation !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 7px !important;
        outline: none !important;
        pointer-events: none !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.active,
    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active {
        border: 2px solid #2d2c2b !important;
        background: #fff !important;
        box-shadow: 0 3px 10px rgba(45,44,43,.10) !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.active::before,
    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.swiper-slide-thumb-active::before {
        display: none !important;
        content: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar {
        height: 5px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-track {
        background: rgba(235,235,235,.35) !important;
        border-radius: 20px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-thumb {
        background: rgba(170,170,170,.50) !important;
        border-radius: 20px !important;
        border: 0 !important;
    }

    /* Arrow buttons - keep them above the full image link and fully tappable */
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev,
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next {
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        background: rgba(255,255,255,.62) !important;
        border: 1px solid rgba(255,255,255,.80) !important;
        border-radius: 50% !important;
        color: #2d2c2b !important;
        box-shadow: 0 6px 18px rgba(45,44,43,.10) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        cursor: pointer !important;
        z-index: 50 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev {
        left: 12px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next {
        right: 12px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after,
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after {
        font-family: Arial,sans-serif !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        color: #2d2c2b !important;
        pointer-events: none !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after {
        content: "‹" !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after {
        content: "›" !important;
    }

    body.single-product .wp-gallery-counter {
        position: absolute !important;
        right: 13px !important;
        bottom: 13px !important;
        z-index: 20 !important;
        padding: 7px 11px !important;
        background: rgba(45,44,43,.48) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.24) !important;
        border-radius: 999px !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: .3px !important;
        pointer-events: none !important;
    }

    body.single-product #page div.product .summary.entry-summary {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

/* MOBILE */
@media only screen and (max-width: 767px) {
    body.single-product .product-details-wrapper {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper,
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink,
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img {
        border-radius: 15px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide {
        flex-basis: 60px !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 10px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev,
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next {
        width: 38px !important;
        height: 38px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev {
        left: 10px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next {
        right: 10px !important;
    }

    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after,
    body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after {
        font-size: 24px !important;
    }
}

@media only screen and (max-width: 480px) {
    body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide {
        flex-basis: 56px !important;
        width: 56px !important;
        height: 56px !important;
    }

    body.single-product .wp-gallery-counter {
        right: 10px !important;
        bottom: 10px !important;
        padding: 6px 9px !important;
        font-size: 10px !important;
    }
}


.single-product .site-content .col-full {
    background-color: #fff !important;
}



/* =========================================================
   WHEELOPEDIA - FINAL ADDITIONAL CSS
   Archive Full Width + Safe Single Product Desktop Container + Scoped Utilities
   ========================================================= */


/* =========================================================
   1. HIDE VIEW ALL PRODUCTS BUTTON - WOOLENTOR
   ========================================================= */

.elementor-element-f5e39c2 .wl-ps-foot-row {
    display: none !important;
}

.wl-ps-modern-v1 .wl-ps-viewall:hover {
    border-color: #2d2c2b !important;
    background: #2d2c2b !important;
    color: #ffffff !important;
}


/* =========================================================
   2. PRODUCT CATEGORY ARCHIVE
   ========================================================= */

/* Prevent horizontal overflow only on product category pages */
body.tax-product_cat {
    overflow-x: clip !important;
}


/* Remove Shoptimizer archive width restriction */
body.tax-product_cat .shoptimizer-archive > .col-full {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* Keep archive entry content normal */
body.tax-product_cat .entry-content {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* WooCommerce products header */
body.tax-product_cat .woocommerce-products-header {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Hide native Shoptimizer archive header */
body.tax-product_cat
.shoptimizer-archive > .archive-header {
    display: none !important;
}


/* =========================================================
   3. FULL WIDTH CATEGORY BANNER
   Background full width
   Inner content centered
   ========================================================= */

body.tax-product_cat .elementor-element-c8fdda9 {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* Keep heading + sort dropdown inside centered container */
body.tax-product_cat
.elementor-element-c8fdda9 > .e-con-inner {

    width: calc(100% - 60px) !important;
    max-width: 1750px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   4. PRODUCT AREA
   ========================================================= */

body.tax-product_cat .archive-products-inner {

    width: calc(100% - 60px) !important;
    max-width: 1750px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


/* =========================================================
   5. CATEGORY SORT DROPDOWN
   ========================================================= */

body.tax-product_cat
.woolentor_archive_catalog_ordering
.woocommerce-ordering {
    margin: 0 !important;
}


/* Sort dropdown */
body.tax-product_cat
.woolentor_archive_catalog_ordering
.woocommerce-ordering select {

    width: auto !important;
    min-width: 225px !important;
    height: 48px !important;

    padding: 0 44px 0 16px !important;

    font-family: "Futura PT", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 48px !important;

    color: #ffffff !important;

    background-color: #2d2c2b !important;

    border: 0 !important;
    border-radius: 5px !important;

    outline: none !important;

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 11px auto !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Hover */
body.tax-product_cat
.woolentor_archive_catalog_ordering
.woocommerce-ordering select:hover {

    background-color: #171717 !important;
}


/* Focus */
body.tax-product_cat
.woolentor_archive_catalog_ordering
.woocommerce-ordering select:focus {

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(255, 197, 1, 0.28) !important;
}


/* =========================================================
   6. CUSTOM SECTIONS
   ========================================================= */

.wc-premium-categories,
.wp-wheelopedia-cta,
.wp-trust-premium {

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
}


/* Slider viewport */
.wc-category-viewport,
.wp-trust-viewport {

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;

    box-sizing: border-box !important;
}


/* Slider tracks */
.wc-category-grid,
.wp-trust-track {

    box-sizing: border-box !important;
}


/* Images inside only custom sections */
.wc-premium-categories img,
.wp-wheelopedia-cta img,
.wp-trust-premium img {

    max-width: 100%;
    height: auto;
}


/* Elementor HTML widgets */
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {

    max-width: 100%;
}


/* =========================================================
   7. SINGLE PRODUCT BUTTONS
   ========================================================= */

body.single-product .single_add_to_cart_button {

    margin-left: 0 !important;

    display: block;

    margin-bottom: 12px;
}


/* Get A Quote button */
body.single-product .wpb-get-a-quote-button-form-fire.wpb-get-a-quote-button-btn-large.wpb-get-a-quote-button-btn.wpb-get-a-quote-button-btn-default {

    padding: 16px 18px;

    position: relative !important;

    width: calc(100% - 90px);

    text-align: center !important;

    display: inline-block;
}


/* Book button */
body.single-product .book-btn {

    background-color: #FFCC02;

    padding: 12px;

    position: relative !important;

    width: calc(100% - 90px);

    text-align: center !important;

    display: inline-block;

    color: #303B89;

    border-radius: 4px;

    font-weight: 600;

    margin-bottom: 10px;
}


body.single-product .book-btn:hover {

    background-color: #EDC00C;

    color: #303B89;
}


/* =========================================================
   8. SINGLE PRODUCT GENERAL
   ========================================================= */

body.single-product h2.yikes-custom-woo-tab-title {

    display: none !important;
}


body.single-product .product_meta {

    display: none !important;
}


/* Product label */
.product-label.type-bubble,
li.product .onsale {

    right: 10px;

    left: auto;
}


/* Cart thumbnail */
table.cart .product-thumbnail img {

    max-width: 100px !important;
}


/* =========================================================
   9. CHECKOUT
   ========================================================= */

body.woocommerce-checkout .form-row label {

    margin-top: 18px;
}


body.woocommerce-checkout #billing_last_name_field {

    margin-bottom: 18px;
}


body.woocommerce-checkout p#billing_country_field {

    display: none;
}


body.woocommerce-checkout #order_comments_field {

    display: none;
}


/* =========================================================
   10. REVIEWS
   ========================================================= */

.cr-all-reviews-shortcode
.cr-summaryBox-wrap
.cr-add-review-wrap
.cr-all-reviews-add-review {

    background-color: #303B89;
}


.cr-all-reviews-shortcode
.cr-review-form-wrap
.cr-review-form-buttons
.cr-review-form-submit {

    background-color: #303B89;
}


.cr-all-reviews-shortcode
.cr-summaryBox-wrap
.cr-add-review-wrap
.cr-all-reviews-add-review:hover {

    background-color: #303B89;
}


/* =========================================================
   11. WHATSAPP BUTTON
   ========================================================= */

body.single-product .wa-res-container {

    display: inline-block !important;

    clear: both !important;

    width: 100% !important;

    margin: 12px 0 0 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


body.single-product .wa-custom-btn {

    background-color: #FFCC02 !important;

    color: #303B89 !important;

    padding: 12px !important;

    position: relative !important;

    width: calc(100% - 90px) !important;

    text-align: center !important;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

    font-weight: 600;

    text-decoration: none !important;

    height: 48px;

    box-sizing: border-box !important;

    border: none !important;
}


body.single-product .wa-res-icon {

    width: 30px !important;

    height: 30px !important;

    margin-right: 10px !important;
}


/* =========================================================
   12. PRODUCT GALLERY
   ========================================================= */

body.single-product .woocommerce-product-gallery img {

    -webkit-user-drag: none !important;

    -webkit-touch-callout: none !important;

    user-select: none !important;

    -webkit-user-select: none !important;
}


body.single-product .woocommerce-product-gallery
.flex-control-thumbs img {

    cursor: pointer !important;
}


/* =========================================================
   13. SINGLE PRODUCT DESKTOP CONTAINER
   Desktop/laptop only (1025px+)
   Keeps global header/site width untouched.
   Uses the actual Shoptimizer DOM:
   #content.site-content > .shoptimizer-archive > .col-full
   ========================================================= */

@media only screen and (min-width: 1025px) {

    body.single-product
    #content.site-content
    > .shoptimizer-archive
    > .col-full {

        max-width: 1440px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

    /* Archive banner inner spacing */
    body.tax-product_cat
    .elementor-element-c8fdda9 > .e-con-inner {

        width: calc(100% - 30px) !important;
    }


    /* Archive products spacing */
    body.tax-product_cat .archive-products-inner {

        width: calc(100% - 30px) !important;
    }


    /* Sort dropdown */
    body.tax-product_cat
    .woolentor_archive_catalog_ordering
    .woocommerce-ordering select {

        min-width: 205px !important;

        height: 44px !important;

        line-height: 44px !important;

        font-size: 14px !important;

        padding-left: 14px !important;
        padding-right: 40px !important;
    }

}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media only screen and (max-width: 600px) {

    body.single-product .single_add_to_cart_button {

        margin-left: 0 !important;

        width: 100% !important;
    }


    body.single-product .wpb-get-a-quote-button-form-fire.wpb-get-a-quote-button-btn-large.wpb-get-a-quote-button-btn.wpb-get-a-quote-button-btn-default {

        width: 100% !important;

        display: inline-block;
    }


    body.theme-shoptimizer
    .site-header
    .custom-logo-link img,

    body.wp-custom-logo
    .site-header
    .custom-logo-link img {

        height: 28px !important;
    }


    body.single-product .book-btn {

        position: relative !important;

        width: 100% !important;

        display: inline-block;
    }


    .socialicon {

        display: none;
    }


    body.single-product .wa-res-container {

        margin: 10px 0 !important;
    }


    body.single-product .wa-custom-btn {

        width: 100% !important;

        display: flex !important;

        margin-left: 0 !important;
    }

}


/* =========================================================
   16. DESKTOP LOGO
   ========================================================= */

@media only screen and (min-width: 1025px) {

    body.theme-shoptimizer
    .site-header
    .custom-logo-link img,

    body.wp-custom-logo
    .site-header
    .custom-logo-link img {

        height: 42px !important;
    }

}


/* =========================================================
   17. MOBILE FORM FONT FIX
   ========================================================= */

@media only screen
and (max-device-width: 768px)
and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 1.5) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    select,
    .checkout .input-text {

        font-family: Arial, sans-serif;
    }


    body.single-product
    .woocommerce-message
    .message-inner
    .buttons-wrapper
    a span {

        border-bottom: 0 !important;
    }

}


/* =========================================================
   WHEELOPEDIA - FINAL ARROW DIRECTION FIX
   Pure CSS chevrons to avoid theme/Swiper pseudo-icon conflicts
   Desktop + Tablet + Mobile
   ========================================================= */

body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
.swiper-button-prev::after,

body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
.swiper-button-next::after {
    content: "" !important;
    display: block !important;

    width: 10px !important;
    height: 10px !important;

    font-size: 0 !important;
    line-height: 0 !important;

    background: none !important;
    background-image: none !important;

    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;

    border: solid #2d2c2b !important;
    border-width: 0 2px 2px 0 !important;

    box-sizing: border-box !important;
    transform-origin: center center !important;

    pointer-events: none !important;
}

/* LEFT arrow */
body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
.swiper-button-prev::after {
    transform: rotate(135deg) !important;
}

/* RIGHT arrow */
body.single-product
#commercegurus-pdp-gallery
.cg-main-swiper
.swiper-button-next::after {
    transform: rotate(-45deg) !important;
}

/* Slightly smaller chevrons on phones */
@media only screen and (max-width: 767px) {

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-prev::after,

    body.single-product
    #commercegurus-pdp-gallery
    .cg-main-swiper
    .swiper-button-next::after {
        width: 9px !important;
        height: 9px !important;
        border-width: 0 2px 2px 0 !important;
    }
}