/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

 
.section--hero.hero--product {
    background-image: url(/wp-content/themes/truepharm/images/hero_product.png);
    min-height: 320px
}
a.reset_variations {
    padding: 10px;
    color: red;
}
.woocommerce-product-gallery__image a {
    background: #eeeeee73;
    box-shadow: inset 0px -500px 300px -450px rgb(0 0 0 / 4%);
    /* border: 1px solid #e6dede6b; */
}

.woocommerce-product-gallery__image a img {
    mix-blend-mode: multiply;
    /* background: #eee; */
}

.single-product.woocommerce div.product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 30px 0;
    justify-content: center;
}
.vi-wpvs-variation-wrap-wrap[data-swatch_type="variation_img"] .vi-wpvs-variation-wrap-show-attribute-value.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_image_design .vi-wpvs-option-wrap:after {
    line-height: 1.1;
    box-shadow: inset 0 0 0 1px #DDD;
    font-size: 12px;
    margin-top: 2px;
}
.woocommerce div.product div.summary {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

section.related.products>h2:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: var(--alpine-border-color-light, #e6dede);
    top: 0;
    bottom: 0;
    display: table;
    margin: auto
}

.sep2:after {
    border-left: 1px solid #fff;
    height: 14px;
    width: 1px;
    display: table;
    content: '';
    top: 2px;
    position: relative
}

.woocommerce #content div.product div.images {
    margin-right: 0
}

h1.product_title.entry-title {
    color: #000;
    font-size: 28px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.8px;
    margin-bottom: 17px
}

.woocommerce div.product form.cart .button {
    background: linear-gradient(135deg, #e0192e, #c01729);
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 160px;
    text-align: center;
    border: 2px solid #e0192e;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
    float: left;
}

.woocommerce div.product form.cart .button:before {
    content: '\f291';
    font-family: 'FontAwesome';
    margin-left: 7px;
    font-size: .8em
}

.woocommerce-product-details__short-description {
    color: rgb(80 72 108 / 80%);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.32px;
    border-bottom: 1px solid rgb(112 112 112 / 50%);
    margin-bottom: 20px;
    padding-bottom: 20px
}

.woocommerce-tabs.wc-tabs-wrapper {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 570px
}

section.related.products {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: 0px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}

.woocommerce div.product p.price {
    padding-bottom: 18px;
    margin-bottom: 0px;
    padding-top: 23px;
    /* background-image: url(/wp-content/themes/bf2022/images/modal-line.png); */
    background-size: auto 5px;
    background-repeat: repeat-x;
    background-position: bottom
}
.woocommerce div.product div.summary .product_meta {
    display: none;
}
.woocommerce div.product div.summary {
    font-size: 18px;
    line-height: 1.5;
    /* margin-bottom: auto; */
    min-height: min(551px,calc(100vh - 300px));
    padding-top: 0;
    display: flex;
    flex-direction: column;
    height: max-content;
    max-height: min(550px,calc(100vh - 300px));
}

.woocommerce div.product div.summary p {
    font-size: 16px;
    line-height: 1.5;
    margin-top: auto;
}

.post-shares {
    margin-right: auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: absolute;
    left: 0;
    text-align: center;
    margin-top: -15px
}

.product-sku {
    font-size: 12px;
    margin-top: 10px;
    padding-top: 20px;
    margin-top: 20px;
    height: 6px;
    margin-bottom: 22px;
    background-image: url(/wp-content/themes/bf2022/images/modal-line.png);
    background-size: auto 5px;
    background-repeat: repeat-x
}

.woocommerce div.product p.price bdi {
    color: #000;
    font-size: 25px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -.8px
}

p.stock {
    display: table;
    line-height: 31px;
    padding: 0 30px
}

.woocommerce div.product p.stock.in-stock {
    border-radius: 16px;
    background-color: #ffd53b;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.32px;
    margin-bottom: 10px;
    display: none !important;
}

.bordered {
    padding: 0 0;
    margin-top: 30px
}

.free-shiping-ribbon {
    display: table;
    font-size: 16px;
    background: #00bca8;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: 3px
}

.woocommerce div.product p.price del span,
.woocommerce div.product p.price del span bdi,
.woocommerce div.product p.price del {
    color: #50486c
}

span.woocommerce-Price-currencySymbol {
    font-size: .8em;
    vertical-align: text-bottom;
    padding-right: 4px
}

del+ins {
    margin-right: 8px;
    background: none !important
}
.woocommerce ul.products li.product .price ins {
    font-weight: 600;
    color: #e0383f;
}

.woocommerce div.product form.cart .button:hover {
    background: linear-gradient(135deg, #ff1f3d, #d0162b);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(224, 25, 46, 0.4);
    color: #fff;
    text-decoration: none;
    border-color: transparent;
}

.woocommerce div.product div.images.woocommerce-product-gallery {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 52%;
    flex: 0 0 52%;
    float: none;
    flex-direction: row;
    margin-top: 15px;
    margin-bottom: 0;
}

.woocommerce-product-gallery__image {
    background-color: #fff;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    /* width: 87px; */
    margin: 0px !important;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
}

.awdr_discount_bar {
    position: absolute;
    display: table;
    z-index: 2;
    top: 33px;
    right: 0
}

.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder {
    background: #fff
}

.woocommerce div.product div.images img {
    max-width: 570px;
    padding: 10px;
    margin: auto;
    -o-object-fit: scale-down;
    object-fit: scale-down;
    -o-object-position: center;
    object-position: center;
    width: auto;
    max-height: 450px;
    mix-blend-mode: multiply;
    width: 100%;
    /* background: #ffffff; */
    height: 100%;
}
.alpine-product-image-container {
    margin: auto;
}

.alpine-gallery-layout .main-image-container {
    display: flex;
}
section.related.products>h2 {
    margin-bottom: 50px;
    font-size: 32px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: -.64px;
    position: relative;
    text-align: center
}

div#tab-additional_information {
    color: rgb(80 72 108 / 80%);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.32px;
    margin: 20px auto
}

table.woocommerce-product-attributes.shop_attributes {
    margin-top: 21px;
    border-top: 0
}

.woocommerce table.shop_attributes th {
    color: rgb(80 72 108 / 80%);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -.32px;
    text-align: right
}

.woocommerce table.shop_attributes td p {
    font-style: normal;
    color: rgb(80 72 108 / 80%);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.32px
}

.shop_attributes a[rel="tag"] {
    pointer-events: none;
    cursor: default;
    color: rgb(80 72 108 / 80%);
    font-style: normal
}

span.pa-attr-holder img {
    vertical-align: top;
    margin-left: 3px
}

span.pa-attr-holder {
    display: inline-block;
    margin-left: 9px;
    font-style: normal
}

.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th {
    border: 0
}

.woocommerce table.shop_attributes tr:nth-child(odd) td,
.woocommerce table.shop_attributes tr:nth-child(odd) th {
    background-color: rgb(0 188 168 / 8%)
}

.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
    background: #fff
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 0;
    margin: auto 0;
    padding: 0;
    background: none;
    border-radius: 0
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 0 1px;
    border-bottom: 1px solid rgb(80 72 108 / 40%);
    margin-bottom: 10px
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a img {
    vertical-align: middle;
    margin-left: 7px
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 9px 10px
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    color: #00bca8;
    border-top: 3px solid #00bca8
}

.woocommerce div.product .woocommerce-tabs ul.tabs li+li {
    margin-right: 20px
}

.product-media {
    overflow: hidden;
    margin-top: 38px;
    position: relative;
    border-radius: 40px
}

.summary.entry-summary+.container {
    margin-top: 60px;
    margin-bottom: 50px
}

.woocommerce-tabs.wc-tabs-wrapper.fullwidth {
    max-width: 100%
}

.product-media.product-media--video_link iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.product-media.product-media--video_link {
    height: 0;
    padding-top: 56%
}

.product-media.product-media--video_link img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    -o-object-fit: cover;
    object-fit: cover
}

.woocommerce div.product .out-of-stock {
    border-radius: 4px;
    background-color: #af3798;
    color: #fff;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: -.24px;
    padding: 0 5px;
    margin-bottom: 15px;
    display: table
}

.single-product--bc {
    margin: auto;
    max-width: 1370px;
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    padding-bottom: 40px;
    font-size: 18px
}

.single-product--bc a {
    color: #fff
}

.related-title {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    text-align: center;
    position: relative;
    font-size: 30px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 50px;
}

.related-title span {
    background: #fff;
    padding: 0 30px
}

.related-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    background: #000;
    height: 1px;
    margin: auto;
    z-index: -1;
    opacity: .1
}

.product-stock {
    text-shadow: 0 1px 0 #333;
    background: #000;
    display: table;
    color: #bdbdbd;
    line-height: 2;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px
}

.single-product.woocommerce div.product .tinv-wraper.woocommerce.tinv-wishlist.tinvwl-shortcode-add-to-cart {
    /* width: 170px; */
    /* display: inline-block; */
    /* float: right; */
}

.woocommerce div.product form.cart {
    display: flex;
    width: 100%;
    /* margin-top: auto; */
    margin-bottom: 0;
    width: -webkit-fill-available;
    flex-direction: row;
    flex-wrap: wrap;
}
.woocommerce span.onsale{
    min-height: auto;
    left: 10px;
    right: auto;
    top: 20px;
    line-height: 2;
    font-size: 0.9rem;
    top: 115px;
    background: #e0383f;
    border-radius: 3px;
    opacity: 1;
    padding: 0px 10px;
    line-height: 2.5;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) img {
    margin: auto;
    display: table;
    width: 100%
}
.woocommerce div.product div.images .flex-control-thumbs {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #e0383f white;
}


.woocommerce-variation-add-to-cart {
    display: flex;
    width: 100%;
    gap: 15px;
}

.single_variation_wrap {
    width: 100%;
}
@media (min-width:992px) and (max-width:1600px) {
    .woocommerce div.product div.images img {
        max-width: 420px;
        max-height: 450px;
        mix-blend-mode: multiply;
        /* background: #ffffff; */
    }

    .single-product--bc {
        width: 100%;
        padding-bottom: 20px;
        padding-right: 3.5%;
        max-width: 85%;
        font-size: 16px
    }

    .woocommerce div.product div.images.woocommerce-product-gallery {
        margin-right: 0;
        min-height: 420px;
    }

    .woocommerce div.product div.summary {
        /* width: calc(51% - 40px); */
    }

    h1.product_title.entry-title {
        font-size: 28px;
        margin-bottom: 8px
    }

    .woocommerce div.product p.price bdi {
        font-size: 28px;
    }

    .woocommerce div.product p.price {
        /* margin-bottom: 20px; */
    }

    .woocommerce-product-details__short-description {
        margin-bottom: 10px
    }

    .woocommerce .quantity .qty {
        width: 70px
    }

    section.related.products>h2 {
        margin-bottom: 30px
    }

    .summary.entry-summary+.container .col-md-5,
    .summary.entry-summary+.container .col-md-7 {
        max-width: 50%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%
    }
}

.product-brand h2 {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 30px
}

.product-brand h2 a {
    color: inherit
}

@media (max-width:992px) {
    .single-product.woocommerce div.product {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0px 0px 30px;
    }

    .woocommerce div.product div.images.woocommerce-product-gallery {
        -webkit-box-ordinal-group: -1;
        -ms-flex-order: -2;
        order: -2;
        padding: 0;
        transition: 0s !important;
        margin: -1px -15px 0px;
        flex-direction: column;
        gap: 10px;
    }
    .woocommerce-product-gallery__image a {
        margin: auto;
        display: table;
        width: 100%;
    }
    .woocommerce div.product div.summary {
        margin-bottom: 0;
        width: 100%;
        font-size: 14px
    }

    .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
        width: 40px;
        margin: auto 5px 5px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(25% - 10px);
        flex: 0 0 calc(25% - 10px)
    }

    h1.product_title.entry-title {
        font-size: 19px
    }

    .woocommerce-product-details__short-description {
        margin-bottom: 10px
    }

    .woocommerce div.product p.price {
        margin-bottom: 20px;
        padding-bottom: 20px
    }

    .woocommerce div.product p.price bdi,
    .woocommerce div.product p.price del {
        font-size: 22px
    }

    .woocommerce div.product form.cart div.quantity {
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 15px;
        float: none;
        width: 100%;
        clear: both
    }

    .woocommerce div.product form.cart .button {
        width: 100%
    }

    .summary.entry-summary+.container {
        margin-top: 10px;
        margin-bottom: 0
    }

    .section--hero.hero--product+#primary {
        padding: 0 10px
    }

    .product-media.product-media--video_link {
        margin: auto -30px
    }

    section.related.products>h2 {
        font-size: 22px;
        margin-bottom: 20px
    }

    .woocommerce ul.products li.product a.button.add_to_cart_button {
        padding: 0;
        /* width: 100%; */
        margin-top: 10px;
        font-size: 13px;
        line-height: 30px;
        height: 32px;
    }

    .woocommerce ul.products li.product a img {
        height: 37vw;
        margin-bottom: 5px;
        width: max-content;
    }

    .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
        font-size: 14px;
        padding: 4px 0;
        min-height: 50px
    }

    .woocommerce ul.products li.product .price {
        font-size: 14px;
        margin-bottom: 4px
    }

    .woocommerce-product-gallery__image {
        height: 100vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* border-bottom: 1px solid #ddd; */
        /* box-shadow: 0px 10px 10px 5px rgba(0,0,0,0.7); */
        background: #f7f7f7;
    }

    .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
        min-height: auto;
    }

    .woocommerce div.product div.images img {
        min-height: 68vw;
        min-height: auto;
        max-width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        padding: 0px;
        height: 100vw;
    }

    .woocommerce-tabs.wc-tabs-wrapper.fullwidth {
        margin: auto -10px;
        max-width: initial
    }

    .single-product--bc {
        max-width: 100%;
        padding: 0 30px 70px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        line-height: 1.5
    }

    .bc-last {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        font-size: 20px;
        margin-bottom: 12px
    }

    .bc-last+.sep2 {
        display: none
    }

    .sep2 {
        position: relative;
        top: 5px
    }

    .single-product--bc>a+div.sep+a+div.sep {
        display: none
    }

    .bc-attribute {
        font-size: 13px
    }

    .sep2:after {
        height: 10px;
        top: 0
    }

    .woocommerce div.product form.cart {
        width: 100%;
        margin-bottom: 10px;
        /* position: fixed; */
        border: 0;
        z-index: 100;
        /* bottom: -1px; */
        left: 0;
        right: 0;
        /* padding: 10px 10px; */
        /* background: #f2f2f2; */
        margin: 0;
        /* width: 100vw; */
        /* display: none; */
        /* top: calc(100vh - 70px); */
    }

    .inner-input-label {
        z-index: 1
    }

    .woocommerce .quantity .qty {
        font-size: 20px;
        height: 25px
    }

    .single-product.woocommerce div.product .tinv-wraper.woocommerce.tinv-wishlist.tinvwl-shortcode-add-to-cart {
        width: 100%;
        text-align: center
    }

    .single-product.woocommerce div.product .tinv-wraper.woocommerce.tinv-wishlist.tinvwl-shortcode-add-to-cart {
        width: 100%
    }

    .tinv-wraper.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-position-shortcode {
        width: 100%;
        margin-top: 0
    }
	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {transition:0s;width: 100%;}
    .related-title {
        text-align: center;
        -moz-text-align-last: center;
        text-align-last: center;
        font-size: 20px;
        border-top: 1px solid #ddd;
        padding-top: 30px
    }

    .related-title span {
        display: block;
        text-align: center;
        font-size: 26px;
    }

    .related-title:before {
        display: none
    }
}

body.single-product .cwginstock-subscribe-form .panel-primary {
    background: white;
    border: #e0383f  1px solid;
}

body.single-product  .cwginstock-subscribe-form .panel-primary>.panel-heading {
    background: #e0383f;
    border: #e0383f;
    position: relative;
}

body.single-product  .cwgstock_button {
    background: black;
    border: 0px;
    line-height: 30px;
    height: 40px;
    padding: 0px;
    cursor: pointer;
    background: #e0383f;
}

/*
 * Single Product Page Specific Styles
 */

/* 1. Main Layout Structure (Flexbox)
   -------------------------------------------------------------------------- */

.alpine-single-product-layout {
    /* Optional: Add a background to the whole layout area if needed */
    /* background-color: #f9f9f9; */
}

.alpine-single-product-layout .product-inner-wrap {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 50px; /* Increased space between columns */
    align-items: flex-start; /* Align columns to the top */
}

.alpine-product-main-content { /* Left Column */
    flex: 1 1 45%; /* Reverted: Aim for ~65-70% width */
    min-width: 220px; /* Min width before wrapping */
    order: 1;
    /* background-color: rgba(0, 0, 255, 0.05); /* TEMP: Visual Aid */
    padding-top: 65px;
    position: sticky;
    top: 110px;
}

.alpine-product-summary-sticky { /* Right Column */
    flex: 1 1 45%; /* Reverted: Aim for ~30% width */
    min-width: 500px; /* Reverted: Min width */
    order: 0;
    position: sticky;
    top: 40px; /* Initial top offset - ADJUST BASED ON STICKY HEADER */
    /* align-self: flex-start; /* Prevent stretching if content is short */
    /* background-color: rgba(0, 255, 0, 0.05); /* TEMP: Visual Aid */
    /* border: 1px solid #eee; /* Optional: TEMP border */
    /* padding: 20px; /* Optional: TEMP padding */
    /* height: calc(100vh - 130px); */
    /* display: flex; */
    /* flex-direction: column; */
}

/* Adjust sticky top position if sticky header is active */
.alpine-product-summary-sticky {
    /* !!! ADJUST THIS VALUE based on actual sticky header height + desired gap !!! */
    top: 110px; /* EXAMPLE VALUE - Adjust this! */
    /* max-height: calc(100vh - 210px); */
    display: flex;
    flex-direction: column;
}

/* 2. Responsive Layout (Tablets/Small Desktops)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .alpine-single-product-layout .product-inner-wrap {
        gap: 30px; /* Reduce gap */
    }
     /* Adjust flex basis slightly if needed, or let them wrap */
     /* Keep a similar ratio, maybe slightly less pronounced */
     .alpine-product-main-content { flex-basis: 60%; }
     .alpine-product-summary-sticky { flex-basis: 35%; }
}

/* 3. Responsive Layout (Mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .single-product .container {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .alpine-single-product-layout .product-inner-wrap {
        flex-direction: column; /* Stack columns */
        gap: 0; /* Remove gap when stacked */
    }

    .alpine-product-main-content,
    .alpine-product-summary-sticky {
        flex: 1 1 100%; /* Make both columns full width */
        width: 100%;
        order: initial; /* Reset order */
        position: static; /* Disable sticky positioning */
        top: auto;
        height: auto;
        margin-bottom: 35px; /* Add space between stacked sections */
        min-width: initial; /* Reset min-width */
        /* background-color: transparent; /* Remove TEMP */
    }

     .alpine-product-summary-sticky {
        margin-bottom: 0; /* No margin below the last element */
        margin-top: -15px;
     }
}

/* ==========================================================================
   Component Styling within New Layout
   ========================================================================== */

/* Clean up specific old styles */
.alpine-product-summary-sticky .entry-summary p.price,
.alpine-product-summary-sticky .entry-summary .product-sku {
    background-image: none !important;
    border-bottom: none !important; /* Remove any other borders */
    padding-bottom: 0 !important; /* Reset padding */
    margin-bottom: 15px; /* Consistent spacing */
}
.alpine-product-summary-sticky .entry-summary .product-stock { /* Hide default stock text if not needed */
    display: none;
}

/* ==========================================================================
   2. Sticky Summary Column Styling (.alpine-product-summary-sticky)
   ========================================================================== */

.alpine-product-summary-sticky .entry-summary {
    padding: 0; /* Remove default padding */
    position: relative;
    /* Optional: Add a subtle border to the whole sticky column */
    /* border: 1px solid var(--alpine-border-color-light, #eee); */
    /* border-radius: var(--alpine-card-border-radius, 6px); */
    /* padding: 25px; */
}

/* Product Title */
.alpine-product-summary-sticky h1.product_title {
    font-size: 32px; /* Adjust size */
    font-weight: 700; /* Bolder based on image */
    margin: 0 0 0px 0;
    padding: 0;
    line-height: 1.3;
    color: var(--alpine-dark-text, #111);
    text-transform: uppercase; /* Uppercase based on image */
}

/* Product SKU */
.alpine-product-summary-sticky .product-sku {
    font-size: 13px;
    color: var(--alpine-text-secondary, #666);
    margin-bottom: 10px;
    display: block;
}

/* Social Sharing Icons */
.alpine-product-summary-sticky .post-shares {
    position: static; /* Override absolute positioning if any */
    display: flex; /* Use flex */
    gap: 10px;
    margin: 0 0 15px 0; /* Spacing below shares */
    padding: 0;
    justify-content: flex-end; /* Align to right (RTL) */
}
.alpine-product-summary-sticky .post-shares a {
    color: var(--alpine-text-secondary, #666);
    font-size: 18px;
    transition: color 0.2s ease;
}
.alpine-product-summary-sticky .post-shares a:hover {
    color: var(--alpine-dark-text, #111);
}

/* Product Rating - Hide for this simple layout? Or style minimally */
.alpine-product-summary-sticky .woocommerce-product-rating {
    /* display: none; */ /* Option to hide */
    margin-bottom: 15px; /* Keep spacing if shown */
}

/* Price */
.alpine-product-summary-sticky p.price {
    font-size: 26px; /* Adjust size */
    font-weight: 700;
    color: var(--alpine-dark-text, #111);
    margin-bottom: 25px; /* Space before separator */
    padding-bottom: 25px; /* Space after separator */
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    position: relative; /* For the separator */
    border: none; /* Ensure no borders */
}
/* Add the diagonal line separator */
.alpine-product-summary-sticky p.price::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px; /* Adjust height of the image */
    background-image: url(/wp-content/themes/alpinetheme/images/modal-line.png); /* USE CORRECT THEME PATH */
    background-size: auto 5px;
    background-repeat: repeat-x;
}
.alpine-product-summary-sticky p.price del {
    order: 2;
    font-size: 0.7em;
    font-weight: 400;
    color: var(--alpine-text-secondary, #666);
    opacity: 0.9;
    position: relative; /* Needed for potential line-through */
}
.alpine-product-summary-sticky p.price del .amount {
     /* Optional: add line-through */
     /* text-decoration: line-through; */
}
.alpine-product-summary-sticky p.price ins {
    order: 1;
    text-decoration: none;
    color: var(--alpine-dark-text, #111); /* Regular price color */
    background: none;
}
/* Highlight if it's actually a sale price (WooCommerce adds this class) */
.alpine-product-summary-sticky p.price:has(ins) > ins {
    color: var(--alpine-red, #e0192e);
}
.woocommerce div.product .price .discount-percentage {
    order: 3;
}

.alpine-product-summary-sticky p.price > .amount {
    order: 1;
}

/* Hide Excerpt */
.alpine-product-summary-sticky .woocommerce-product-details__short-description {
    display: none;
}

/* --- Action Area (Quantity, Wishlist, Add to Cart) --- */

/* Main Flex Container for Actions */
.alpine-product-summary-sticky .entry-summary > form.cart,
.alpine-product-summary-sticky .entry-summary > .tinv-wraper /* Target direct children */ {
    /* We might need a common parent wrapper added via hooks for perfect flex alignment */
    /* For now, let's style them individually */
}

.alpine-product-summary-sticky form.cart {
    order: 1; /* Ensure form comes logically first */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Stretch items in the row */
    gap: 10px;
    margin-bottom: 0; /* Remove bottom margin, button will handle it */
}

/* Wishlist Wrapper - Positioning */
.alpine-product-summary-sticky .entry-summary > .tinv-wraper.tinvwl-shortcode-add-to-cart {
    /* position: absolute; */ /* Position relative to the summary */
    /* top: 5px; */  /* Adjust as needed */
    /* left: 5px; */ /* Adjust for RTL, left aligns it to the right */
    /* order: initial; */ /* Remove flex order */
    /* margin-bottom: 0; */
    /* flex: none; */ /* Don't participate in flex layout */
    /* z-index: 5; */ /* Ensure it's above other elements */
    /* width: auto; */ /* Let the button define its own width */
    /* height: auto; */ /* Let the button define its own height */
}

/* Wishlist Button Area - Icon Only Style */
.alpine-product-summary-sticky .tinvwl_add_to_wishlist_button {
    /* Reset previous styles */
    margin: 0;
    border: none; /* Remove border */
    border-radius: 50%; /* Make it circular */
    padding: 8px; /* Adjust padding for icon size */
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    min-width: initial; /* Remove min-width */
    background: rgba(255, 255, 255, 0.8); /* Optional: slight background */
    display: flex; /* Keep flex for centering */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 0; /* Remove gap */
    text-decoration: none;
    box-sizing: border-box;
    color: var(--alpine-text-secondary); /* Icon color */
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 18px; /* Adjust icon size directly if using font icon */
}
/* Ensure the icon itself is displayed - Check TINV settings/CSS if icon doesn't show */
.alpine-product-summary-sticky .tinvwl_add_to_wishlist_button::before {
    /* Assuming the icon is a ::before pseudo-element, common for icon fonts */
    /* You might need to inspect the element in your browser to confirm how the icon is added */
    font-family: 'tinvwl-webfont-font'; /* Example, check actual font-family */
    /* content: '\\e905'; Example content code */
    margin: 5px;
    line-height: 1;
}

/* Hide Text Spans */
.alpine-product-summary-sticky .tinvwl_add_to_wishlist_button span {
    display: none !important; /* Hide both add and remove text */
}

/* Hide Tooltip if not desired */
.alpine-product-summary-sticky .entry-summary > .tinv-wraper.tinvwl-shortcode-add-to-cart .tinvwl-tooltip {
    display: none;
}

/* Hover/Active State */
.alpine-product-summary-sticky .tinvwl_add_to_wishlist_button:hover,
.alpine-product-summary-sticky .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
    background-color: var(--alpine-red, #e0192e); /* Red background when active/hover */
    color: #fff; /* White icon */
    border-color: transparent;
}

/* Adjust summary padding to prevent overlap */
.alpine-product-summary-sticky .entry-summary {
    padding-top: 50px; /* Add padding to top of summary if icon overlaps title */
    position: relative; /* Needed for absolute positioning of child */
}
.woocommerce div.product form.cart::after, .woocommerce div.product form.cart::before {
    display: none;
}
/* Quantity Input Area - Flex Item */
.woocommerce .alpine-single-product-layout div.product form.cart div.quantity {
    order: 1; /* Position first in form */
    flex: 0 1 105px; /* Don't grow, shrink if needed, base width */
    border: 1px solid var(--alpine-border-color, #ccc);
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    /* min-height: 90px; */ /* Adjusted height */
    /* width: 70px; /* Let flex-basis control width */
    position: relative;
}
/* Hide default WC label */
.alpine-product-summary-sticky form.cart .quantity > label.screen-reader-text {
    display: none;
}
/* Style the inner label */
.alpine-product-summary-sticky form.cart .quantity .inner-input .inner-input-label {
    font-size: 11px;
    color: var(--alpine-text-secondary, #666);
    margin-top: 5px; /* Space from top border */
    line-height: 1.2;
    display: block;
    text-align: center;
    white-space: nowrap;
}
/* Style the +/- buttons */
.alpine-product-summary-sticky form.cart .quantity .quantity--plus,
.alpine-product-summary-sticky form.cart .quantity .quantity--minus {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    padding: 5px 0;
    cursor: pointer;
    color: var(--alpine-text-secondary);
    background: none;
    border: none;
    transition: color 0.2s ease;
}
.alpine-product-summary-sticky form.cart .quantity .quantity--plus:hover,
.alpine-product-summary-sticky form.cart .quantity .quantity--minus:hover {
    color: var(--alpine-dark-text);
}
.alpine-product-summary-sticky form.cart .quantity .quantity--plus { order: -1; /* Move to top */ }
.alpine-product-summary-sticky form.cart .quantity .quantity--minus { order: 1; /* Move to bottom */ }

/* Style the number input field */
.alpine-product-summary-sticky form.cart .quantity .inner-input {
    order: 0; /* Keep in middle */
    text-align: center;
    width: 90px;
}
.alpine-product-summary-sticky form.cart .quantity input.qty {
    width: 100%;
    height: auto;
    text-align: center;
    border: none;
    padding: 0 5px;
    font-size: 18px;
    font-weight: 700;
    color: var(--alpine-dark-text);
    background: none;
    box-shadow: none;
    -moz-appearance: textfield;
    line-height: 30px;
    margin-top: -10px;
}
.alpine-product-summary-sticky form.cart .quantity input.qty::-webkit-outer-spin-button,
.alpine-product-summary-sticky form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to Cart Button Area - Force below */
.alpine-product-summary-sticky form.cart .single_add_to_cart_button {
    order: 3; /* Position last in form */
    flex-basis: 100%; /* Force to new line */
    /* margin: 10px 0 0 0 !important; */ /* Add space above, override others */
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.alpine-product-summary-sticky form.cart button.button[type="submit"] {
    width: 100%;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #ffffff !important;
    background: linear-gradient(135deg, #e0192e, #c01729) !important;
    border: 2px solid #e0192e;
    border-radius: 50px;
    line-height: 1.2;
    height: auto;
    flex: 1;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 160px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.alpine-product-summary-sticky form.cart button.button[type="submit"]:hover,
.alpine-product-summary-sticky form.cart button.button[type="submit"]:focus {
    background: linear-gradient(135deg, #ff1f3d, #d0162b) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(224, 25, 46, 0.4);
    color: #ffffff !important;
    border-color: transparent;
}

/* Hide elements not shown in the simple product image */
.alpine-product-summary-sticky form.cart .variations,
.alpine-product-summary-sticky .size-guide-link,
.alpine-product-summary-sticky .reset_variations,
.alpine-product-summary-sticky .delivery-time-info,
.alpine-product-summary-sticky .compare-checkbox {
    /* display: none; */
}


/* ==========================================================================
   3. Main Content Column Styling (.alpine-product-main-content)
   ========================================================================== */

/* Gallery Area */
.alpine-product-main-content .woocommerce-product-gallery {
    /* border: 1px dashed #ccc; /* TEMP */
    margin-bottom: 40px; /* Space below gallery */
}

/* Tabs/Description Area (Will become accordions) */
.alpine-product-main-content .woocommerce-tabs {
     /* border: 1px dashed #f90; /* TEMP */
     clear: both; /* Ensure it clears floats if any */
}

/* ==========================================================================
   4. Related Products Styling (ensure consistency with loop)
   ========================================================================== */

.single-product .related.products {
    /* border: 1px dashed #f0f; /* TEMP */
    clear: both;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 0;
    max-width: 1290px;
    margin: 20px auto 50px;
}
/* Ensure related products use the global card style from woocommerce.css */
.single-product .related.products ul.products li.product {
    /* Styles are inherited from global woocommerce.css */
}

/* ==========================================================================
   5. Displaying Migrated Data
   ========================================================================== */

/* Styling for Breadcrumbs in Summary */
.alpine-product-summary-sticky .product-summary-breadcrumb {
    font-size: 13px;
    margin-bottom: 10px; /* Space below breadcrumbs */
    color: var(--alpine-text-secondary, #666);
    display: none;
}

.alpine-product-summary-sticky .product-summary-breadcrumb a {
    color: var(--alpine-text-secondary, #666);
    text-decoration: none;
}

.alpine-product-summary-sticky .product-summary-breadcrumb a:hover {
    color: var(--alpine-primary, #007bff); /* Or your theme's link hover color */
    text-decoration: underline;
}

.alpine-product-summary-sticky .product-summary-breadcrumb span.breadcrumb_last {
    font-weight: 600;
    color: var(--alpine-dark-text, #333);
}

/* Brand under title */
.alpine-product-summary-sticky .product-brand-under-title {
    font-size: 14px;
    margin: 0; /* Space above/below */
    font-weight: 400;
    line-height: 1;
}
/* Styling for Brand Label */
.alpine-product-summary-sticky .product-brand-under-title .brand-label {
    font-weight: 300; /* Make label slightly bolder */
    color: #2d2d2d;
    margin-inline-end: 0px; /* RTL support - Moved from specific a/span */
}
.alpine-product-summary-sticky .product-brand-under-title a,
.alpine-product-summary-sticky .product-brand-under-title span.brand-name {
    color: var(--alpine-text-secondary, #666);
    text-decoration: none;
    transition: color 0.2s ease;
}
.alpine-product-summary-sticky .product-brand-under-title a:hover {
    color: var(--alpine-primary, #007bff); /* Or your theme's link hover color */
}

/* Inline logo for brand under title */
.alpine-product-summary-sticky .product-brand-under-title .brand-logo-inline {
    max-height: 28px; /* Adjust as needed */
    width: auto;
    margin-inline-end: 8px; /* RTL: margin-left: 8px; */
    vertical-align: middle; /* Align with text */
    display: inline-block; /* Ensure it behaves well with text */
}

/* Adjust spacing if needed */
.alpine-product-summary-sticky h1.product_title {
    margin-top: 0; /* Remove top margin if breadcrumbs provide enough space */
}

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

/* ADD START - Styles for Flowing Content Sections */
.alpine-product-main-content .product-content-section {
    margin-bottom: 40px; /* Space between sections */
    padding-top: 10px;
    position: relative;
    /* border-top: 1px solid var(--alpine-border-color-light, #f0f0f0); */
}

.alpine-product-main-content .product-content-section:first-child {
    padding-top: 0;
    border-top: none; /* No border above the very first section */
}

/* UPDATED - Section Title Styling */
.alpine-product-main-content .product-content-section .section-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 0px 0; /* Increased bottom margin for more space to content */
    padding: 0; /* Adjusted padding */
    line-height: 1.5;
    color: var(--alpine-dark-text, #222);
    /* background-color: #f7f8f9; */ /* Slightly different light background */
    /* border-bottom: 1px solid #e6dede; */ /* Use theme red for accent */
    position: relative;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align icon and text */
    gap: 5px;
    /* border-bottom: 1px solid #EEE; */ /* Removed bottom border as left border is prominent */
}

.alpine-product-main-content .product-content-section .section-title i {
    margin-inline-end: 6px; /* Space between icon and text (RTL aware) */
    font-size: 1.1em; /* Icon size relative to text */
    color: var(--alpine-primary, #e0383f); /* Match border accent, or use a specific icon color */
    line-height: 1; /* Ensure icon aligns well */
    text-align: center;
    width: 34px;
}

/* Adjust top margin for elements immediately following the title */
.alpine-product-main-content .product-content-section .section-title ~ *:not(.section-title) {
    margin-top: 5px;
    padding-inline-start: 47px;
}
/* ADD END - Flowing Content Section Styles */

.alpine-product-main-content .product-content-section:after {
    content: '';
    position: absolute;
    top: 73px;
    width: 1px;
    background: #dee2e69e;
    height: calc(100% - 76px);
    right: 17px;
    display: none;
}

/* Styling for Lists within Tabs/Accordions */
.alpine-product-main-content .product-single-lines-list ul,
.alpine-product-main-content .product-old-attributes-list ul {
    margin: 0px 0 0 0;
    padding: 0 0px 10px;
    /* font-size: 14px; */
}

/* Styling for Advantages List without bullets */
.alpine-product-main-content .product-advantages-list .advantages-no-bullets {
    margin: 15px 0 0 0;
}

.alpine-product-main-content .product-advantages-list .advantage-item {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px dotted var(--alpine-border-color-light, #eee);
}

.alpine-product-main-content .product-advantages-list .advantage-item:last-child {
    border-bottom: none;
}

/* Styling for Extended Content Section */
.alpine-product-main-content .product-extended-content-section h4 {
    color: var(--alpine-dark-text);
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 12px 0;
    padding: 0;
    border: none;
}

.alpine-product-main-content .product-extended-content-section h4:first-of-type {
    margin-top: 10px;
}

.alpine-product-main-content .product-extended-description,
.alpine-product-main-content .product-old-description {
    margin-bottom: 20px;
}

.alpine-product-main-content .product-extended-description:last-child,
.alpine-product-main-content .product-old-description:last-child {
    margin-bottom: 0;
}

/* First sentence styling in main description */
.alpine-product-main-content .main-description p:first-child strong:first-child {
    font-size: 18px;
    font-weight: 600;
    color: var(--alpine-dark-text, #333);
    line-height: 1.4;
}

/* Responsive first sentence styling */
@media (max-width: 768px) {
    .alpine-product-main-content .main-description p:first-child strong:first-child {
        font-size: 16px;
    }
}

/* Main Description Paragraph Styling */
.alpine-product-main-content .main-description p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.alpine-product-main-content .main-description p:last-child {
    margin-bottom: 0;
}

/* Ensure no extra breaks or spacing issues */
.alpine-product-main-content .main-description br {
    display: none; /* Hide any remaining BR tags */
}

/* Styling for Single Lines List with checkmark icons */
.alpine-product-main-content .product-single-lines-list ul li {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 16px;
    line-height: 1.5;
}

.alpine-product-main-content .product-single-lines-list ul li i {
    color: var(--alpine-primary, #e0383f);
    margin-inline-end: 8px;
    font-size: 14px;
    min-width: 18px;
    text-align: center;
}


/* Styling for Subsection Headings in Additional Info */
.alpine-product-main-content .product-additional-info-section h4 {
    color: var(--alpine-dark-text);
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 12px 0;
    padding: 0;
    border: none;
}

.alpine-product-main-content .product-additional-info-section h4:first-of-type {
    margin-top: 10px;
}

/* Styling for Definition Lists (Points, Old Attributes) */
.alpine-product-main-content .product-points-list dl,
.alpine-product-main-content .product-old-attributes-list dl,
.alpine-product-main-content .product-wc-attributes dl {
    /* margin: 15px 0 0 0; */
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
}
.alpine-product-main-content .product-points-list dt,
.alpine-product-main-content .product-points-list dd,
.alpine-product-main-content .product-old-attributes-list dt,
.alpine-product-main-content .product-old-attributes-list dd,
.alpine-product-main-content .product-wc-attributes dt,
.alpine-product-main-content .product-wc-attributes dd {
    padding: 8px 0;
    border-bottom: 1px dotted var(--alpine-border-color-light, #eee);
    line-height: 1.5;
}
.alpine-product-main-content .product-points-list dt,
.alpine-product-main-content .product-old-attributes-list dt,
.alpine-product-main-content .product-wc-attributes dt {
    font-weight: 400;
    color: var(--alpine-dark-text);
    /* float: left; */ /* Layout label and value side-by-side */
    /* clear: left; */
    width: 170px; /* Adjust width as needed */
    /* padding-right: 10px; */ /* Space between label and value */
    box-sizing: border-box;
    flex: 0 0 170px;
    display: flex; /* Use flex for icon and text alignment */
    align-items: center; /* Vertically align icon and text */
    gap: 6px;
}

.alpine-product-main-content .product-points-list dt i,
.alpine-product-main-content .product-old-attributes-list dt i,
.alpine-product-main-content .product-wc-attributes dt i {
    margin-inline-end: 8px; /* Space between icon and label text (RTL aware) */
    font-size: 1.1em; /* Icon size relative to label text */
    color: var(--alpine-primary, #e0383f); /* Use theme primary color or a specific icon color */
    min-width: 1.2em; /* Ensure icon has some space, prevents text jump */
    text-align: center;
    line-height: 1; /* Helps with vertical alignment */
}

.alpine-product-main-content .product-points-list dd,
.alpine-product-main-content .product-old-attributes-list dd,
.alpine-product-main-content .product-wc-attributes dd {
    margin: 0; /* Align with label width + padding */
    font-weight: var(--alpine-text-secondary);
    /* Remove duplicate border */
    /* border-bottom: 1px dotted var(--alpine-border-color-light, #eee); */
    padding: 8px 0;
    flex: 0 0 calc(100% - 170px);
    width: calc(100% - 170px);
    max-width: calc(100% - 170px);
}
/* Clearfix for the dl */
.alpine-product-main-content .product-points-list dl::after,
.alpine-product-main-content .product-old-attributes-list dl::after,
.alpine-product-main-content .product-wc-attributes dl::after {
    content: '';
    clear: both;
}
/* ADD START - Mobile Styles for Flowing Content */
@media (max-width: 767px) {
    .alpine-product-main-content .product-content-section {
        margin-bottom: 30px;
        padding-top: 0px;
    }
    .alpine-product-main-content .product-content-section .section-title {
        font-size: 17px;
        margin-bottom: 0px;
        padding: 0px 0px;
        margin-top: 20px;
    }
}
.alpine-product-main-content .product-wc-attributes dt:last-of-type, .alpine-product-main-content .product-wc-attributes dd:last-of-type {
    border-bottom: 0px;
}


/* ADD END - Mobile Styles for Flowing Content */


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

/* ==========================================================================
   6. Vertical Product Gallery Thumbnails
   ========================================================================== */

.alpine-product-main-content .woocommerce-product-gallery {
    /* Ensure gallery itself doesn't have floats or conflicting display */
    float: none;
    width: 100%;
}

/* Floating Gallery Indicators */
.alpine-gallery-layout .floating-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.alpine-gallery-layout .floating-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.alpine-gallery-layout .floating-dot.active {
    background: #667eea;
    transform: scale(1.3);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

.alpine-gallery-layout .floating-dot:hover {
    background: #667eea;
    transform: scale(1.2);
}

/* Floating Gallery Indicators */
.alpine-gallery-layout .floating-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.alpine-gallery-layout .floating-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.alpine-gallery-layout .floating-dot.active {
    background: #667eea;
    transform: scale(1.3);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

.alpine-gallery-layout .floating-dot:hover {
    background: #667eea;
    transform: scale(1.2);
}

/* Main Image Slider Items (from WC default structure) */
/* Ensure only the first slide (main active image) is visible initially */
.alpine-gallery-layout .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
    /* display: none; */ /* Handled by slider JS */
}
.alpine-gallery-layout .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    margin-bottom: 0; /* Remove default bottom margin */
    width: 100% !important; /* Override any inline widths */
    flex: 1; /* Allow main images to take remaining space */
}

/* Floating Layers Gallery - New Modern Design */
.alpine-gallery-layout .floating-gallery-container {
    position: relative;
    width: 100%;
    height: 520px;
    margin: 20px 0;
    perspective: 1000px;
}

.alpine-gallery-layout .floating-layers-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Modern Gallery Container */
.alpine-gallery-layout .modern-gallery-container {
    position: relative;
    width: 100%;
    margin: 20px 0;
}

/* Main Image Container */
.alpine-gallery-layout .main-image-container {
    position: relative;
    width: 100%;
    background: #f7f7f7;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
    /* border: 1px solid #f0f0f0; */
}

.alpine-gallery-layout .main-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.alpine-gallery-layout .floating-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(245,245,245,0.9) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 2px;
}

.alpine-gallery-layout .floating-layer::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
    z-index: 2;
}

.alpine-gallery-layout .floating-layer img {
    width: 100%;
    height: calc(100% - 45px); /* Account for polaroid bottom */
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 2px;
    position: relative;
    z-index: 2;
}

.alpine-gallery-layout .floating-layer:hover {
    transform: translate(-50%, -50%) scale(1.03) rotateY(5deg);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.18),
        0 8px 15px rgba(0, 0, 0, 0.12);
    border-color: var(--alpine-primary, #2c5aa0);
}

.alpine-gallery-layout .floating-layer:hover img {
    transform: scale(1.02);
}

/* Individual Thumbnail Items */
.woocommerce div.product div.images .flex-control-thumbs li {
    margin: 0; /* Reset margin */
    overflow: hidden; /* Prevent image overflow */
    /* border: 1px solid var(--alpine-border-color-light, #eee); */
    cursor: pointer;
    transition: border-color 0.2s ease;
    width: 100%;
    background: #eeeeee73;
    height: 120px;
    flex: 0 0 120px;
}

/* Polaroid Stack Z-Index Management - Natural Photo Pile */
.alpine-gallery-layout .floating-layer:nth-child(1) { 
    z-index: 5; 
    transform: translate(-50%, -50%) rotate(-1deg) scale(1);
    opacity: 1;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.2),
        0 8px 15px rgba(0, 0, 0, 0.12);
}

.alpine-gallery-layout .floating-layer:nth-child(2) { 
    z-index: 4; 
    transform: translate(-50%, -50%) translateX(-8px) translateY(12px) rotate(3deg) scale(0.98);
    opacity: 0.9;
    box-shadow: 
        0 12px 25px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.1);
}

.alpine-gallery-layout .floating-layer:nth-child(3) { 
    z-index: 3; 
    transform: translate(-50%, -50%) translateX(12px) translateY(24px) rotate(-4deg) scale(0.96);
    opacity: 0.8;
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08);
}

.alpine-gallery-layout .floating-layer:nth-child(4) { 
    z-index: 2; 
    transform: translate(-50%, -50%) translateX(-6px) translateY(36px) rotate(2deg) scale(0.94);
    opacity: 0.7;
    box-shadow: 
        0 8px 15px rgba(0, 0, 0, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.06);
}

.alpine-gallery-layout .floating-layer:nth-child(5) { 
    z-index: 1; 
    transform: translate(-50%, -50%) translateX(8px) translateY(48px) rotate(-2deg) scale(0.92);
    opacity: 0.6;
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Responsive adjustments for modern gallery */
@media (max-width: 767px) {
    .alpine-gallery-layout .modern-gallery-container {
        margin: 0;
    }
    
    .alpine-gallery-layout .main-image-container {
        margin-bottom: 12px;
        border-radius: 8px;
    }
    
    .alpine-gallery-layout .thumbnails-row {
        gap: 8px;
        padding: 8px 0;
    }
    
    .alpine-gallery-layout .thumbnail-item {
        flex: 0 0 50px;
        height: 50px;
        border-radius: 6px;
        box-shadow: 0px 0px 3px 0px rgba(0,0,0,.2);
    }
    .woocommerce .alpine-gallery-layout .thumbnails-row {
        margin-top: -50px;
        position: relative;
        z-index: 2;
        padding: 10px;
        overflow: auto;
    }
    
    .alpine-gallery-layout .gallery-indicators {
        top: auto;
        bottom: 100vw;
        transform: translateY(130%);
    }
    .alpine-gallery-layout .gallery-indicators {
        padding: 6px 3px;
        gap: 4px;
    }
    
    .alpine-gallery-layout .gallery-dot {
        width: 6px;
        height: 6px;
    }
}

/* Modern Gallery Control Button */
.alpine-gallery-layout .gallery-control-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(44, 90, 160, 0.9);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 15px rgba(44, 90, 160, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alpine-gallery-layout .gallery-control-btn:hover {
    background: var(--alpine-primary, #2c5aa0);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
    box-shadow: 
        0 6px 20px rgba(44, 90, 160, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.alpine-gallery-layout .gallery-control-btn.paused {
    background: rgba(220, 53, 69, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

.alpine-gallery-layout .gallery-control-btn.paused:hover {
    background: #dc3545;
}

@media (max-width: 767px) {
    .alpine-gallery-layout .flex-control-thumbs {
        order: 1; /* Move thumbs below main image */
        flex-direction: row; /* Switch back to horizontal */
        max-height: none; /* Remove max height */
        width: 100%;
        overflow-x: auto; /* Horizontal scroll */
        overflow-y: hidden;
        flex: 0 0 auto; /* Reset flex basis */
        padding-bottom: 5px; /* Space for scrollbar */
    }

    .alpine-gallery-layout .flex-control-thumbs li {
         flex: 0 0 65px; /* Fixed width for horizontal thumbs on mobile */
         width: 65px;
    }
}

/* ==========================================================================
   7. Related & Similar Products Sections
   ========================================================================== */

/* General Styling for Product Grids Below Main Content */
.related.products,
.upsells.products,
.similar-products {
    clear: both;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid var(--alpine-border-color-light, #eee);
}

.related.products > h2,
.upsells.products > h2,
.similar-products > h2.section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center; /* Or inherit/right for RTL */
    color: var(--alpine-heading-color, #333);
}

/* Adjust column count if needed (WooCommerce defaults usually work) */
/* Example for 4 columns */
.related.products ul.products,
.upsells.products ul.products,
.similar-products ul.products {
   /* --columns: 4; /* If you need to force 4 columns via CSS variable */
   /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
}

/* Styling for individual product cards within these sections */
/* Leverages the global styles in woocommerce.css, but you can add overrides */
.related.products .product,
.upsells.products .product,
.similar-products .product {
    /* Add specific overrides if needed */
}

/* Responsive adjustments for related/similar/upsell grids if needed */
@media (max-width: 767px) {
    .related.products,
    .upsells.products,
    .similar-products {
        padding-top: 30px;
        margin-top: 30px;
    }

    .related.products > h2,
    .upsells.products > h2,
    .similar-products > h2.section-title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    /* WooCommerce default responsive grid usually handles columns */
}

/* ==========================================================================
   8. Frequently Bought Together Section
   ========================================================================== */

.frequently-bought-together-section {
    /* border-top: 1px solid var(--alpine-border-color-light, #e6dede); */
    /* padding-top: 25px; */
    /* margin-top: 25px; */
}

.frequently-bought-together-section .section-title {
    margin-bottom: 20px;
}

.frequently-bought-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.frequent-product-item {
    border: 1px solid var(--alpine-border-color-light, #e6dede);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
}

.frequent-product-item:hover {
    border-color: var(--alpine-primary-color, #333);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.frequent-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.frequent-product-image {
    position: relative;
    background: #f8f8f8;
    padding: 15px;
    text-align: center;
}

.frequent-product-image img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.frequent-product-item:hover .frequent-product-image img {
    transform: scale(1.05);
}

.frequent-product-info {
    padding: 15px;
    border-top: 1px solid var(--alpine-border-color-light, #e6dede);
}

.frequent-product-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 8px 0;
    line-height: 1.3;
    color: var(--alpine-heading-color, #333);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em; /* Ensure consistent height */
}

.frequent-product-link:hover .frequent-product-title {
    color: var(--alpine-primary-color, #333);
}

.frequent-product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--alpine-price-color, #333);
    margin-top: auto;
}

.frequent-product-price .amount {
    font-weight: 600;
}

.frequent-product-price del {
    color: #999;
    font-size: 12px;
    margin-left: 5px;
}

.frequent-product-price ins {
    text-decoration: none;
    color: var(--alpine-sale-color, #e74c3c);
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .frequently-bought-products-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }
    
    .frequent-product-image {
        padding: 12px;
    }
    
    .frequent-product-image img {
        max-height: 100px;
    }
    
    .frequent-product-info {
        padding: 12px;
    }
}

@media (max-width: 767px) {
    .frequently-bought-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .frequent-product-title {
        font-size: 13px;
    }
    
    .frequent-product-price {
        font-size: 13px;
    }
    
    .frequent-product-image {
        padding: 10px;
    }
    
    .frequent-product-image img {
        max-height: 80px;
    }
    
    .frequent-product-info {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .frequently-bought-products-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .frequent-product-title {
        font-size: 12px;
        -webkit-line-clamp: 3;
        min-height: 3.6em;
    }
    
    .frequent-product-price {
        font-size: 12px;
    }
}

/* Popular Badge for Frequently Bought Products */
.frequent-product-item {
    position: relative;
}

.frequent-product-item.has-popular-badge .popular-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 3px;
    max-width: 90%;
    line-height: 1.2;
}

/* Different badge colors based on icon type */
.popular-badge:has(.fa-star) {
    background: linear-gradient(135deg, #ffd700, #ffa500);
}

.popular-badge:has(.fa-badge-check) {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.popular-badge:has(.fa-arrows-repeat) {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
}

.popular-badge:has(.fa-thumbs-up) {
    background: linear-gradient(135deg, #007bff, #6610f2);
}

.popular-badge i {
    font-size: 12px;
    color: #fff;
    animation: pulse-fire 2s infinite;
}

@keyframes pulse-fire {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.popular-badge span {
    font-size: 10px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Responsive adjustments for popular badge */
@media (max-width: 768px) {
    .popular-badge {
        font-size: 9px;
        padding: 3px 6px;
        top: 6px;
        right: 6px;
    }
    .popular-badge span {
        font-size: 8px;
    }
}

/* Make sure the badge doesn't interfere with the product image */
.frequent-product-item .frequent-product-image {
    position: relative;
}

/* ==========================================================================
   9. Product Meta Icons & Brand (Under Add to Cart)
   ========================================================================== */

.alpine-product-meta-icons-brand {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Increased gap for a more spacious feel */
    align-items: stretch; /* Stretch items to be same height if wrapping occurs */
    justify-content: space-around;
    /* padding: 20px; */ /* Increased padding */
    margin: 0 auto auto; /* More space below add-to-cart */
    /* border: 1px solid var(--alpine-border-color-light, #e9e9e9); */ /* Slightly softer border */
    /* border-radius: var(--alpine-card-border-radius, 8px); */ /* Slightly larger radius */
    /* background-color: #ffffff; */ /* Clean white background */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.04); */ /* Softer, more elegant shadow */
    order: 3;
    margin-top: 20px;
}

.alpine-product-meta-icons-brand .meta-item {
    display: flex;
    flex-direction: column; /* Stack icon/image and text vertically */
    align-items: center; /* Center items horizontally */
    justify-content: start; /* Center content vertically within the item */
    gap: 0px; /* Space between icon/image and text */
    font-size: 16px; /* Increased base text size */
    color: #585858;
    flex: 1 1 auto;
    text-align: center; /* Ensure text is centered */
    padding: 10px 0; /* Add some padding inside each item */
    flex: 1; /* Adjust min-width as needed */
}

.alpine-product-meta-icons-brand .meta-item i {
    font-size: 28px; /* Significantly bigger icons */
    margin-bottom: 0px; /* Space below icon before text if not using gap effectively for column */
    line-height: 1;
    color: #e0383f;
    line-height: 40px;
}
 

.alpine-product-meta-icons-brand .meta-item .meta-text {
    line-height: 1.4;
    font-weight: 500; /* Slightly bolder text for emphasis */
    /* background: #eee; */
    padding: 3px 2px;
    font-size: 13px;
}

/* Brand item specific styling for logo above text */
.alpine-product-meta-icons-brand .brand-item {
    /* flex-direction: column; is already set on .meta-item */
    /* align-items: center; is already set on .meta-item */
    gap: 10px; /* Adjust gap between logo and brand name text */
}

.alpine-product-meta-icons-brand .brand-logo-image {
    max-height: 55px; /* Bigger brand logo */
    max-width: 130px; 
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 5px; /* Ensure space if gap isn't enough */
}

.alpine-product-meta-icons-brand .brand-text {
    font-weight: 600; /* Bolder brand name */
    font-size: 15px; /* Slightly larger brand name text */
    color: var(--alpine-text-main, #222);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .alpine-product-meta-icons-brand {
        gap: 5px;
        padding: 0px;
        margin-top: 20px;
        /* flex-direction: column; already default for single items, wrap handles stacking */
    }

    .alpine-product-meta-icons-brand .meta-item {
        min-width: calc(25% - 10px); /* Aim for 2 items per row on small mobile if possible */
        font-size: 12px;
        padding: 8px;
    }
    /* If strictly one item per row on mobile is preferred: */
    /* .alpine-product-meta-icons-brand .meta-item {
        min-width: 100%;
    } */

    .alpine-product-meta-icons-brand .meta-item i {
        font-size: 24px; /* Slightly smaller icons for mobile */
    }

    .alpine-product-meta-icons-brand .brand-logo-image {
        max-height: 45px; /* Adjust brand logo for mobile */
    }
    .alpine-product-meta-icons-brand .brand-text {
        font-size: 14px;
    }
}

/* END Product Meta Icons & Brand */

/* START Product Brand Info Section */
.product-brand-info-section .section-title i.fa-copyright {
    /* Specific styling for this icon if needed, e.g. different color from other section titles */
    /* color: var(--alpine-grey, #6c757d); */
}

.product-brand-info-section .brand-info-content {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 25px; /* Space between logo and text */
    align-items: flex-start; /* Align items to the top */
    padding-top: 15px; /* Space below the section title */
}

.product-brand-info-section .brand-info-logo-wrap {
    flex: 0 0 150px; /* Fixed width for the logo container */
    max-width: 150px;
    margin-bottom: 15px; /* Space below logo on mobile when it wraps */
}

.product-brand-info-section .brand-info-logo {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* Optional: slight rounding for the logo */
    /* border: 1px solid var(--alpine-border-color-light, #eee); Optional border */
}

.product-brand-info-section .brand-info-text {
    /* flex: 1 1 calc(100% - 175px); */ /* Text takes remaining space (150px logo + 25px gap) */
    /* position: relative; */
    font-size: 15px;
    /* line-height: 1.7; */
    color: #2c2c2c;
    /* background: #f6f6f6; */
    /* padding: 10px; */
    /* border-radius: 5px; */
    /* order: 0; */
}

.product-brand-info-section .brand-info-text h3 {
    font-size: 1.1em; /* Relative to parent */
    color: var(--alpine-dark-text, #333);
    margin-top: 0;
    margin-bottom: 0.5em;
}

.product-brand-info-section .brand-info-text p {
    margin-bottom: 1em;
}
.product-brand-info-section .brand-info-text p:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments for Brand Info Section */
@media (max-width: 767px) {
    .product-brand-info-section .brand-info-content {
        gap: 20px;
    }
    .product-brand-info-section .brand-info-logo-wrap {
        flex-basis: 120px; /* Slightly smaller logo on mobile */
        max-width: 120px;
    }
    .product-brand-info-section .brand-info-text {
        flex-basis: calc(100% - 140px); /* Adjust for smaller logo + gap */
        font-size: 14px;
    }
}

@media (max-width: 575px) { /* Even smaller screens, stack them */
    .product-brand-info-section .brand-info-content {
        flex-direction: column; /* Stack logo and text */
        align-items: center; /* Center items when stacked */
        text-align: center; /* Center text when stacked */
    }
    .product-brand-info-section .brand-info-logo-wrap {
        flex-basis: auto; /* Allow it to take natural width */
        max-width: 180px; /* But cap it */
        margin-bottom: 20px;
    }
    .product-brand-info-section .brand-info-text {
        flex-basis: 100%;
        text-align: right; /* Revert to right for RTL text flow when stacked */
    }
    .product-brand-info-section .brand-info-text h3 {
        text-align: right;
    }
}
/* END Product Brand Info Section */

/* ==========================================================================
   9. Product Star Rating (in Summary)
   ========================================================================== */
.alpine-product-summary-sticky .woocommerce-product-rating {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Space below rating before brand/price */
    margin-top: 8px; /* Space above rating, below title */
}

.alpine-product-summary-sticky .woocommerce-product-rating .star-rating {
    font-size: 1em; /* Adjust size as needed, relative to surrounding text */
    color: #FFD700; /* Gold color for stars */
    margin-inline-end: 8px; /* Space between stars and review link */
    line-height: 1; /* Ensure consistent line height */
}

.alpine-product-summary-sticky .woocommerce-product-rating .star-rating span::before {
    color: #FFD700; /* Ensure filled stars are gold */
}

.alpine-product-summary-sticky .woocommerce-product-rating .star-rating::before {
    color: #E0E0E0; /* Color for empty stars */
}

.alpine-product-summary-sticky .woocommerce-product-rating a.woocommerce-review-link {
    font-size: 0.9em;
    color: var(--alpine-text-secondary, #555);
    text-decoration: none;
    transition: color 0.2s ease;
}

.alpine-product-summary-sticky .woocommerce-product-rating a.woocommerce-review-link:hover {
    color: var(--alpine-red, #e0192e);
    text-decoration: underline;
}
.alpine-product-main-content .product-content-section  ul.products.columns-3 {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    gap: 0px;
}

.product-brand-info-section .brand-info-text:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    border: 10px solid transparent;
    border-inline-start: 20px solid #f6f6f6;
}
.single-product.woocommerce div.product div.images img.alpine-brand-logo {
    mix-blend-mode: unset;
    background: none;
    width: 100%;
}


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

/* ==========================================================================
   10. Product Reviews Section
   ========================================================================== */
p.woocommerce-verification-required {
    display: inline-flex;
    gap: 2px;
    font-size: 13px;
    /* background: #f8f9fa; */
    /* border-radius: 8px; */
    /* border: 1px solid #e9ecef; */
    padding: 0;
    width: 100%;
    text-wrap-style: balance;
    line-height: 1.4;
    align-items: center;
    color: #6c757d;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */
    margin: 0px 0;
}

p.woocommerce-verification-required:before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Pro';
    background: #fff;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    width: 28px;
    text-align: center;
    border-radius: 50%;
    flex: 0 0 28px;
    color: #6c757d;
    /* border: 1px solid #dee2e6; */
}
#reviews {
    /* Main wrapper for reviews and form */
}

#comments {
    margin-bottom: 10px; /* Space before review form */
}

#comments h2.woocommerce-Reviews-title {
    font-size: 20px; /* Slightly smaller than main section titles */
    font-weight: 600;
    color: var(--alpine-dark-text, #222);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--alpine-border-color-light, #eee);
}

#comments ol.commentlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

#comments ol.commentlist li.comment {
    padding: 20px 0;
    border-bottom: 1px solid var(--alpine-border-color-light, #f0f0f0);
    display: flex;
    gap: 20px; /* Space between avatar and content */
}
#comments ol.commentlist li.comment:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#comments ol.commentlist li.comment .comment_container {
    flex-grow: 1;
}

#comments ol.commentlist img.avatar {
    width: 50px; /* Avatar size */
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--alpine-border-color-light, #eee);
    padding: 2px;
    background-color: #fff;
    flex-shrink: 0;
}

#comments .comment-text .meta {
    margin-bottom: 10px;
    font-size: 0.9em;
    color: var(--alpine-text-secondary, #555);
}

#comments .comment-text .meta strong.woocommerce-review__author {
    font-weight: 600;
    color: var(--alpine-dark-text, #333);
    margin-inline-end: 5px;
}

#comments .comment-text .meta time.woocommerce-review__published-date {
    font-style: italic;
}

#comments .comment-text .star-rating {
    display: inline-block;
    font-size: 0.9em;
    color: #FFD700;
    margin-bottom: 8px;
    margin-inline-start: 10px; /* RTL: space to the right of author name */
}
#comments .comment-text .star-rating span::before { color: #FFD700; }
#comments .comment-text .star-rating::before { color: #E0E0E0; }

#comments em.woocommerce-review__verified {
    font-size: 0.85em;
    font-style: normal;
    color: #28a745; /* Green for verified */
    margin-inline-start: 8px;
    /* display: inline-block; */ /* If icon is used */
    /* border: 1px solid #28a745; */
    /* padding: 1px 5px; */
    /* border-radius: 3px; */
}
#comments em.woocommerce-review__verified::before {
    content: "\f058"; /* Font Awesome check-circle */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-inline-end: 4px;
}

#comments .description {
    font-size: 1em;
    line-height: 1.6;
    color: var(--alpine-text-main, #444);
}
#comments .description p:last-child {
    margin-bottom: 0;
}

/* No reviews message */
p.woocommerce-noreviews {
    /* padding: 20px; */
    /* background-color: var(--alpine-light-grey, #f8f9fa); */
    /* border: 1px solid var(--alpine-border-color-light, #eee); */
    /* border-radius: var(--alpine-card-border-radius, 6px); */
    /* text-align: center; */
    color: #2c2c2c;
    margin-bottom: 15px;
}

/* Encouragement message for no reviews */
.alpine-no-reviews-encouragement {
    background: linear-gradient(135deg, #fff8e7 0%, #fef3cd 100%);
    border: 1px solid #fbbf24;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.alpine-no-reviews-encouragement::before {
    content: '\f4fc'; /* Lightbulb icon */
    font-family: 'Font Awesome 6 Pro';
    font-weight: 600;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #f59e0b;
    opacity: 0.3;
}

.alpine-no-reviews-encouragement p {
    margin: 0;
    color: #92400e;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    text-align: start;
    padding-right: 50px; /* Make room for the icon */
    text-wrap-style: balance;
}

/* Responsive styles for encouragement message */
@media (max-width: 768px) {
    .alpine-no-reviews-encouragement {
        padding: 16px;
        margin: 16px 0;
        border-radius: 10px;
    }
    
    .alpine-no-reviews-encouragement p {
        font-size: 14px;
        padding-right: 40px;
    }
    
    .alpine-no-reviews-encouragement::before {
        font-size: 20px;
        top: 12px;
        right: 12px;
    }
}

@media (max-width: 480px) {
    .alpine-no-reviews-encouragement {
        padding: 14px;
        margin: 14px 0;
    }
    
    .alpine-no-reviews-encouragement p {
        font-size: 13px;
        padding-right: 35px;
        line-height: 1.5;
    }
    
    .alpine-no-reviews-encouragement::before {
        font-size: 18px;
        top: 10px;
        right: 10px;
    }
}

/* Review Form Styling */
#review_form_wrapper {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid var(--alpine-red, #e0192e);
}

#review_form #respond {
    /* Respond wrapper */
}

#review_form #reply-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--alpine-dark-text, #222);
    margin-bottom: 20px;
}
#review_form #reply-title small a {
    font-size: 0.8em;
    font-weight: 400;
    margin-inline-start: 10px;
}

.comment-form-rating {
    margin-bottom: 20px;
}
.comment-form-rating label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--alpine-dark-text, #333);
}
.comment-form-rating .stars a {
    text-decoration: none;
    color: #E0E0E0; /* Empty star color */
    font-size: 1.6em;
    margin-inline-end: 3px;
    transition: color 0.1s ease;
}
.comment-form-rating .stars a:hover,
.comment-form-rating .stars a.active {
    color: #FFD700; /* Filled star color */
}

.comment-form p {
    margin-bottom: 15px;
}
.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--alpine-dark-text, #333);
    font-size: 0.95em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--alpine-border-color, #ccc);
    border-radius: 4px;
    font-size: 1em;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
    border-color: var(--alpine-red, #e0192e);
    box-shadow: 0 0 0 2px rgba(224, 56, 63, 0.1);
    outline: none;
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.comment-form .form-submit {
    margin-top: 20px;
    text-align: right; /* RTL: align to right */
}

.comment-form input#submit {
    background-color: var(--alpine-red, #e0192e);
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.comment-form input#submit:hover {
    background-color: var(--alpine-dark-text, #1B1B1B);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.comment-form-cookies-consent {
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.comment-form-cookies-consent input[type="checkbox"] {
    width: auto;
    margin-inline-end: 5px;
    flex-shrink: 0;
}

/* Responsive for Reviews */
@media (max-width: 767px) {
    #comments ol.commentlist li.comment {
        flex-direction: column; /* Stack avatar and content */
        align-items: flex-start;
        gap: 15px;
    }
    #comments ol.commentlist img.avatar {
        margin-bottom: 0; /* No margin if stacked */
    }
    .comment-form-rating .stars a {
        font-size: 1.4em;
    }
}

/* Adjustments for WooCommerce-generated review title to complement our H3 */
.product-reviews-section #comments h2.woocommerce-Reviews-title {
    font-size: 1.1em; /* Make it smaller than our H3 */
    font-weight: 500; /* Less prominent than H3 */
    color: var(--alpine-text-secondary, #555);
    margin-top: 15px; /* Add some space above it if our H3 is present */
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: none; /* Remove its border if our H3 implies the section start */
    /* If our H3 is always present, we might not need this H2 at all, 
       but it often contains useful info like "2 reviews for X" */
}

/* If there are NO reviews, and the form title "Be the first to review..." appears, style it similarly */
.product-reviews-section #review_form #reply-title {
    /* This is already styled, but ensure it doesn't clash if h2.woocommerce-Reviews-title is also visible */
    /* If h2.woocommerce-Reviews-title says "Be the first..." then this #reply-title might be redundant or can be hidden */
}

/* END Product Reviews Section */

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

/* ========================================================================== */
/* 12. Discount Percentage Styling                                          */
/* ========================================================================== */

.price .discount-percentage {
    display: inline-block;
    margin-inline-start: 10px; /* RTL aware space from the price */
    color: var(--alpine-red, #e0383f); /* Use your theme's sale/red color */
    font-size: 0.9em;
    font-weight: 700; /* Bold to stand out */
    /* Optional styling: */
    /* background-color: #ffebee; /* Very light red background */
    /* padding: 3px 7px; */
    /* border-radius: 4px; */
    /* border: 1px solid var(--alpine-red, #e0383f); */
}

/* Adjust positioning if price is flex and has screen reader text messing with order */
.woocommerce div.product p.price,
.alpine-product-summary-sticky p.price {
    display: flex; /* Ensure price container is flex */
    flex-wrap: wrap; /* Allow wrapping */
    align-items: baseline; /* Align text baselines */
    margin-bottom: 0px;
    padding-bottom: 10px;
}

/* Ensure screen reader texts don't affect visual flow for discount */
.price .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

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

/* ========================================================================== */
/* 13. Sale Flash (On Sale Badge) Styling                                   */
/* ========================================================================== */

/* General .onsale styles are likely already present from WooCommerce or theme */
/* These are specific to the new structure with percentage */

.woocommerce span.onsale {
    /* Default styles include: position, background, color, padding, border-radius */
    /* Ensure it can hold two spans. Default line-height/padding should be okay. */
    /* display: inline-block; is typical for .onsale */
    height: 70px;
    /* text-align: center; */ /* if not already */
    /* The existing style: 
        min-height: auto;
        left: 10px;
        right: auto;
        top: 20px; (or 115px on product page)
        line-height: 2 or 2.5;
        font-size: 0.9rem;
        background: #e0383f;
        border-radius: 3px;
        opacity: 1;
        padding: 0px 10px;
    */
    display: flex;
    flex-direction: column;
    line-height: 0.9;
    align-items: center;
    justify-content: center;
    width: 70px;
    border-radius: 70px;
}

.onsale .sale-percentage-amount {
    font-weight: 700; /* Make percentage number bolder */
    font-size: 2.1em; /* Slightly larger for emphasis */
    /* margin-inline-end: 0.25em; */ /* Small space between number and text */
}

.onsale .sale-percentage-text {
    font-size: 0.9em; /* Slightly smaller than the number */
    /* opacity: 0.9; */ /* Optional: make text slightly less prominent than number */
}

/* Responsive adjustments or specific positioning for catalog/product page */
/* might be needed depending on how .onsale is globally styled/positioned. */
/* For instance, the `top: 115px` rule for `.woocommerce span.onsale` is very specific */
/* and might need to be scoped to the product page gallery if it causes issues on catalog. */

/* Example of scoping the specific top positioning if needed: */
/* .woocommerce div.product div.images span.onsale { top: 115px; } */
/* ul.products li.product span.onsale { top: 10px; right: 10px; left: auto; } /* More typical for catalog */

/* ========================================================================== */
/* 14. Google Reviews Section                                                 */
/* ========================================================================== */

.google-reviews-section.full-width-section {
    clear: both;
    padding: 40px; /* Consistent with .related.products */
    margin-top: 40px;  /* Consistent with .related.products */
    /* border-top: 1px solid var(--alpine-border-color-light, #eee); */
    /* max-width: 1290px; /* If you want to constrain width like related products */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

.google-reviews-section .section-title {
    font-size: 20px; /* Consistent with .related.products > h2 */
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center; /* Or inherit/right for RTL */
    color: var(--alpine-heading-color, #333);
    position: relative; /* For potential pseudo-elements if needed for styling like related product titles */
}

/* Ensure the Trustindex output is centered if it's not by default */
.google-reviews-section .trustindex-widget {
    margin-left: auto;
    margin-right: auto;
}

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


.woocommerce div.product div.images.woocommerce-product-gallery span.onsale {
    top: 10px;
}

@media (max-width:767px) {
    .alpine-product-summary-sticky .product-summary-breadcrumb {
        margin: 10px 0px 10px;
        border-bottom: #f1f1f1 1px solid;
    }
    
    .woocommerce .alpine-product-summary-sticky-content  span.onsale {top: auto;}
        
    .alpine-product-meta-icons-brand .meta-item .meta-text {
        padding: 3px 0px;
        font-size: 12px;
        line-height: 1.3;
    }
    
    .alpine-product-main-content {
        padding: 0;
        margin-bottom: 0;
    }
    
    .xoo-wsc-basket {
        bottom: 0px !important;
        /* left: 0px; */
    }
    
    .single-product .related.products {
        margin-top: 0px;
        padding-top: 0;
    }
    
    .product-content-section.product-brand-info-section {
        margin-block: 0px;
    }
    
    .google-reviews-section.full-width-section {
        padding: 40px 30px 0px;
    }
    .product-videos-list iframe {
        height: 50vw;
        /* margin-inline-start: 0px; */
        /* width: -webkit-fill-available; */
    }
    
    .woocommerce div.product div.images .flex-control-thumbs {
        overflow-x: scroll;
        max-width: 100vw;
        z-index: 11111;
        width: 100vw;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li img {
        width: 80px;
        height: 80px;
        padding: 10px;
    }
    
    .flex-viewport {
        width: 100vw;
        height: 100vw;
        box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.5);
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 80px;
        height: 80px;
        flex: 0 0 80px;
    }
    
    .woocommerce ul.products li.product .onsale {
        transform: scale(0.7);
        transform-origin: top left;
    }
}

body { overscroll-behavior-y: none; }

/* SIMPLIFIED Color Variation Swatches */
.alpine-color-variation-swatches {
    margin: 10px 0;
}

.color-swatches-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.color-swatch {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer !important;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    pointer-events: auto !important; /* Force clickable */
    margin: 2px;
}

.color-swatch:hover {
    border-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.color-swatch.selected {
    border-color: #000 !important;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

/* Remove disabled state restrictions - make all swatches clickable */
.color-swatch.disabled {
    opacity: 0.7;
    cursor: pointer !important; /* Still clickable */
    pointer-events: auto !important; /* Force clickable */
}

.color-swatch.disabled:hover {
    border-color: #666;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.color-swatch.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.color-swatch.has-color .color-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

.color-swatch.has-placeholder .color-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
}

.color-swatch .swatch-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: rgba(255,255,255,0.9);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.color-swatch:hover .swatch-label {
    opacity: 1;
}

/* RTL Support */
[dir="rtl"] .color-swatches-container {
    direction: rtl;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .color-swatch {
        width: 40px;
        height: 40px;
    }
    
    .color-swatches-container {
        gap: 6px;
    }
    
    .color-swatch.has-color .color-circle {
        width: 28px;
        height: 28px;
    }
}

/* Integration with WooCommerce variations table */
.woocommerce div.product form.cart .variations td.value {
    vertical-align: top;
}

.woocommerce div.product form.cart .variations td.value .alpine-color-variation-swatches {
    margin: 0;
}

/* Reset variations link positioning */
.alpine-color-variation-swatches + .reset_variations {
    margin-top: 10px;
    display: inline-block;
}

/* Force clickable state for all swatches */
.color-swatch {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.color-swatch * {
    pointer-events: none; /* Prevent child elements from blocking clicks */
}

/* UNIVERSAL Variation Boxes - Works for ALL attribute types */
.alpine-variation-boxes {
    margin: 10px 0;
}

.variation-boxes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0px;
}

.variation-box {
    position: relative;
    min-width: 50px;
    min-height: 50px;
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    cursor: pointer !important;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    pointer-events: auto !important;
    padding: 8px;
    box-sizing: border-box;
}

.variation-box:hover {
    border: 2px solid #e0383f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 90, 160, 0.2);
}

.variation-box.selected {
    border-color: transparent;
    border-width: 2px;
    box-shadow: 0 0 0 2px #e0383f;
    background: #f3f3f3;
}

/* Color variations with images */
.variation-box.has-image {
    padding: 0;
    width: 50px;
    height: 50px;
}

.variation-box.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    object-position: center;
    /* background: #fff; */
    mix-blend-mode: multiply;
}

/* Color variations with color circles */
.variation-box.has-color {
    width: 50px;
    height: 50px;
    padding: 0;
}

.variation-box.has-color .color-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Color placeholders */
.variation-box.has-placeholder {
    width: 50px;
    height: 50px;
}

.variation-box.has-placeholder .variation-placeholder {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
}

/* Text-based variations (sizes, materials, etc.) */
.variation-box.has-text {
    min-width: 50px;
    height: 50px;
    padding: 8px 12px;
    min-height: 50px;
}

.variation-box.has-text .variation-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    white-space: nowrap;
}

.variation-box.has-text.selected .variation-text {
    color: #000;
}

/* Labels that appear on hover */
.variation-box .box-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: rgba(255,255,255,0.9);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
    height: -webkit-fill-available;
}

.variation-box:hover .box-label {
    opacity: 0;
}

/* Hide labels for text-based variations since the text is already visible */
.variation-box.has-text .box-label {
    display: none;
}

/* RTL Support */
[dir="rtl"] .variation-boxes-container {
    direction: rtl;
}

.woocommerce .cwginstock-panel-heading h4 {
    margin: 0;
} 

.form-group.center-block {
    display: flex;
    gap: 16px;
    margin-top: 15px;
}

.form-group.center-block input.cwgstock_email, .form-group.center-block input.cwgstock_name {
    unicode-bidi: plaintext;
    text-align: start !important;
    margin-bottom: 10px;
    line-height: 40px;
    padding: 0px 10px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #BBB;
}

body.single-product .cwginstock-subscribe-form .panel-primary>.panel-heading:before {
    content: '';
    position: absolute;
    bottom: 100%;
    inset-inline-start: 20px;
    border: 10px solid transparent;
    border-bottom: 10px solid #e0383f;
}

.woocommerce .cwginstock-panel-heading h4 {
    font-size: 16px;
}

.form-group.center-block {
    flex-direction: column;
    gap: 0;
    margin: 0px 0px 5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .variation-box {
        min-width: 40px;
        min-height: 40px;
    }
    
    .variation-box.has-image,
    .variation-box.has-color,
    .variation-box.has-placeholder {
        width: 50px;
        height: 50px;
    }
    
    .variation-box.has-text {
        min-width: 50px;
        height: 50px;
        padding: 6px 10px;
    }
    
    .variation-box.has-text .variation-text {
        font-size: 16px;
    }
    
    .variation-boxes-container {
        gap: 6px;
    }
    
    .variation-box.has-color .color-circle {
        width: 28px;
        height: 28px;
    }
}

/* Integration with WooCommerce variations table */
.woocommerce div.product form.cart .variations td.value {
    vertical-align: top;
}

.woocommerce div.product form.cart .variations td.value .alpine-variation-boxes {
    margin: 0;
}

/* Reset variations link positioning */
.alpine-variation-boxes + .reset_variations {
    margin-top: 10px;
    display: none !important;
}

/* Force clickable state for all boxes */
.variation-box {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.variation-box * {
    pointer-events: none; /* Prevent child elements from blocking clicks */
}

/* Backward compatibility - keep old color swatch styles working */
.alpine-color-variation-swatches {
    margin: 10px 0;
}

.color-swatches-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.color-swatch {
    position: relative;
    width: 50px;
    height: 50px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer !important;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    pointer-events: auto !important;
}
.variation-boxes-container {
    margin-top: 7px;
}

@media (max-width: 768px) {
    .alpine-product-summary-sticky-content {
        display: flex;
        flex-direction: column;
    }
}

/* Styling for disabled variation boxes */
.alpine-variation-boxes .variation-box.variation-box-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none !important; /* Make sure it's truly not clickable */
    border-color: #d3d3d3 !important; /* Lighter border */
    box-shadow: none !important; /* Remove hover shadow if any */
}

/* Optional: Slightly different look for disabled image/color types */
.alpine-variation-boxes .variation-box.has-image.variation-box-disabled img,
.alpine-variation-boxes .variation-box.has-color.variation-box-disabled .color-circle,
.alpine-variation-boxes .variation-box.has-placeholder.variation-box-disabled .variation-placeholder {
    filter: grayscale(80%); /* Example: make it look more desaturated */
}

.alpine-variation-boxes .variation-box.has-text.variation-box-disabled .variation-text {
    color: #999 !important; /* Lighter text for disabled text boxes */
}

/* Ensure selected state is removed if it becomes disabled */
.alpine-variation-boxes .variation-box.variation-box-disabled.selected {
    border-color: #d3d3d3 !important; /* Non-selected border */
    /* Add any other styles to override selected look when disabled */
    /* For example, if selected has a specific background: */
    /* background-color: transparent !important; */
}

/* Ensure child pointer events are off for general boxes too if not handled by variation-box-disabled */
.alpine-variation-boxes .variation-box > * {
    pointer-events: none;
}

/* Brand Logo Overlay Styles */
.alpine-product-image-container {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
}

.alpine-brand-logo-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    pointer-events: none; /* Don't interfere with image clicks */
    max-width: 17%;
    max-height: 17%;
}

.alpine-brand-logo {
    max-width: 60px;
    max-height: 40px;
    width: auto;
    height: auto;
    opacity: 0.5; /* חצי שקוף */
    filter: grayscale(100%); /* אפור */
    transition: opacity 0.3s ease, filter 0.3s ease;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Hover effect - make less transparent and restore some color */
.alpine-product-image-container:hover .alpine-brand-logo {
    opacity: 0.8;
    filter: grayscale(70%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alpine-brand-logo {
        max-width: 45px;
        max-height: 30px;
    }
    
    .alpine-brand-logo-overlay {
        bottom: 6px;
        right: 6px;
    }
}

@media (max-width: 480px) {
    .alpine-brand-logo {
        max-width: 35px;
        max-height: 25px;
    }
    
    .alpine-brand-logo-overlay {
        bottom: 4px;
        right: 4px;
    }
}

/* Specific adjustments for single product page */
.single-product .alpine-brand-logo {
    max-width: 80px;
    max-height: 55px;
}

/* Specific adjustments for product loops (shop, category pages) */
.woocommerce-loop-product__link .alpine-brand-logo {
    max-width: 50px;
    max-height: 35px;
}

/* Specific adjustments for frequently bought together section */
.frequent-product-item .alpine-brand-logo {
    max-width: 40px;
    max-height: 28px;
}

/* Specific adjustments for related products */
.related.products .alpine-brand-logo,
.up-sells .alpine-brand-logo,
.cross-sells .alpine-brand-logo {
    max-width: 50px;
    max-height: 35px;
}

/* Thumbnail Click Interaction - CSS for active state */
.alpine-gallery-layout .flex-control-thumbs li.active {
    border-color: var(--alpine-primary, #007bff);
}

.alpine-gallery-layout .flex-control-thumbs li.active img {
    opacity: 1;
}

/* Basic interaction styles */
.alpine-gallery-layout .flex-control-thumbs li {
    cursor: pointer;
}

/* Thumbnails Row */
.alpine-gallery-layout .thumbnails-row {
    display: flex;
    gap: 12px;
    /* position: relative; */
    padding: 10px 0;
    align-items: center;
}

/* Animated main image transitions */
.alpine-gallery-layout .main-image-container img:not(.alpine-brand-logo) {
    transition: opacity 180ms ease, -webkit-transform 200ms ease;
    transition: transform 200ms ease, opacity 180ms ease;
    transition: transform 200ms ease, opacity 180ms ease, -webkit-transform 200ms ease;
    opacity: 0;
}
.alpine-gallery-layout .main-image-container img:not(.alpine-brand-logo).active {
    opacity: 1;
}
.alpine-gallery-layout .main-image-container img.alpine-fade-out:not(.alpine-brand-logo) {
    opacity: 0;
}
.alpine-gallery-layout .main-image-container img.alpine-pre-enter:not(.alpine-brand-logo) {
    opacity: 0;
    -webkit-transform: translateX(var(--alpine-shift, 8px));
            transform: translateX(var(--alpine-shift, 8px));
}

.alpine-gallery-layout .thumbnail-item {
    flex: 0 0 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: #f8f9fa;
}

.alpine-gallery-layout .thumbnail-item img,
.alpine-gallery-layout .thumbnail-item .thumbnail-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.3s ease;
    max-width: none !important;
    max-height: none !important;
}

.alpine-gallery-layout .thumbnail-item:hover {
    border-color: #e0383f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 90, 160, 0.2);
}

.alpine-gallery-layout .thumbnail-item.active {
    border-color: #e0383f;
    box-shadow: 0 0 0 1px #e0383f;
}

/* Gallery Indicators */
.alpine-gallery-layout .gallery-indicators {
    position: absolute;
    right: 0;
    top: 50%;
    margin: auto;
    transform: translateY(-70%);
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* background: rgba(255, 255, 255, 0.95); */
    padding: 8px 8px;
    border-radius: 12px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    /* border: 1px solid rgba(0, 0, 0, 0.05); */
    display: none;
}

.alpine-gallery-layout .gallery-dot {
    width: 11px;
    height: 18px;
    border-radius: 3px;
    background: rgb(167 167 167 / 47%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.alpine-gallery-layout .gallery-dot.active {
    background: #e0383f;
    /* transform: scale(1.3); */
    height: 30px;
    /* margin: auto 7px; */
}

.alpine-gallery-layout .gallery-dot:hover {
    background: #dddddd;
    /* transform: scale(1.2); */
}

/* ===== Hide Color Swatches on Mobile ===== */
@media (max-width: 768px) {
  .color-swatches-container,
  .color-swatch,
  .color-image-swatch,
  .color-placeholder,
  .color-circle,
  .swatch-label {
    display: none !important;
    visibility: hidden !important;
  }
}