/* product listing 06/11/2025*/
/*.container {
    height: 100%;
}10112025
 */

@media (max-width: 600px) {
    .login__card {
        max-width: 90%;
        margin: 0 auto;
    }

    .login__wrapper {
        background: linear-gradient(191deg, rgba(18, 157, 193, 0.78) 11.73%, rgba(18, 157, 193, 0.00) 131.37%) !important;
    }
}
/*27 apr*/
@font-face {
    font-family: 'Roboto';
    src: url('/ecatalog font/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-style: normal;
}

.variant__img {
    --angle: 0deg;
    z-index: 2;
    margin-bottom: 8px;
    height: 325px; /*0711*/
    border-radius: 8px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--angle), #FFFFFF40 10%, #182D7040, #00A0DD40, #FFDD0040) border-box;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
}
.variant {
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 20px;
    padding: 38px 12px 0px;
}
.variant__img:hover {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--angle), #FFFFFF 10%, #182D70, #00A0DD, #FFDD00) border-box;
    border: 3px solid transparent;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation: rotate-gradient 10s linear infinite;
}

/* product listing 06/11/2025*/


/* Search page 29/11/2025*/
.product-image img {
    height: 140px;
    width: auto;
    object-fit: contain;
}


 /* Search page 29/11/2025*/

 /* goto top 30102025*/

a.top button {
    background: none;
    border: none;
    color: white;
    position: relative;
    left: 11px;
}

#scrollToTopBtn {
    position: fixed;
    bottom: 20px; /* Distance from the bottom */
    right: 20px; /* Distance from the right */
    background-color: #03aad4; /* Blue background */
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 30px;
    cursor: pointer;
    display: none; /* Initially hidden */
    transition: opacity 0.3s ease;
    z-index: 9999; /*04112025 to manage image view */
}
/* backtotop 30102025*/
 /* Honeycomb brand cataloque 29/11/2025*/
.body-background {
    background: linear-gradient(180deg, #e6f3ff 0%, #fff8dc 100%);
    background-attachment: fixed;
    margin: 0;
    /*font-family: sans-serif;
    26112025 min-height: 100vh;*/
    font-family: 'Roboto';
    position: relative;
}

    .body-background::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/images/ecatalog/hexagon-image/Bg@2x.png"), url("/images/ecatalog/hexagon-image/Bg.png");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
        z-index: -3;
    }

    .body-background::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 20%;
        background: url("/images/ecatalog/hexagon-image/Pattern.png");
        background-size: contain;
        background-position: center top;
        background-repeat: repeat-x;
        z-index: -2;
    }

.honeycomb {
    --cell-size: 180px;
    --cell-gap: 20px;
    --cell-color: transparent;
    display: flex;
    gap: calc(0.866
    /* cos(30deg) */
    * var(--cell-gap));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    background: transparent;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    margin: 0 auto;
    height: 100%; /* 25112025*/
}

    .honeycomb .row {
        display: flex;
        gap: var(--cell-gap);
        justify-content: center;
        position: relative;
        margin-bottom: 8px;
        z-index: 1;
        padding-left: 0;
        width: 60%;
    }

        .honeycomb .row:nth-child(2) {
            margin-top: -10px;
        }

        .honeycomb .row:nth-child(3) {
            margin-top: -15px;
        }

        /* Cell sizing pattern: even and beautiful */
        .honeycomb .row:nth-child(1) li:nth-child(1) {
            width: 170px;
        }

        /* even left */
        .honeycomb .row:nth-child(1) li:nth-child(2) {
            width: 190px;
        }

        /* big middle */
        .honeycomb .row:nth-child(1) li:nth-child(3) {
            width: 190px;
        }

        /* big middle */
        .honeycomb .row:nth-child(1) li:nth-child(4) {
            width: 170px;
        }

        /* even right */
        .honeycomb .row:nth-child(1) li:nth-child(5) {
            width: 170px;
        }

        /* even right */

        .honeycomb .row:nth-child(2) li:nth-child(1) {
            width: 170px;
        }

        /* even left */
        .honeycomb .row:nth-child(2) li:nth-child(2) {
            width: 180px;
        }

        /* medium */
        .honeycomb .row:nth-child(2) li:nth-child(3) {
            width: 200px;
        }

        /* big middle */
        .honeycomb .row:nth-child(2) li:nth-child(4) {
            width: 200px;
        }

        /* big middle */
        .honeycomb .row:nth-child(2) li:nth-child(5) {
            width: 180px;
        }

        /* medium */
        .honeycomb .row:nth-child(2) li:nth-child(6) {
            width: 170px;
        }

        /* even right */

        .honeycomb .row:nth-child(3) li:nth-child(1) {
            width: 170px;
        }

        /* even left */
        .honeycomb .row:nth-child(3) li:nth-child(2) {
            width: 190px;
        }

        /* big middle */
        .honeycomb .row:nth-child(3) li:nth-child(3) {
            width: 190px;
        }

        /* big middle */
        .honeycomb .row:nth-child(3) li:nth-child(4) {
            width: 170px;
        }

        /* even right */
        .honeycomb .row:nth-child(3) li:nth-child(5) {
            width: 170px;
        }

    /* even right */

    .honeycomb li {
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1.1547;
        position: relative;
        width: var(--cell-size);
        outline: none;
    }

    .honeycomb ul.row li .cell {
        position: absolute;
        z-index: 1;
        aspect-ratio: 0.866;
        width: 100%;
        clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
        overflow: hidden;
        background: url("/images/ecatalog/hexagon-image/Hover-Logo.png"), var(--cell-color);
        background-size: contain, contain;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        color: white;
        font-weight: bold;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        transform: scale(var(--scale, 1));
        border: none;
        outline: none;
        will-change: transform;
    }

        .honeycomb ul.row li .cell.hovered {
            position: relative;
            filter: drop-shadow(0 0 8px #4a90e2);
            transition: filter 0.2s ease, background 0.2s ease;
            z-index: 15;
            background: url("/images/ecatalog/hexagon-image/hover-bg.png");
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }

            /* Brand logos on hover - layered over hover-bg.png */

            .honeycomb ul.row li .cell.hovered::before {
                content: "";
                position: absolute;
                top: -2px;
                left: -2px;
                width: 8px;
                height: 8px;
                background: #4a90e2;
                clip-path: polygon(0 0, 100% 0, 0 100%);
                z-index: 20;
                clip-path: none !important;
            }

            .honeycomb ul.row li .cell.hovered::after {
                content: "";
                position: absolute;
                top: -2px;
                right: -2px;
                width: 8px;
                height: 8px;
                background: #4a90e2;
                clip-path: polygon(0 0, 100% 0, 100% 100%);
                z-index: 20;
                clip-path: none !important;
            }

    .honeycomb ul.row li .cell {
        transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        position: relative;
        z-index: 2;
    }

        .honeycomb ul.row li .cell:hover {
            z-index: 10;
        }

    .honeycomb .brand-logo {
        width: 65%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        z-index: 2;
        position: relative;
    }


    .honeycomb ul.row li .cell.highlighted {
        background: var(--cell-color);
    }

    .honeycomb ul.row li .cell.empty {
        background: url("/images/ecatalog/hexagon-image/Hover-Logo.png"), var(--cell-color);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        border: none;
        outline: none;
    }

.header {
    background-color: #fff;
}
 

/*29/11/2025*/
.py-40px {
    padding: 40px 0;
}

hr {
    margin: 20px 0;
}

.pb-60px {
    padding-bottom: 60px;
}

.brand-wrapper {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    /* margin-bottom: 14px; */
    /* margin-bottom: 40px; */
}

.brand-search {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.brand-search__country {
    display: flex;
    width: 153px;
    padding: 8px 20px;
    align-items: center;
    border-radius: 40px;
    border: 1px solid #bcbcbc;
    color: var(--Main-Content-Text-Body-Text, #333);
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    gap: 10px;
    cursor: pointer;
}

.flag-icon {
    height: 24px;
}

.brand-search__arrow {
    transition: 0.2s;
}

.down-arrow {
    transform: rotate(180deg);
}

.brand-search__country select {
    border: 0;
    outline: 0;
    color: var(--Main-Content-Text-Body-Text, #333);
    text-align: center;
    /*font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
}

.brand-search__input {
    display: flex;
    width: 266px;
    padding: 8px 20px;
    align-items: center;
    gap: 4px;
    border-radius: 40px;
    border: 1px solid #bcbcbc;
    justify-content: center;
}

    .brand-search__input input {
        transition: 0.3s;/*30102025*/
    border: 0;
    outline: 0;
}

.brand-logo {
    width: 180px;
    height: 40px;
    cursor: pointer;
}

.brand__header {
    display: flex;
    justify-content: space-between;
}

    .brand__header span {
        display: flex;
        gap: 20px;
        visibility: hidden;
    }

        .brand__header span > button {
            background: transparent;
            border: 0;
        }

.product {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 10px 20px 0px rgba(40, 49, 52, 0.06);
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
    transition: 0.9s ease;
}

    .product:hover {
        box-shadow: 0px 10px 20px 0px rgba(40, 49, 52, 0.12);
    }

.brand-group {
    position: relative;
}

.brand-group__title {
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 20px;
    margin-bottom: 0px;
}

.product-filter__sidebar {
    min-height: 400px;
    position: sticky;
    top: 0;
}

.brand-search__result,
.brand-country__result {
    position: absolute;
    width: 100%;
    z-index: 1;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 20px 20px 40px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

    .brand-country__result ul {
        width: 100%;
        padding: 12px 0 !important;
    }

        .brand-country__result ul li:hover {
            background: #def3f8;
        }

    .brand-country__result.open {
        max-height: 120px !important;
        padding: 0px !important;
    }

    .brand-search__result.open,
    .brand-country__result.open {
        max-height: 400px;
        padding: 20px 20px 10px 20px;
        opacity: 1;
        z-index: 3;
        overflow-y: auto;
    }

    .brand-search__result ul,
    .brand-country__result ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .brand-country__result ul li {
            padding: 4px 10px 4px 20px !important;
        }

        .brand-search__result ul li,
        .brand-country__result ul li {
            display: flex;
            gap: 5px;
            align-items: center;
            color: var(--suntory-brand-grey, #121212);
           /*font-family: "Noto Sans Thai";*/
            font-family: "Roboto";
            font-size: 16px;
            font-style: normal;
            /* font-weight: 700; */
            line-height: 150%;
            padding-bottom: 8px;
            cursor: pointer;
        }

        .brand-country__result ul li {
            padding: 5px 3px;
            justify-content: stretch;
        }

    .brand-search__result a,
    .brand-country__result a {
        color: var(--suntory-brand-grey, #121212);
        text-decoration: none;
    }

    .brand-search__result ul li a:hover,
    .brand-country__result ul li a:hover {
        color: #038fb1;
    }

.product-filter__sidebar {
    padding: 32px 20px 40px 60px;
}

.product-filter__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product-filter__title {
    color: #000;
    text-align: center;
   /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0;
}

.product-filter__subtitle {
    color: #000;
    /*font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    opacity: 0.5;
    margin-bottom: 0;
    padding-bottom: 16px;
}

.product-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-filter-subgroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.brand {
    border-radius: 20px;
    border-left: 1px solid #d1e6ef;
    background: #f6fbfd;
    padding: 20px 80px 80px 40px;
}

.brand__about {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .brand__about .brand__title {
        color: #000;
        font-family: Roboto;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 0;
    }

    .brand__about .brand__description {
        color: #000;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        opacity: 0.7;
        margin-bottom: 0;
    }

.brand__products-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0px;
    margin-bottom: 20px;
}

    .brand__products-header .brand__products-count {
        color: #000;
       /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        opacity: 0.5;
        margin-bottom: 0;
    }

    .brand__products-header .brand__download-button {
        color: #038fb1;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        border: 0;
        background: none;
    }

.product-filter__checkbox {
    width: 24px;
    height: 24px;
    accent-color: #038bab;
}

.product-filter__clear {
    color: #038fb1;
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    border: none;
    background: none;
}

.product__image {
    min-height: 260px;
    max-height: 100%;
    position: relative;
    background-position: bottom;
    align-content: center;
    text-align: center;
    z-index: 0;
}

.wave-group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
}

.layer-bg-wave-1,
.layer-bg-wave-2,
.layer-bg-wave-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-repeat-x: repeat;
    height: 100%;
    width: 100%;
    transition: background-position 2s forwards ease-in-out;
}

/* layer position */

    .layer-bg-wave-1 {
    background-image: url("../assets/wave/new-wave.svg");
    background-position: 10% bottom;
}

.layer-bg-wave-2 {
    background-image: url("../assets/wave/new-wave.svg");
    background-position: 50% bottom;
}

.layer-bg-wave-3 {
    background-image: url("../assets/wave/new-wave.svg");
    background-position: 80% bottom;
}

/* triggering animation on hover */
.product:hover .layer-bg-wave-1 {
    animation: move-wave-1 1s 0.1s forwards ease-in-out;
}

.product:hover .layer-bg-wave-2 {
    animation: move-wave-2 1s 0.2s forwards ease-in-out;
}

.product:hover .layer-bg-wave-3 {
    animation: move-wave-3 1s 0.3s forwards ease-in-out;
}

/* animation keyframe */
@keyframes move-wave-1 {
    0% {
        background-position: 10% bottom;
    }

    100% {
        background-position: 30% bottom;
    }
}

@keyframes move-wave-2 {
    0% {
        background-position: 50% bottom;
    }

    100% {
        background-position: 30% bottom;
    }
}

@keyframes move-wave-3 {
    0% {
        background-position: 80% bottom;
    }

    100% {
        background-position: 100% bottom;
    }
}

.product__image img {
    height: 210px;
}

.product__content {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
}

    .product__content .product__title {
        color: #038fb1;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        margin-bottom: 0;
    }

    .product__content .product__description {
        color: #000;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        margin-bottom: 0;
    }

.brand-group__list {
    display: flex;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 20px;
    margin: 0 auto;
    max-width: 100%;
    width: fit-content;
    scroll-snap-type: x mandatory;
}

    .brand-group__list::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: #5ac2dc;
        opacity: 0.2;
        bottom: 0;
        left: 0;
    }

.brand-group__card {
    position: relative;
    text-align: center;
    cursor: pointer;
    padding-bottom: 10px;
}

.active.brand-group__card::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    background: #5ac2dc;
    left: 0;
    bottom: 0;
}

.brand-group__name {
    color: #000;
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0px;
    opacity: 0.5;
}

.active .brand-group__name {
    font-weight: 700;
    opacity: 1;
}

.brand-group__wrapper {
    height: 170px;
    width: 170px;
    background-size: contain;
    background-position: 50% 50%;
    background-image: url("../assets/product_bg_withoutstrike.webp");
    background-repeat: no-repeat;
    align-content: center;
    margin-bottom: 8px;
}

.active .brand-group__wrapper {
    background-image: url("../assets/product_bg_withstrike.webp");
}

.brand-group__image {
    width: 105px;
    height: 113px;
    object-fit: cover;
}

/* product detail */
.breadcrumb {
    margin-bottom: 0;
    background-color: rgba(90, 194, 220, 0.1);
}

    .breadcrumb .breadcrumb-item {
        color: #969696;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .breadcrumb .breadcrumb__list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 16px;
        margin-bottom: 0;
        column-gap: 30px;
    }

    .breadcrumb .breadcrumb__link {
        text-decoration: none;
        color: #038fb1;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

        .breadcrumb .breadcrumb__link::after {
            content: "";
            background-image: url("../assets/arrow.svg");
            background-repeat: no-repeat;
            position: absolute;
            height: 20px;
            width: 28px;
            background-position: 60% 80%;
        }

.product-detail {
    position: relative;
    display: flex;
    border-radius: 30px;
    border: 1px solid #eaeaea;
    background: #f6fbfd;
    align-items: center;
    height: 320px;
    max-width: 100%;
    overflow: hidden;
}

    .product-detail::after {
        content: "";
        position: absolute;
        background-image: url("../assets/product-overlay-bg.webp");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position-y: 130px;
        height: 100%;
        width: 100%;
        inset: 0;
    }

.product-detail__image {
    z-index: 1;
    height: 290px;
    margin: 0 auto;
}

.product-detail-content {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

    .product-detail-content::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 18px;
        opacity: 0.3;
        background: #038fb1;
        right: 180px;
        top: auto;
        bottom: auto;
    }

.product-detail__header {
    padding: 20px 0;
}

.product-detail__title {
    padding-bottom: 0px;
    color: #000;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.product-detail__subtitle {
    padding-bottom: 0px;
    color: #000;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.product-detail-content__btn {
    background-color: transparent;
    border: 0;
    color: var(--suntory-brand-dark, #038fb1);
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    padding: 0;
    line-height: 150%;
}

.product-detail__group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-detail__list {
    padding-bottom: 20px;
}

.product-detail__table {
    width: 100%;
}

    .product-detail__table tr td {
        color: #000;
        padding: 8px 0;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

.product-detail__btn {
    border-radius: 24px;
    background: var(--suntory-brand-dark, #038fb1);
    display: flex;
    height: 48px;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border: 0;
    color: var(--Full-White, #fff);
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    width: 100%;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.product-detail__table tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .product-detail__table tr td:first-child {
        color: #000;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 150%;
    }

.product-tabs__group .product-tabs__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-tabs__group .product-tabs__item.active-tab {
    color: var(--Brand-Dark, #038FB1);
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 24px */
}


.active-tab {
    border-bottom: 2px solid #038fb1;
}

.product-tabs__group .product-tabs__item {
    color: #000;
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    display: flex;
    padding: 16px 0 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    background-color: #f7f7f7;
    cursor: pointer;
}

.about-product__table {
    width: 100%;
}

    .about-product__table tr td:first-child {
        width: 30%;
        color: var(--suntory-brand-grey, #121212);
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .about-product__table tr th {
        padding: 15px;
        border: 1px solid var(--superlightgray, #E6E6E6);
        background: rgba(3, 143, 177, 0.05);
        color: var(--Brand-Dark, #038FB1);
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .about-product__table tr td {
        padding: 15px;
        color: var(--suntory-brand-mid-grey, #636363);
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        word-break: break-word;
    }

    .about-product__table tr {
        border: 1px solid#E6E6E6;
        background: #fff;
    }

        .about-product__table tr:nth-child(even) {
            border: 1px solid var(--superlightgray, #E6E6E6);
            background: rgba(99, 99, 99, 0.03);
        }

.about-product__title,
.about__advertisement-title {
    color: #000;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    padding-bottom: 16px;
    margin-bottom: 0px;
    justify-content: space-between;
    display: flex;
}

.about > * {
    padding-bottom: 40px;
}

.about__advertisement-image {
    width: 100%;
}

.about__advertisement .col-lg-6:not(:last-child) .about__advertisement-image {
    padding-bottom: 20px;
}

.product-filter__btn-group {
    display: none;
    padding: 20px 0 16px;
    position: relative;
}

    .product-filter__btn-group::after {
        content: "";
        position: absolute;
        opacity: 0.1;
        background: #000;
        top: 0;
        height: 1px;
        width: 100%;
    }

.product-filter__cancel-btn,
.product-filter__apply-btn {
    border: none;
    width: 100%;
    color: #636363;
    text-align: center;
  /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    background-color: transparent;
}

.about-product__table tbody ul {
    padding-left: 0;
    list-style: none;
}

    .about-product__table tbody ul li:not(:last-child) {
        padding-bottom: 18px;
    }

.product-filter__apply-btn {
    color: #038fb1;
}

.active--option {
    color: #038fb1;
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

/* product detail */

/* dropdown hightlight section */
.product-tabs__group--mobile {
    display: none;
}

.dropdown-container {
    padding: 20px 0px 0px 0px;
}

    .dropdown-container .dropdown-selecter {
        display: flex;
        padding: 4px 20px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        border: 1px solid var(--cbd-grey-gray-4, #bdbdbd);
    }

        .dropdown-container .dropdown-selecter p {
            color: #121212;
            /* font-family: "Noto Sans Thai";*/
            font-family: "Roboto";
            font-size: 10px;
            font-style: normal;
            font-weight: 700;
            line-height: 16px;
            margin-bottom: 0;
            opacity: 0.5;
        }

        .dropdown-container .dropdown-selecter .selected-item {
            color: var(--suntory-brand-dark, #038fb1);
            /* font-family: "Noto Sans Thai";*/
            font-family: "Roboto";
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%;
        }

    .dropdown-container .option-list {
        display: none;
        margin: 5px auto;
        width: 100%;
        max-height: 130px;
        list-style: none;
        overflow: auto;
        border: 1px solid #ddd;
        background-color: #fff;
        padding: 3px 0;
        border-radius: 6px;
        transform: scale(1);
        transition: 0.5s;
    }

        .dropdown-container .option-list.open {
            display: block;
        }

        .dropdown-container .option-list li {
            padding: 3px 10px;
            font-weight: 600;
            opacity: 0.5;
        }

.filter_icon {
    transform: rotate(90deg);
}

    .filter_icon.open-icon {
        transform: rotate(-90deg);
    }

.product-filter-subgroup label {
    cursor: pointer;
}

.product-filter-subgroup ul {
    list-style: none;
    padding-bottom: 0;
}

.product-filter__option ~ ul {
    position: relative;
}

    .product-filter__option ~ ul::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 2px;
        background: #5ac2dc;
        top: 0;
        left: 10px;
    }

.product-filter-subgroup > ul {
    padding-left: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.product-filter-subgroup ul li > label {
    margin-bottom: 24px;
}

.product img {
    transition: 1s 0.1s ease transform;
}

.product:hover img {
    transform: scale(1.1);
}

/* dropdown hightlight section */

/* tempfix */
.brand-search__country span {
    display: flex;
    gap: 10px;
}

.product-detail--wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-detail__list {
    flex: 1;
}
/*23122025 filetype in visuels*/
.thumbnail-wrapper {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 10px;
    width: 212px;
}

.tableVariant__assests .thumbnail-wrapper {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 20px 0;
}
/*23122025 filetype in visuels*/
.thumbnail-card {
    width: 212px; /*-------30102025------*/
    height: 212px; /*-------30102025------*/
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    background-color: #fff;
}

    .thumbnail-card::after {
        content: "";
        position: absolute;
        opacity: 0;
        background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.75) 38.12%, rgba(0, 0, 0, 0) 100%);
        width: 212px; /*-------30102025------*/
        /*--- height: 0px;---*/
        inset: 0;
        height: 65px;
        transition: 0.3s;
    }

    .thumbnail-card:hover::after {
        opacity: 0.5;
    }

    .thumbnail-card:hover .download-icon,
    .thumbnail-card:hover .view-icon {
        z-index: 1;
        opacity: 1;
    }

.thumbnail-card__image {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.thumbnail-filetype {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #333 !important;
    display: block !important;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 4px 0;
    font-weight: 500;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.4;
}

.download-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
    opacity: 0;
    transform: translate(-45px, 10px);
    transition: 0.2s;
}

.view-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: 0.2s;
}

.about__product .offcanvas {
    width: 580px;
}

.variant-detail {
    gap: 40px;
}

    .variant-detail .product-detail--wrapper {
        width: 500px;
        margin: 0 auto;
    }

    .variant-detail .product-detail {
        width: 500px;
        height: 350px;
        margin: 0 auto;
    }

        .variant-detail .product-detail .product-detail__image {
            height: 280px;
            width: auto;
        }

        .variant-detail .product-detail::after {
            background-position-y: 180px;
        }

    .variant-detail .product-detail-content {
        justify-content: center;
    }

        .variant-detail .product-detail-content::after {
            content: "";
            display: none;
        }

.about__advertisement {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
}

.variant-container {
    position: sticky;
    top: 0;
}

.variant-title {
    color: #000;
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0;
    text-align: left;
}

.variant-container .product {
    width: 170px;
    margin: 14px 0;
    flex-shrink: 0;
}

    .variant-container .product.active {
        border: 1px solid #038fb1;
    }

.variant-container .product__image img {
    height: 54px;
    width: auto;
}

.variant-container .product__content {
    padding: 14px 20px;
}

    .variant-container .product__content .product__title {
        font-size: 12px;
        height: 34px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.variant-container .wave-group {
    top: 40%;
}

.variant-container .product__image {
    min-height: 76px;
    max-height: 76px;
}

.table-assest__detail {
    table-layout: fixed;
    word-wrap: break-word;
}

.product-detail__table.table-assest__detail tr td:first-child {
    width: 150px;
}

.assest-link {
    text-decoration: none;
}

.m-filter-btn {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    transform: translate(-25px, -35px);
    border-radius: 70px;
    background: #038fb1;
    padding: 8px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 0;
    color: #fff;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    z-index: 1;
}

.footer {
    background: #def3f8;
    padding: 8px 0;
}

    .footer p {
        font-size: 12px;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
    }

.error-message {
    display: none;
    color: red;
}

.has-error .error-message,
.has-error label {
    color: red;
    display: block;
}

.has-error input[type="text"] {
    border-color: red;
}

.about__table-container table,
.product__table-container table {
    margin-bottom: 40px;
}

.variant-tab img {
    height: 48px;
}

.variant-tab {
    display: flex;
    align-items: center;
    width: auto !important;
    gap: 5px;
    padding: 0px 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 10px;
}

    .variant-tab h5 {
        /* white-space: nowrap; */
        font-size: 12px;
        margin-bottom: 0;
        color: #000000;
        /* font-family: "Noto Sans Thai";*/
        font-family:"Roboto";
        font-style: normal;
        font-weight: 500;
    }

.active .product__title {
    color: #038fb1;
}

.guidelinebtn {
    padding-top: 18px;
    /* padding-bottom: 14px; */
    display: flex;
    justify-content: flex-end;
    gap: 25px;
}

    .guidelinebtn > a {
        display: flex;
        gap: 10px;
        float: right;
        text-decoration: none;
        border: 0;
        color: var(--suntory-brand-dark, #038fb1);
        text-align: center;
        /* font-family: "Noto Sans Thai";*/
        font-family: "Roboto";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        padding: 0;
        line-height: 150%;
    }

.category-list {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    padding: 12px 0;
}

.product-category-icon {
    height: 20px;
}

.toggle-product-category {
    display: none;
}

.product-tabs__group {
    position: sticky;
    top: 0;
    padding-bottom: 24px;
    z-index: 1;
}

.product-filters {
    border-block-start: 1px solid rgba(3, 143, 177, 0.30);
    border-block-end: 1px solid rgba(3, 143, 177, 0.30);
    position: relative;
}

    .product-filters::after {
        content: "";
        position: absolute;
        height: 100px;
        width: 100%;
        bottom: 0;
        background-image: url("../assets/filter_bg.png");
        z-index: -1;
        display: none;
        opacity: 0;
    }

    .product-filters .container {
        padding: 20px 0;
    }

    .product-filters select {
        border-radius: 10px;
        border: 1px solid #038fb1;
        background: #fff;
        padding: 10px;
    }

        .product-filters select.no-arrow {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: none;
            background-color: transparent;
            padding-right: 1rem;
        }

        .product-filters select:focus-visible {
            outline: none;
        }

        .product-filters select.no-arrow::-ms-expand {
            display: none;
        }

    .product-filters .down-arrow-icon {
        position: absolute;
        right: 0;
        transform: translate(-20px, 10px);
    }

.custom-select span {
    color: var(--suntory-brand-grey, #121212);
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.custom-select {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #5bc2dc;
    cursor: pointer;
}

    .custom-select .custom-select__flag {
        display: flex;
        gap: 10px;
    }

.custom-select__dropdown.open > .custom-select__list {
    display: block;
    max-height: 200px;
    overflow-y: auto;
    display: block;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    /* padding-left: 0; */
    padding: 14px 0 14px 0px;
}

.custom-select__arrow {
    transition: 0.3s;
}

    .custom-select__arrow.rotate {
        transform: rotate(180deg);
    }

.custom-select__dropdown {
    width: 100%;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: absolute;
    z-index: 1;
    /* marign: 4px; */
    display: none;
}

    .custom-select__dropdown.open {
        display: block;
        max-height: 200px;
    }

.custom-select .custom-select__icon,
.custom-select__item-icon {
    height: 20px;
    width: 30px;
    object-fit: cover;
}

.custom-select__selected,
.custom-select__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-select__item-label {
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
}

.custom-select__item {
    cursor: pointer;
    padding: 4px 10px 4px 20px;
}

    .custom-select__item:hover {
        background: #ecf7f9;
    }

.product-search__textbox {
    display: flex;
    height: 56px;
    padding: 20px 20px 20px 50px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 10px;
    border: 1px solid #038fb1;
}

    .product-search__textbox::placeholder {
        opacity: 0.23;
    }

.search-icon {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(20px, 18px);
}

.brand-image--wrapper {
    width: 180px;
    height: 188px;
    background-image: url("http://127.0.0.1:5500/assets/product_bg_withoutstrike.webp");
    background-repeat: no-repeat;
    text-align: center;
    background-size: contain;
    align-content: center;
    margin: 0 auto;
}

    .brand-image--wrapper img {
        width: 100%;
        height: 130px;
        object-fit: contain;
    }

.brand__label {
    color: #121212;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    opacity: 0.5;
    padding: 0 0px 3px 3px;
}

.product-category-list > ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.product-category-list__nested {
    list-style: none;
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
    padding-right: 4px;
}

    .product-category-list__nested::after {
        content: "";
        height: 90%;
        position: absolute;
        width: 4px;
        background: #5AC2DC;
        top: 0;
        left: 13px;
        opacity: 0.3;
    }

.product-category-list .variant-tab {
    margin: 0 0 14px !important;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 180deg;
    inherits: false;
}

@keyframes rotate-gradient {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

    /* 06112025
.variant {
    --angle: 180deg;
    border-radius: 8px;
    z-index: 2;
    border: 3px solid white;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--angle), #FFFFFF 13%, #182D70, #00A0DD, #FFDD00) border-box;
    transition: border 0.3s ease;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
*/
 

.variant__bottle,
.variant__btn {
    position: relative;
    z-index: 9999;
}
/*
.variant::after {
    content: "";
    position: absolute;
    top: 72px;
    left: 18px;
    width: 22%;
    height: 76%;
     background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to bottom, #182D70, #00A0DD, #FFDD00, #FFFFFF 87%) border-box;
  border: 3px solid transparent; 
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
    border-radius: inherit;
}*/

    .variant:hover::after {
    opacity: 1;
}



/* background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #182D70, #00A0DD, #FFDD00, #FFFFFF 70%) border-box;
  transition: 0.2s;
  border: 3px solid transparent;
  border-bottom: 0;
} */

.active--accordion > a {
    border: 1px solid #038fb1;
}

.offcanvas {
    width: 580px !important;
}

/* Style For Breadcrumb Starts */
.breadcrumb-container {
    background-color: #182D70;
    /* dark blue background */
    padding: 10px 20px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

.breadcrumb-item i {
    color: #038FB1;
}

.breadcrumb {
    background: none;
}

.breadcrumb-item.active {
    color: #fff;
}

.breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

    .breadcrumb a:hover {
        color: #00A0DD;
        text-decoration: underline;
    }

.breadcrumb-item + .breadcrumb-item::before {
    color: #00A0DD;
    /* arrow color */
}

/* Version 2 start */
/* product listing style start*/
.variant__btn {
    text-wrap: auto;
}

.brand-listing {
    height: 100%;
    text-align: center;
    padding: 50px 0px 80px 0px;
    border-right: 1px solid rgba(0, 0, 0, 0.10);
    background: linear-gradient(180deg, #E8FAFF 0%, rgba(255, 255, 255, 0.00) 100%);
    overflow: auto;
}

    .brand-listing .brand-img {
        height: auto;
        width: 150px;
        z-index: 1;
        cursor: pointer;
        object-fit: contain;
        transition: 0.3s;
    }

        .brand-listing .brand-img:hover {
            transform: scale(1.2);
        }

    .brand-listing .brand-item {
        position: relative;
        width: auto;
        height: 140px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

        .brand-listing .brand-item.active {
            width: 100%;
            height: 190px;
            background-image: url("https://dev-suntory.aueast01.umbraco.io/images/ecatalog/brand-overlay.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

.accordion-header {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 20px 0px 0px;
    align-items: center;
    cursor: pointer;
}

.accordion-varaint-container .accordion-header {
    color: var(--suntory-brand-grey, #121212);
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    border-radius: 120px;
    padding: 16px 24px;
    border: 1px solid rgba(0, 154, 204, 0.60);
    background: linear-gradient(180deg, #F0F6F8 0%, rgba(255, 255, 255, 0.80) 100%);
}

.accordion-items {
    position: relative;
}

.accordion-container > .accordion-items::after {
    content: "";
    position: absolute;
    width: 100%;
    opacity: 0.1;
    height: 1px;
    background: #038FB1;
    bottom: 0;
    margin: 0 auto;
}

.accordion-header h3 {
    color: var(--suntory-brand-grey, #121212);
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 0;
}

.brand-flavour-container {
    padding: 0px 30px 0px 30px;
}

.accordion-body {
    width: 100%;
}

.accordion-varaint-container .accordion-body {
    padding: 20px 0 20px;
}

.accordion-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 20px;
    align-self: stretch;
}

.accordion-varaint-container {
    border-radius: 30px;
    background: #FFFFFF;
    /* background: #F0F6F8; */
    margin-top: 20px;
    padding: 32px;
}

.variant {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 28px 12px 0;
    border-radius: 20px;
    text-align: center;
}

    .variant:hover .variant__bottle {
        transform: translateY(-10px) scale(1.05);
    }

.variant__bottle {
    width: 150px;
    height: 240px;
    margin-bottom: 20px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    top: 46px; /*07112025*/
}


.variant__btn {
    border-radius: 110px;
    border: 1px solid rgba(99, 99, 99, 0.10);
    background: #FFF;
    display: flex;
    /*   padding: 16px 20px;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    align-self: stretch;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none; /* 0711*/
    color: #000; /* 0711*/
}

    .variant__btn:hover {
        border: 1px solid #5AC2DC;
        color: #038FB1;
    }

.down__arrow {
    object-fit: contain;
    width: 20px;
    height: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.accordion-varaint-container .accordion-header h3 {
    color: var(--suntory-brand-grey, #121212);
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
}

.accordion-varaint-container .accordion-items:has(> .accordion-body.active) > .accordion-header h3 {
    color: #038FB1;
    font-weight: 700;
}


.down__arrow.rotated {
    transform: rotate(180deg);
}

.accordion-body {
    display: none;
}

    .accordion-body.active {
        display: block;
    }

.hamburger-slider {
    padding-top: 0;
}

@media (max-width: 600px) {
    .table-overflow-container {
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    /*0711*/ 
    .variant__img {  
        height: 218px;
    }
    /*0711*/ 

    .accordion-header {
        align-items: center;
        padding: 12px 0px;
    }


    .accordion-items {
        padding: 10px 14px;
        gap: 0;
    }

    .accordion-header h3 {
        padding: 0 0 0px 0;
        font-size: 18px;
    }

    .accordion-varaint-container .accordion-header h3 {
        font-size: 14px;
    }

    .accordion-varaint-container {
        border-radius: 10px;
        margin-top: 0
    }

    .variant__bottle {
        width: 90px;
        height: 140px;
        margin-bottom: 8px;
    }

    .variant__btn {
        font-size: 12px;
        padding: 12px 18px;
        width: auto;
        margin: 0 auto;
    }

    .brand-listing .brand-item,
    .brand-listing .brand-item.active {
        width: 62px;
        height: 62px;
    }

        .brand-listing .brand-item.active .brand-listing {
            padding: 0;
            display: flex;
            gap: 15px;
            padding: 12px 20px;
            position: sticky;
            top: 0;
        }

        .brand-listing .brand-item.active {
            padding: 12px;
        }

    .brand-listing .brand-img {
        width: 80px;
        height: auto;
    }

    .brand-listing {
        height: auto;
        display: flex;
        width: 100%;
        padding: 12px 20px;
        align-items: center;
        gap: 8px;
    }


        .brand-listing.align-center {
            justify-content: center;
        }

    .accordion-varaint-container .accordion-body {
        padding: 12px 0 12px;
    }

    .offcanvas {
        width: 90% !important;
    }

    .hamburger-slider ul li:first-child {
        padding-top: 0;
    }

    .brand-flavour-container,
    .accordion-varaint-container {
        padding: 0;
    }
}






/* product listing style end*/

/* product header style start */
.brand-wrapper {
    padding: 0;
    align-items: center;
}

.brand-logo {
    width: 154px;
    height: auto;
}

.user-login-section {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0px 14px 0px;
    border-left: 1px solid #00000022;
}

/* .user-login-section::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 40px;
  opacity: 0.1;
  left: 0;
  background: #000;
  top: 0px;
} */

.user-info .nav-link {
    color: #626262;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .user-info .nav-link:hover {
        background-color: #f8f9fa;
        color: #495057;
    }

.user-name {
    font-size: 14px;
    font-weight: 500;
}

.login-buttons .btn {
    font-size: 12px;
    padding: 6px 12px;
}

.user-info .dropdown-menu {
    min-width: 150px;
    border: 1px solid #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.user-info .dropdown-item {
    font-size: 14px;
    padding: 8px 16px;
}

    .user-info .dropdown-item:hover {
        background-color: #f8f9fa;
    }
/*search bar expansion 30102025*/
@media (min-width: 1175px) {
    .brand-search__input input:focus {
        width: 400px; /* Remove the default focus outline */
        transition: 0.3s;
    }
}
    /*search bar expansion 30102025*/
    .brand-search__input {
        width: auto !important;
        padding: 8px 16px;
        gap: 8px;
    }

    .product-navbar {
        background: #FFF;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
    }

    .dropdown-toggle::after {
        content: "";
        display: none;
    }

    .user {
        display: flex;
        flex-direction: column;
    }

    .user__name {
        color: #000;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        margin-bottom: 0;
    }

    .user__role {
        color: #898989;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        margin-bottom: 0;
        text-transform: capitalize;
    }

    .avatar-circle {
        width: 42px;
        height: 42px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        background-color: #f0f6f8;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .avatar-container {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .brand-search {
        align-items: center;
        gap: 12px;
    }

    .user__header {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .user__arrow {
        width: auto;
        height: 6px;
    }

.brand-text {
    color: #009ACC;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0;
    cursor: pointer;
    padding: 0 20px 0 0;
}

    .brand-section {
        padding-right:22px;
        position: relative;
        align-content: center;
    }

    /* .brand-section::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 40px;
  opacity: 0.1;
  right: 0;
  background: #000;
  top: 0px;
} */

    .brand-search {
        position: relative;
        padding: 0 0px 0 20px;
        border-left: 1px solid #00000022;
    }

    .brand-search__result.open,
    .brand-country__result.open {
        top: 50px;
        width: 100%;
        max-width: 100%;
    }

    .hamburger-menu {
        display: none;
    }


    .brand-search__result {
        z-index: -4;
        left: 0;
    }

        .brand-search__result.open {
            z-index: 1;
        }


    @media (max-width: 600px) {
        .user-login-section {
            margin-top: 10px;
            width: 100%;
            justify-content: center;
        }

        .brand-wrapper {
            padding: 8px;
            flex-direction: row;
        }

        .brand-section,
        .user-login-section {
            display: none;
        }

        .brand-search__input input {
            width: 100%;
        }

        .hamburger-menu {
            display: block;
        }

        .brand-search__result {
            z-index: -4;
            left: 0;
        }

            .brand-search__result.open {
                z-index: 1;
            }

        .brand-search__country span > span,
        .brand-country__result li > span {
            display: none;
        }

        .brand-country__result ul li {
            justify-content: center;
            padding: 4px 10px 4px 10px !important;
        }

        .brand-logo {
            width: 80px;
            height: auto;
        }

        .brand-search__input {
            padding: 2px 12px;
        }

        .brand-search__country {
            padding: 3px 12px;
        }

        .brand-search {
            gap: 16px;
        }

        .hamburger-slider ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

            .hamburger-slider ul li {
                padding: 20px 0;
            }

                .hamburger-slider ul li:not(:last-child) {
                    border-bottom: 1px solid rgba(18, 18, 18, 0.1);
                }

        .logout-btn {
            display: flex;
            padding: 8px 16px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            border-radius: 40px;
            border: 1px solid #BCBCBC;
            width: 100%;
            background: #fff;
        }
    }

    /* product header style end */

    /* Search start */
    .top-section {
        background: url('/images/ecatalog/search-assests/Search-bar.png');
        padding: 40px 0;
        width: 100%;
    }

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 2px solid #87ceeb;
    border-radius: 10px;
    padding: 12px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    font-family: 'Roboto';
}

    .search-icon {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

        .search-icon svg path {
            stroke: #038FB1;
        }

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    background: transparent;
    font-family: 'Roboto';
    padding: 0 12px;
}

    .clear-icon {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 10px;
    }


.results-header {
    color: #636363;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0;
    padding-bottom: 16px;
}

    .product-card {
        height: 270px;
        border-radius: 20px;
        border: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
    }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

        .product-card.highlighted {
            border: 2px solid #87ceeb;
        }

    .product-image {
        height: 180px;
        /*  background: url('/images/ecatalog/search-assests/Bg-Image.png') no-repeat center center;*/
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .orangina-logo {
        width: 120px;
        height: 80px;
        background: url('../assets/search-assests/Orangina.png') no-repeat center center;
        background-size: contain;
    }

.product-info {
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(45deg, #ccf5ff, transparent);
}

    .product-name,
    .product-details {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .product-card:has(:hover) .card-title,
    .product-card:has(:hover) .card-text {
        color: #038FB1;
    }

    .blue-text {
        color: #87ceeb !important;
    }


    @media (max-width: 768px) {

        .product-name,
        .product-details {
            font-size: 14px;
        }

        .product-card {
            height: 240px;
        }

        .product-image {
            height: 150px;
        }

        .product-info {
            height: 90px;
        }

        .search-bar {
            width: 95%;
            padding: 10px 15px;
        }
    }

    @media (max-width: 480px) {
        .main-content {
            padding: 20px 10px;
        }

        .product-card {
            height: 220px;
        }

        .product-image {
            height: 130px;
        }

        .product-info {
            height: 90px;
        }

        .results-header {
            font-size: 20px;
        }
    }

    /* Search end */

    /* brand resources start */
    .brand-bg {
        position: relative;
        background: linear-gradient(180deg, #EEF9FB 0%, rgba(255, 255, 255, 0) 100%);
    }

        .brand-bg::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            background-image: url('../assets/filter_bg.png');
            background-repeat: repeat-x;
            height: 100%;
            width: 100%;
            transform: scale(-1);
            background-position: center bottom;
        }

    .main-card {
        width: 100%;
        height: 578px;
        border-radius: 30px;
        margin: 18px 0;
        background: #fff;
        opacity: 1;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    .logo-section {
        position: relative;
        min-height: 578px;
    }

    .brand-resource-logo {
        display: flex;
        border-radius: 30px 0 0 30px;
        background: linear-gradient(180deg, rgba(3, 143, 177, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%);
        height: 100%;
        width: 100%;
    }

    .logo-image {
        width: 200px;
        margin: auto;
    }

.page-title {
    font-family: 'Roboto';
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #333;
}

.brand-select {
    /* max-width: 520px; 06112025*/
    height: 44px;
    border: 1px solid #CFE9F2;
    border-radius: 9999px;
    font-family: 'Roboto';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
}

    .resources-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }

        .resources-grid .card-icon {
            padding: 0 0 20px;
            position: relative;
        }

            .resources-grid .card-icon::after {
                content: "";
                position: absolute;
                height: 1px;
                width: 100%;
                bottom: 0;
                left: 0;
                transform: translateY(-8px);
                opacity: 0.1;
                background-color: #fff;
            }

            .resources-grid .card-icon .icon-image {
                width: 56px;
                height: auto;
            }

    .resource-card {
        position: relative;
        display: block;
        padding: 20px 16px;
        text-decoration: none;
        color: #fff;
        background: #4FC3E2;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(79, 195, 226, 0.25);
        transition: transform .2s ease, box-shadow .2s ease;
        border: none;
        outline: none;
    }

        .resource-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(79, 195, 226, 0.35);
            background: #009ACC;
        }

    .separator-line {
        width: 100%;
        height: 1px;
        background: #CFE9F2;
        margin: 20px 0;
    }

.resources-grid .card-title {
    color: #FFF;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

    .card-subtitle {
        position: absolute;
        top: 140px;
        left: 20px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.15);
        padding: 2px 6px;
        border-radius: 3px;
    }

    .status-badge {
        position: absolute;
        right: 20px;
        top: 125px;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .card-content {
        display: flex;
        justify-content: space-between;
    }

    .layout-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        /* max-width: 1800px; */
        max-width: 2200px;
        margin: 0 auto;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
    }

    .brand-listing {
        transition: transform 0.4s ease, box-shadow 0.3s ease;
    }

    .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .layout-center {
        flex: 1;
    }

    .hide-header {
        transform: translateY(-100%);
    }

    .brand-flavour-container .product-filters {
        padding: 20px 0;
        border-block-start: none;
    }

    @media (max-width: 768px) {
        .resources-grid {
            grid-template-columns: 1fr 1fr;
            max-width: none;
        }

        .logo-section {
            min-height: 240px;
        }

        .main-card {
            height: 100%;
        }

        .brand-download-icon {
            object-fit: contain;
        }

        .resource-card {
            padding: 12px;
        }

        .resources-grid .card-title {
            font-size: 10px;
        }

        .resources-grid .card-icon .icon-image {
            width: 34px;
            height: auto;
        }

        .logo-image {
            width: 140px;
            margin: auto;
        }

        .layout-center .row.h-100 {
            height: auto !important;
        }
    }

    /* brand resources start */
    /* Version 2 end */



    /* responsive */

    @media (min-width: 1400px) {
        .custom-container {
            max-width: 1520px;
        }
    }

    @media (max-width: 600px) {

        /*20112025*/
        /* Only apply min-width to tables inside table-overflow-container (scrollable tables) */

        .table-overflow-container .about-product__table tr {
            display: block;
            padding: 0 !important;
        }

            .table-overflow-container .about-product__table tr td,
            .table-overflow-container .about-product__table tr th {
                padding: 12px;
                min-width: 250px;
                width: 100%;
            }
        /*Change the whole 
 
        .table-overflow-container .about-product__table tr td,
        .table-overflow-container .about-product__table tr td:first-child {
            padding: 12px;
            min-width: 250px;
            width: 100%;
        }
block of code from index.css: 3164 */
        /* Tables without table-overflow-container should fit within viewport */
        .about__table-container > div:not(.table-overflow-container) {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

            .about__table-container > div:not(.table-overflow-container) .about-product__table {
                width: 100%;
                max-width: 100%;
                table-layout: fixed;
            }

                .about__table-container > div:not(.table-overflow-container) .about-product__table tr td,
                .about__table-container > div:not(.table-overflow-container) .about-product__table tr td:first-child {
                    padding: 12px;
                    width: auto;
                    max-width: 100%;
                    min-width: auto;
                    word-break: break-word;
                    overflow-wrap: break-word;
                }

                    .about__table-container > div:not(.table-overflow-container) .about-product__table tr td:first-child {
                        width: 30%;
                    }

        /* Fix overflow for product-detail__table without table-overflow-container */
        .product-detail__list > div:not(.table-overflow-container) {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

            .product-detail__list > div:not(.table-overflow-container) .product-detail__table {
                width: 100%;
                max-width: 100%;
                table-layout: fixed;
            }

                .product-detail__list > div:not(.table-overflow-container) .product-detail__table tr td {
                    word-break: break-word;
                    overflow-wrap: break-word;
                    max-width: 100%;
                }

                /*20112025*/

        .main-card {
            height: auto;
            margin: 24px 0;
        }

        .m-filter-btn {
            display: inline-block;
        }

        .product-filter__sidebar {
            padding: 32px 32px 0;
            position: fixed;
            width: 100%;
            background: #fff;
            left: 0;
            bottom: 0;
            z-index: 1;
            border-radius: 20px 20px 0px 0px;
            transform: translate(0px, 100%);
            transition: height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
            z-index: 2;
        }

         .product-filter__sidebar.open {
                transform: translate(0px, 0px);
            }

        .col-12 ~ .brand {
            background: red;
        }

        .brand {
            padding: 0 20px;
            border-radius: 0;
        }

        .brand-group__wrapper {
            width: 80px;
            height: 90px;
        }

        .brand-group__image {
            width: 64px;
            height: 70%;
        }

        .brand-group__list {
            gap: 8px;
            justify-content: flex-start;
            overflow-x: auto;
            padding-left: 20px;
        }

        .brand-group__title {
            font-size: 24px;
            padding-bottom: 20px;
        }

        .brand-group {
            padding: 16px 0;
        }

        .active .brand-group__name {
            font-size: 14px;
        }

        .brand-group__name {
            font-size: 12px;
        }

        .brand-wrapper {
            margin-bottom: 0;
        }

        .brand__products-header .brand__download-button {
            display: none;
        }

        .brand__about .brand__title {
            font-size: 24px;
        }

        .brand__about .brand__description {
            color: #636363;
        }

        .brand__header span {
            visibility: visible;
        }

        .py-40px {
            padding: 0px;
        }

        .breadcrumb .breadcrumb__item,
        .product-detail-content__btn {
            font-size: 14px;
        }

        .product-detail__image {
            height: 290px;
        }

        .product-detail {
            height: 320px;
            overflow: hidden;
        }

            .product-detail::after {
                background-position-y: 180px;
            }

        .product-detail-content {
            gap: 0;
            padding-bottom: 30px;
            justify-content: space-between;
        }

        .product-detail__group {
            gap: 5px;
        }

        .product-detail__title {
            font-size: 24px;
            padding-bottom: 10px;
            margin-bottom: 0;
        }

        .product-detail__subtitle {
            color: var(--suntory-brand-mid-grey, #636363);
            font-size: 16px;
            font-weight: 400;
            padding-bottom: 20px;
            margin-bottom: 0;
        }

        .product-detail__header {
            padding: 20px 0 0;
        }

        .about-product__table tr {
            /* display: flex; 24122025*/
            flex-direction: column;
        }

            .about-product__table tr td:first-child {
                width: auto;
                color: #121212;
                /* font-family: "Noto Sans Thai";*/
            font-family: "Roboto";
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%;
            padding: 16px;
        }

        .about-product__table tr {
            padding: 20px;
        }

            .about-product__table tr td {
                padding: 0;
            }

        .product-detail-content::after {
            right: 50%;
            transform: translateX(-50%);
        }

        .brand-group__card {
            flex: 1;
        }

        .brand-group__wrapper {
            margin: 0 auto 8px;
        }

        .product-filter__btn-group {
            display: flex;
        }

        .pb-60px {
            padding: 0 20px 20px;
        }

        .product-tabs__group {
            display: none;
        }

        .product-tabs__group--mobile {
            display: block;
        }

        .product-filter__sidebar {
            top: unset;
        }

        .product-filter-subgroup {
            max-height: 380px;
            overflow-x: auto;
        }

        .brand-wrapper {
            align-items: center;
            gap: 20px;
            padding: 14px 0px;
        }

        .brand-search__country {
            flex: 1;
        }

            .brand-search__country select {
                display: none;
            }

            .brand-search__input,
            .brand-search__country,
            .brand-search__country select,
            .brand-search__input input {
                width: 100%;
                text-align: start;
                gap: 10px;
            }

        .brand-search {
            gap: 10px;
            align-items: unset;
        }

        .w-sm-100 {
            width: 100%;
        }

        .brand-group__list::after {
            bottom: 15px;
        }

        .flex-wrap.brand-group__list {
            padding: 0 20px;
            justify-content: center;
        }

        .flex-wrap .brand-group__card {
            flex: 0 0 90px;
        }

        .about-product__table thead tr {
            padding: 0 !important;
        }

        /* toggle icon for  */

        .toggle-product-category {
            transition: 0.2s;
        }

            .toggle-product-category.rotate180 {
                transform: rotate(180deg);
            }

        .product-category-list {
            overflow: hidden;
            height: 0;
            opacity: 0;
            transform: scaleY(0);
            transform-origin: top;
            transition: height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
        }

            .product-category-list.open {
                display: block;
                opacity: 1;
                transform: scaleY(1);
            }

        .toggle-product-category {
            display: inline-block;
        }

        .product-filters {
            overflow: hidden;
            padding: 0 14px;
        }

        .product-search__textbox {
            height: 45px;
        }

        .search-icon {
            transform: translate(20px, 12px);
        }

        .custom-select__dropdown {
            position: static;
            margin: 4px 0px;
        }

        .guidelinebtn {
            flex-direction: column-reverse;
            align-items: end;
            gap: 10px;
        }
    }

    /* responsive */


    /*Small Changes by Fardhan*/


    .variant__btn {
        padding: 16px 18px;
    }

    .product-filters::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        bottom: 0;
        background-image: url(/images/ecatalog/filter_bg.png);
        z-index: -1;
        background-position: bottom;
        background-size: contain;
    }

    a.brand-text {
        text-decoration: none;
    }

.accordion-header h3 {
    color: var(--suntory-brand-grey, #121212);
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 0;
}

.about-product__title > a {
    text-decoration: none;
    color: var(--suntory-brand-dark, #038fb1);
    text-align: center;
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    padding: 0;
    line-height: 150%;
}

    .about-product__title,
    .about__advertisement-title {
        justify-content: space-between;
        display: flex;
    }

    .accordion-varaint-container .accordion-items:has(> .accordion-body.active) > .accordion-header h3 {
        color: #038FB1;
        font-weight: 500;
    }

    /*Its important to make the full button work in the accordian*/

    /*Page-Product-listing.html*/

.accordion-header h3 {
    color: var(--suntory-brand-grey, #121212);
    /* font-family: "Noto Sans Thai";*/
    font-family: "Roboto";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 0;
    /* padding: 0 0 20px 0; */
}

    .brand-country__result li img {
        margin-right: 8px;
        /* width: 16px; */
        /* height: 12px; */
    }

    /* accordian font size 04112025*/
@media(max-width:500px) {
    .accordion-header h3 {
        font-size: 18px;
    }

    .variant__btn:hover {
        border: none !important;
        color: #038FB1;
    }
}

    /* Add the script inside the Head of all the pages
    *<!-- FontAwesome stylesheet CDN start -->
    *<script src="https://kit.fontawesome.com/9e339b9807.js" crossorigin="anonymous"></script> */

    /*Small Changes Ends*/
/* Scoped styles � only affect this dropdown */
.brand-selector-dropdown .btn {
    height: 44px;
    border: 1px solid #CFE9F2;
    border-radius: 9999px;
    font-family: 'Roboto';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #000;
}

.brand-selector-dropdown .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 25px
}

.brand-selector-dropdown #brandDropdown span {
    display: inline-block;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.brand-selector-dropdown .btn.show {
    background-color: white;
    color: black;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.brand-selector-dropdown .btn:hover {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    background-color: #fff;
    color: #000;
}

a.dropdown-item:hover {
    background: #def3f8;
}

.btn .dropdown-icon {
    transition: 0.3s;
}

.btn.show .dropdown-icon {
    transform: rotate(180deg);
}
/*08122025*/
.tableVariant__assests tr,
.tableVariant__assests tr td,
.tableVariant__assests tr th {

    background: transparent !important;
}

    .tableVariant__assests tr:nth-child(even) {
       
        background: transparent !important;
    }

.header-variant__btn {
    padding: 8px 28px;
    border: 1px solid rgb(230 243 248);
    font-family: 'Roboto';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
}