/* [แก้ตอน deploy] rule แรกสุดของไฟล์เคย selector ถูกตัดหัวหาย
   (เหลือแค่ท้ายของ .video-container-wrapper) จึงเป็น rule ตายที่ไม่ match อะไรเลย
   declaration ในนั้นเหมือน .video-container-wrapper ด้านล่างทุกตัวอักษร
   → ลบทิ้ง หน้าตาไม่เปลี่ยน
   ต้นทางความเพี้ยนน่าจะอยู่ในช่อง Custom CSS ของ Admin ด้วย ควรไปแก้ที่นั่นด้วย */

.video-container {
    position: relative!important;
    padding-bottom: 56.25%!important;
    padding-top: 30px!important;
    height: 0!important;
    overflow: hidden!important;
}

.video-container iframe,
.video-container object,
.video-container object,
.video-container embed {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
}


/* Your custom style */


/* Video Youtube Responsive */

.video-container-wrapper {
    max-width: 560px !important;
    max-height: 315px!important;
    margin: auto!important;
    margin-bottom: 50px!important;
}

.video-container {
    position: relative!important;
    padding-bottom: 56.25%!important;
    padding-top: 30px!important;
    height: 0!important;
    overflow: hidden!important;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
}


/* ---------------------------------------- 425degree Header ------------------------------------------------*/

.page-header .logo {
    margin: 15px 0 0;
    max-width: 100%;
}

/*@media only screen and (max-width: 768px) {*/
/*    .page-header .logo {*/
/*        margin: 12px 0 0;*/
/*        max-width: 150px;*/
/*    }*/
/*}*/

@media only screen and (max-width: 768px) {
    .page-header .logo {
        /*margin: 12px 0 0;*/
        max-width: 150px;
        margin-bottom: 0px !important;
        margin-top: 12px !important;
        margin-right: 0px !important;
    }
    .newst-added-item > .subtitle {
        padding: 0 20px !important;
    }
}

.switchpage-control .control {
    padding: 13px 0px;
    display: flex;
    flex-direction: row;
    width: 50px;
    position: relative;
    color: #fff;
    margin: 0 -25px;
    text-align: right;
}

.switchpage-control .dot {
    width: 50px;
    display: inline-block;
    font-size: 14px;
    position: relative;
    height: 16px;
}

.switchpage-control .dot:before {
    font-size: 0px;
}

.page-header .action.showcart:before {
    display: inline-block;
    font-family: 'CodazonFont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e994';
    font-size: 27px;
    speak: none;
    color: #000
}

.opc-estimated-wrapper .minicart-wrapper .action.showcart:before {
    display: inline-block;
    font-family: 'CodazonFont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e994';
    font-size: 26px;
    speak: none;
    color: #000
}

.page-header .mobi-cart-wrapper .action.showcart:before {
    display: inline-block;
    font-family: 'CodazonFont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e994';
    font-size: 22px;
    speak: none;
    color: #fff;
    line-height: 35px
}

.page-header .header-search.no-full-box.has-cat-search .cdz-cat-search {
    position: absolute;
    padding: 0;
    top: 1.3px;
    left: 1px;
    height: 100%;
    z-index: 5
}

@media only screen and (min-width: 992px) {
    .col-md-6 {
        width: 23%
    }
}

.cdz-horizontal-menu .groupmenu li.level0>a.menu-link {
    padding: 12px 14px;
}

.page-header .sticky-menu:not(.active) .header-search-wrap {
    float: right;
    padding: 8px 0;
}

.page-header .sticky-menu:not(.active) div[data-role="search_form"] {
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .switchpage-control .control {
        margin: 0 0;
    }
    .switchpage-control .dot {
        width: 50px;
        display: inline-block;
        font-size: 14px;
        position: relative;
        height: 16px;
    }
    .switchpage-control .dot:before {
        font-size: 0px;
    }
}

.mini-list .product-item-actions .tocart:before {
    display: inline-block;
    font-family: 'CodazonFont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e994';
    font-size: 20px;
    vertical-align: middle;
}


/* Video Youtube Responsive */

.video-container-wrapper {
    max-width: 560px;
    max-height: 315px;
    margin: auto;
    margin-bottom: 50px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* image slider fat */

.owl-carousel .owl-item img {
    display: block;
    width: auto;
    -webkit-transform-style: preserve-3d;
}


/* mini cart item size */

.cdz-dd-content {
    min-width: 400px
}

@media only screen and (max-width: 767px) {
    .cdz-dd-content {
        min-width: 360px
    }
    .cdz-dropdown .cdz-dd-content .cdz-dd-content-inner {
        padding: 10px 2px;
    }
}

.page-header .features-links li {
    margin-left: 4px;
}


/* ---------------------------------------- 425degree Footer -----------------------------------------------*/

.block.newsletter input {
    margin-right: 0 !important;
}

.page-footer .block.newsletter {
    max-width: 100%;
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .page-footer .block.newsletter {
        max-width: 100%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .page-footer .block.newsletter {
        max-width: 225px;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .page-footer .block.newsletter {
        max-width: 100%;
    }
}


/* -------------------------------------------------- 425degree Main Content -------------------------------------------*/

.wrapper-adv-style-425 .item-image {
    -webkit-box-shadow: 0px 4px 34px rgba(255, 255, 255, 0);
}

img,
object,
video,
embed {
    max-height: 100%;
    max-width: 100%;
    height: auto;
}


/* --popup-newsletter-- */

.cdz-newsletter-modal.modal-popup .block.newsletter {
    max-width: 100%;
    margin-bottom: 10px;
}

.qs-button,
a.qs-button {
    line-height: 34px;
}

.review-add #product-review-table .review-field-rating .label {
    width: 100px;
}


/* rating star */

#product-review-container .rating-label {
    width: 100px;
}


/* Button Disabled hover */

.product-list-style-01 .qs-button {
    display: none;
}


/* ิbuttons frontend text product for ipad pro */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .product-list-style-01 .product-item-inner {
        padding: 10px 0 0 0;
        position: relative !important;
    }
    .product-list-style-01 .actions-secondary .action {
        display: none;
    }
    .product-list-style-01 .actions-secondary .action:hover {
        display: none;
    }
    .product-list-style-01 .product-item-info {
        padding-bottom: 0;
    }
}


/* ิbuttons frontend text product for ipad */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .product-list-style-01 .product-item-inner {
        padding: 10px 0 0 0;
        position: relative !important;
    }
    /* hide icon compare */
    .product-list-style-01 .cdz-product .owl-carousel .action.tocompare {
        display: none;
    }
    .product-list-style-01 .product-item-info {
        padding-bottom: 0;
    }
}


/* ิbuttons frontend text product for mobile */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .product-list-style-01 .product-item-inner {
        position: relative !important;
    }
    .product-list-style-01 .product-item-info {
        padding-bottom: 0;
    }
}


/*icon bar footer for iPhone safari */

@media only screen and (max-width: 767px) {
    .mdl-ripple {
        visibility: hidden !important;
    }
}


/*Dubble click buttom for iPad  */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .mdl-ripple {
        visibility: hidden !important;
    }
}


/* font address hiden mobile */

@media only screen and (max-width: 767px) {
    .account .column.main .block:not(.widget) .block-title .action.edit,
    .account .column.main .block:not(.widget) .block-title .action.view {
        font: 400 14px/1.35 Sukhumvit Set, Helvetica Neue, Verdana, Arial, sans-serif;
    }
}


/* font report header  */

@media only screen and (max-width: 767px) {
    .account .page-title-wrapper .page-title,
    [class^='sales-guest-'] .page-title-wrapper .page-title,
    .sales-guest-view .page-title-wrapper .page-title {
        margin-top: 24px;
    }
}


/* Image fat MORE CHOICES */

.cart-informed-modal .product-image-photo {
    width: auto !important;
}


/* input e-mail opatity 0.5 */

/*body input[type="text"],*/
/*body input[type="password"],*/
/*body input[type="url"],*/
/*body input[type="tel"],*/
/*body input[type="search"],*/
/*body input[type="number"],*/
/*body input[type="datetime"],*/
/*body input[type="email"] {*/
/*    color: #000000;*/
/*}*/

input[type="email"]:disabled {
    opacity: 0.8;
}


/* icon product bundle  */

.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary>span:before,
.page-product-bundle .bundle-actions .action.primary>span:before,
.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary>span:after,
.page-product-bundle .bundle-actions .action.primary>span:after {
    content: '\e994';
}


/* font size out stock */

.product-info-main .product-info-stock-sku {
    font-size: 14px;
}


/* Page bundle */


/* border-redius and opatity number */

.page-product-bundle .bundle-options-container .input-text.qty {
    border: 1px solid #282828;
    border-radius: 5px;
}

input[type="number"]:disabled {
    opacity: 0.8;
}

.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary>span:after {
    content: '\e994';
    top: 0;
}


/* lock vertical slider mobile */

.owl-carousel .owl-stage-outer {
    overflow-x: hidden;
}

/*::-webkit-scrollbar {*/
/*    display: none;*/
/*}*/


/* font page checkout */

.onestepcheckout-index-index .page-main .checkout-container {
    font-family: 'Sukhumvit Set', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}


/* Checkout show menu Hamburger mobile */

@media only screen and (max-width: 767px) {
    .onestepcheckout-index-index .nav-toggle {
        display: block !important;
    }
}


/* margin new subscribe page register */

.customer-account-create .form-create-account .fieldset .field {
    margin-bottom: 10px;
}


/* margin buttom page checkout */

.cart-informed-modal .actions button.action {
    padding: 7px 8px;
}


/* Color and width fluid Checkout Page */

.onestepcheckout-index-index .page-main .osc-fluid .field:not(:last-child) {
    flex-basis: 100%;
}

.onestepcheckout-index-index .page-main .aw-onestep-main .not-logged-title .mark {
    border: 2px solid #2e2e2e;
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .aw-onestep-main .aw-onestep-groups .aw-onestep-groups_item .group-title .mark {
    border: 2px solid #2e2e2e;
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container input[type='radio']:checked+label:before {
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container input[type='radio']+label:before {
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container input[type='checkbox']:checked+label:before {
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container input[type='checkbox']+label:before {
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container .aw-onestep-sidebar-header:before {
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .aw-onestep-main .payment-method._active:before {
    background-color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container .aw-mobile .aw-sidebar-product-list .aw-onestep-sidebar-block_title:before {
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container.aw-osc_customer-not-logged-in .aw-onestep-main .not-logged-title .email-title .mark {
    background-color: #ffffff;
}

.onestepcheckout-index-index .page-main .checkout-container .aw-onestep-main .aw-onestep-groups .aw-onestep-groups_item .group-title h2 .mark {
    background-color: #ffffff;
}

.onestepcheckout-index-index .page-main .aw-onestep-main .shipping-address-items ol .shipping-address-item.selected-item {
    border: 1px solid #2e2e2e;
    box-shadow: inset 0 0 0 1px #2e2e2e;
}

.onestepcheckout-index-index .page-main .aw-onestep-main .shipping-address-items ol .shipping-address-item.selected-item:after {
    color: #2e2e2e;
}

.onestepcheckout-index-index .page-main .checkout-container .aw-onestep-sidebar-content .aw-onestep-sidebar-block.payment-option .payment-option-title .action-toggle{
    color: #333 !important;
}


/* z-index popup login  */
.pslogin-block .pslogin-buttons .google .pslogin-button-auto{
    background-color: #EEEE;
    font: 500 14px Roboto;
}

.pslogin-button.google .pslogin-button-icon::before{
    outline: 1px solid #4285F4;
}

@media screen and (max-width: 480px) {
    .pslogin-reminder {
        left: 0px;
        top: 10%;
        z-index: 999;
    }
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        @media screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio:0) {
            .pslogin-block .pslogin-buttons.pslogin-buttons-showfull ul li .pslogin-button-icon{
                margin-top: -16px;
            }
        }
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .pslogin-reminder {
        left: 30%;
        top: 10%;
        z-index: 999;
    }
}

@media only screen and (min-width: 1024px) {
    .pslogin-reminder {
        left: 40%;
        top: 30%;
        z-index: 999;
    }
}


/* show buttom close to multiple color products */

@media only screen and (max-width: 767px) {
    .modal-popup .modal-inner-wrap .modal-header .action-close {
        z-index: 1;
    }
    .product-info-main .box-tocart .action.tocart,
    .product-options-bottom .box-tocart .action.tocart {
        font-size: 14px;
        padding: 6px 10px;
    }
    .product-info-main .box-tocart .primary.tocart span {
        padding-left: 30px;
    }
    .product-info-main .price-box .price-wrapper .price {
        font-size: 30px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .modal-popup .modal-inner-wrap .modal-header .action-close {
        right: 0;
    }
}


/* padding-bottom product style  */

@media only screen and (max-width: 767px) {
    .page-products .products-grid .product-items .item.product-item {
        border-bottom: 1px solid #e1e1e1 !important;
        border-right: 1px solid #e1e1e1 !important;
        padding-bottom: 5px !important;
    }
}


/* Product labels don't Click  */

.cdz-product-labels {
    pointer-events: none;
}

.cdz-product-labels .label-content{
    position: relative;
}

/*single product*/
.cdz-product-labels .label-content span{
    background-image: url("/media/CDZ-ProductLabel/tag-discount-desktop.svg");
    background-size: 100% 100%;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 2px;
    color: white;
    position: absolute;
    right: 1px;
    top: 1px;
    line-height: 1;
    font-weight: 500;
    text-align: center;
    font-size: 12px;
}

.cdz-product-labels .label-content span b{
    font-size: 14px;
}

.label-wrap .cdz-product-labels .label-content span{
    display: flex;
    height: 40px;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: 6px;
    background: linear-gradient(287deg, #DD0509 24.05%, #FE4D4D 73.17%);
    margin-top: 8px;
    margin-right: 8px;
}

.label-wrap .cdz-product-labels .label-content span b {
    font-size: 24px;
}

@media only screen and (max-width: 768px){
    .cdz-product-labels .label-content span{
        display: flex;
        height: 24px;
        padding: 2px 6px;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 4px;
        top: 4px;
        border-radius: 6px;
        background: linear-gradient(287deg, #DD0509 24.05%, #FE4D4D 73.17%);
    }

    .label-wrap .cdz-product-labels .label-content span{
        display: flex;
        height: 32px;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 2px;
        top: 2px;
        border-radius: 6px;
        background: linear-gradient(287deg, #DD0509 24.05%, #FE4D4D 73.17%);
        margin-top: 2px;
        margin-right: 2px;
    }
}

/*.cdz-product-labels .label-content span{*/
/*    background-image: url("/media/CDZ-ProductLabel/52X62PX_-02.png");*/
/*    background-size: 100% 100%;*/
/*    !*background-color: #ff0000;*!*/
/*    padding: 5px;*/
/*    padding-top: 10px;*/
/*    padding-bottom: 15px;*/
/*    border-radius: 2px;*/
/*    color: white;*/
/*    position: absolute;*/
/*    right: 1px;*/
/*    top: 1px;*/
/*    line-height: 1;*/
/*    font-weight: 500;*/
/*    text-align: center;*/
/*    font-size: 12px;*/
/*}*/

/*.cdz-product-labels .label-content span b{*/
/*    font-size: 14px;*/
/*}*/

/*.label-wrap .cdz-product-labels .label-content span{*/
/*    background-image: url("/media/CDZ-ProductLabel/79X54PX_-03.png");*/
/*    font-size: 25px;*/
/*    padding: 5px;*/
/*    padding-top: 20px;*/
/*    padding-bottom: 25px;*/
/*}*/

/*.label-wrap .cdz-product-labels .label-content span b {*/
/*    font-size: 35px;*/
/*}*/



/*@media only screen and (max-width: 768px){*/
/*    .cdz-product-labels .label-content span{*/
/*        background-image: url("/media/CDZ-ProductLabel/50X60PX_-01.png");*/
/*        font-size: 10px;*/
/*    }*/
/*}*/

/* -------- Flash Sale Countdown --------*/
.amstockstatus-category {
    margin-bottom: unset;
}
.product-deal {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.deal-items{
    display: flex;
}

.deal-item{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 5px;
}

.deal-item .value{
    font-size: 18px;
    font-weight: 500;
}

.deal-item .label{
    font-size: 10px;
}

.deal-items .colone{
    font-size: 18px;
    font-weight: 500;
    padding-top: 5px !important;
}

.product-deal .img{
    padding-left: unset;
    padding-right: 1px;
}

.deal-item span.flash-sale-png{
    margin-top: 5px !important;
    background-image:url("/media/CDZ-ProductLabel/FLASH_SALE_2_-01.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 60px !important;
    height: 30px !important;
}

.product-info-main .product-inventory-deal .deal-wrap .deal-item span.flash-sale-png{
    background-image: url("/media/CDZ-ProductLabel/FLASH_SALE_Product_Page-01.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 5px;
    width: 130px !important;
    height: 80px !important;
}

.product-info-main .product-inventory-deal .deal-wrap .img{
    margin: unset;
}

.product-inventory-deal .product-deal .deal-wrap .deal-items{
    background-color: #f1f2f2;
    border-radius: 12px;
}

.product-info-main .product-inventory-deal .deal-item:after {
    font-size: 36px;
    padding-top: 20px;
    color: darkgray;
}

.product-info-main .product-inventory-deal .deal-item.img:after{
    content: unset;
}

.product-info-main .product-inventory-deal .deal-items{
    margin-top: unset;
}

.product-info-main .product-inventory-deal .deal-item span {
    margin-bottom: unset;
}

.product-info-main .product-inventory-deal .deal-item{
    display: unset;
}

.product-inventory-deal .product-deal{
    display: flex;
    justify-content: center;
}

.product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .value{
    font-size: 42px;
    font-weight: 600;
    color: black;
}

.product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .label{
    font-size: 14px;
    color: darkgray;
}

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

    .product-info-main .product-inventory-deal .deal-item{
        margin: 5px 15px 5px 15px;
    }

    .deal-item span.flash-sale-png{
        width: 58px !important;
        height: 28px !important;
    }

    .deal-item .value{
        font-size: 16px;
        font-weight: 500;
    }

    .deal-item .label{
        font-size: 8px;
    }

    .deal-items .colone{
        font-size: 16px;
        font-weight: 500;
        padding-top: 5px !important;
    }

    .product-info-main .product-inventory-deal .deal-wrap .deal-item span.flash-sale-png{
        width: 120px !important;
        height: 70px !important;
    }
    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .value{
        font-size: 32px;
        font-weight: 600;
        color: black;
    }

    .product-info-main .product-inventory-deal .deal-item:after {
        font-size: 32px;
        padding-top: 10px;
        color: darkgray;
    }

    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .label {
        font-size: 14px;
        color: darkgray;
    }
}

@media only screen and (max-width: 990px){
    .product-info-main .product-inventory-deal .deal-wrap .deal-item span.flash-sale-png {
        width: 90px !important;
        height: 50px !important;
    }

    .product-info-main .product-inventory-deal .deal-item{
        margin: 0px 5px;
    }

    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .value {
        font-size: 26px;
    }

    .product-info-main .product-inventory-deal .deal-item:after{
        padding-right: 6px;
    }

    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .label{
        font-size: 12px;
    }
}

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

    .product-list-style-01 .product-item-inner {
        position: relative !important;
    }

    .deal-item span.flash-sale-png{
        background-image: url("/media/CDZ-ProductLabel/FLASH_SALE-01.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 80px !important;
        height: 15px !important;
    }

    .product-deal {
        display: flex;
        flex-wrap: wrap;
        justify-content: unset;
    }

    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .value{
        font-size: 42px;
        font-weight: 600;
        color: black;
    }

    .product-info-main .product-inventory-deal .deal-item:after {
        font-size: 42px;
        padding-top: 10px;
        color: darkgray;
    }

    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .label {
        font-size: 16px;
        color: darkgray;
    }
}


@media only screen and (max-width: 480px){
    .deal-items{
        align-items: center;
    }

    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item{
        padding: unset;
    }
    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .value{
        font-size: 24px;
        font-weight: 600;
        color: black;
    }

    .product-info-main .product-inventory-deal .deal-item:after {
        font-size: 24px;
        padding-top: 10px;
        color: darkgray;
    }

    .product-inventory-deal .product-deal .deal-wrap .deal-items .deal-item .label {
        font-size: 12px;
        color: darkgray;
    }

    .product-info-main .product-inventory-deal .deal-wrap .deal-item span.flash-sale-png{
        width: 72px !important;
        height: 40px !important;
    }
}

@media only screen and (max-width: 320px){
    .deal-item .value{
        font-size: 12px;
        font-weight: 500;
    }

    .deal-item .label{
        font-size: 8px;
    }

    .deal-items .colone{
        font-size: 12px;
        font-weight: 500;
        padding-top: 5px !important;
    }
}
/* -------- END Flash Sale Countdown --------*/


/* icon cart footer */

@media only screen and (max-width: 767px) {
    .mb-bottom-toolbar .fa-shopping-cart:before {
        content: "\e994";
    }

    .mb-bottom-toolbar {
        padding-bottom: 0px !important;
    }
}


/* size price aheadwork checkout */

.price-including-tax .price,
.price-excluding-tax .price {
    font-size: 1.5rem;
}

.onestep-shipping-address .custom-span {
    color: #A93226
}


/* block center css sales/guest/form  */

.sales-guest-form .form-orders-search {
    border: 1px solid #d8d8d8;
    margin-left: auto;
    margin-right: auto;
}


/* Margin Top Tier Page Reward Point  */

.rewards-account__tiers .tier-progress-bar {
    margin-top: 6rem;
}

@media only screen and (max-width: 767px) {
    .rewards-account__tiers .tier-progress-bar {
        margin-top: 7rem;
    }
}

@media only screen and (max-width: 767px){
    .tier-progress-bar .tier-point .label, .tier-progress-bar .tier-point .number, .tier-progress-bar .tier-point .tier-logo{
        display: block;
    }
}


/* Amasty edit css relate product  */

/*.block-products-list .products-grid .product-item {*/
/*    margin-right: 10px;*/
/*    border-bottom: 1px solid #e1e1e1 !important;*/
/*    border-right: 1px solid #e1e1e1 !important;*/
/*    padding-bottom: 5px !important;*/
/*    border-radius: 5px;*/
/*    box-shadow: 5px 5px 13px #e4e4e4, -5px -5px 13px #f2f2f2;*/
/*}*/

/*.block-products-list .product-item .price-box {*/
/*    margin-top: 60px;*/
/*}*/

div.block-content div.products-grid .product-item-details {
    display: flex;
    flex-direction: column;
    height: 200px!important;
}

div.detailPro {
    flex-grow: 1 !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2){
    div.block-content div.products-grid .product-item-details {
        display: flex;
        flex-direction: column;
        height: 200px!important;
    }

    div.detailPro {
        flex-grow: 1 !important;
    }
}

.product-item-actions .actions-primary {
    float: left;
}

.product-item-actions .actions-primary+.actions-secondary {
    float: right;
    text-align: right;
    width: auto;
    padding: 0;
}

.block-products-list .products-grid .product-item-actions {
    border-top: 1px solid #e9eaec;
    padding: 5px 0px;
}

/* --------------- Amasty Blog Pro --------------- */

.amblog-post-container .amblog-shot>p, .amblog-post-container .amblog-content>p
, .amblog-post-container .amblog-content>ul
, .amblog-post-container .amblog-content>ol{
    line-height: 1.7 !important;
    font: 400 15px/1.35 Sarabun, Helvetica Neue, Verdana, Arial, sans-serif;
}

.amblog-btn{
    display: none;
}

/* --------------- END Amasty Blog Pro --------------- */

/* --------------- Mobile Menu 2 Tab --------------- */

@media screen and (max-width:767px){
    .nav-sections-item-title{width: 50%;}
}

/* --------------- END Mobile Menu 2 Tab--------------- */

/* --------------- Amasty Shopby premium --------------- */

.filter-options-content{
    padding: 5px 10px 5px 10px;
}

.sidebar .filter-options-content .item>a {
    display: inline !important;
}

.filter-options-title {
    margin-left: 15px !important;
    padding: 15px 30px 0 0 !important;
}

.catalog-topnav .filter-options  {
    display: flex !important;
    flex-wrap: unset !important;
    overflow-x: scroll;
    white-space: nowrap;
    float: none;
    width: 100% !important;
}

.catalog-topnav .filter-options-content{
    display: contents !important;
}

.catalog-topnav .filter-options-title{
    display: none;
}

.catalog-topnav li.item{
    display: inline-block;
}

.catalog-topnav .am-swatch-options{
    display: flex;
    flex-direction: row;
}

.catalog-topnav .am-shopby-swatch-label .count, .catalog-topnav .am-shopby-swatch-label .filter-count-label{
    display: none !important;
}

.catalog-topnav .am-swatch-options .swatch-option{
    margin: 0 5px 0 5px;
}

.catalog-topnav .filter-options-content .item>a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.catalog-topnav .filter-options-content .am-shopby-swatch-label{
    inline-size: 70px;
    overflow-wrap: break-word;
    white-space: normal;
    align-items: center;
    text-align: center;
}

.catalog-topnav .filter-options-content .am-shopby-swatch-label .label{
    margin-right: 0px !important;
}

.catalog-topnav .item:before {
    display: none !important;
}

.catalog-topnav .amshopby-choice{
    display: none !important;
}

.catalog-topnav a[class^='am-filter-item-']{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex: 1 0 auto;
    padding: 8px;
    margin: 0px 6px;
    border-radius: 4px;
    box-sizing: border-box;
    height: 36px;
    min-width: 36px;
    border: solid 1px ;
}

@media only screen and (max-width: 767px){
    .catalog-topnav {
        display: block;
    }

    .sidebar .block.filter .block-title.filter-title:not([data-count="0"]):before{
        display: none;
    }
}

/* --------------- END Amasty Shopby premium --------------- */

/* ---------------  Amasty GDPR --------------- */
.amgdprcookie-bar-container{
    padding: 10px 10px;
}

.amgdprcookie-bar-block{
    display: flex;
    opacity: 1;
    /*margin-top: -6px;*/
}

.amgdprcookie-buttons-block{
    margin-bottom: 30px !important;
    /*margin-top: 13px;*/
}

.amgdprcookie-bar-container{
    opacity: 0.9;
    padding: unset;
}

.amgdprcookie-policy{
    margin-top: 18px;
    margin-right: 10px;
    margin-left: 10px;
}

.amgdprcookie-button{
    padding: 10px 15px 10px 15px !important;
    flex-basis: unset !important;
    margin-top: 5px;
}
@media only screen and (min-width: 1401px){
    .amgdprcookie-policy{
        max-width: 85% !important;
        padding-left: 10px;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px){
    .amgdprcookie-policy {
        max-width: 545px !important;
    }

    .amgdprcookie-button{
        padding: 10px 15px !important;
        margin-top: 16px;
    }

    .amgdprcookie-buttons-block{
        margin-right: -30px !important;
    }
}

@media only screen and (max-width: 767px){
    .amgdprcookie-bar-block{
        display: block;
    }

    .amgdprcookie-bar-container .amgdprcookie-policy{
        margin-bottom: unset !important;
    }

    .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button{
        /*margin-bottom: 63px !important;*/
        margin: 10px;
    }
}

.amgdprcookie-toggle-cookie .amgdprcookie-input:checked:not([disabled])+.amgdprcookie-label {
    background: #FFC107;
}

.amgdprcookie-groups-modal .amgdprcookie-done {
    background-color: #414b56 !important;
}

.amgdprcookie-groups-modal .amgdprcookie-done:hover {
    background-color: #FFC107;
}

.amgdprcookie-cookie-container .amgdprcookie-options {
    color: #FFC107;
}

.amgdprcookie-button.-settings{
    display: none;
}
/* ---------------  END Amasty GDPR --------------- */

/* --------------- Amasty Checkout --------------- */

.amcheckout-step-container .amcheckout-summary-container .minicart-items .product-image-container {
    height: 80px !important;
    width: 80px !important;
}

.amcheckout-step-container .amcheckout-shipping-methods .amcheckout-method .col-carrier{
    display: none;
}

.fieldset>.field:not(.choice)>.control{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.fieldset.address div[name*=".street.0"], .fieldset.address div[name*=".street.2"]{
    padding-right: 7px;
}

.fieldset.address div[name*=".street.1"], .fieldset.address div[name*=".street.3"]{
    padding-left: 7px;
}

.fieldset.address div[name*=".street.1"]{
    margin-top: unset;
}

.amcheckout-step-container .amcheckout-shipping-methods .amcheckout-method.-selected, .amcheckout-step-container .amcheckout-shipping-methods .amcheckout-method.-selected,
.amcheckout-step-container .amcheckout-title>.amcheckout-icon,
.amcheckout-step-container input[type='checkbox']:checked+label:before{
    border-color: #414b56;
}

.amcheckout-step-container input[type='checkbox']+label:hover:before,
.amcheckout-step-container input[type='radio']+label:hover:before,
.amcheckout-step-container input[type='checkbox']:checked+label:before,
.amcheckout-step-container input[type='radio']:checked+label:before{
    border-color: #414b56;
    background-color: #414b56;
}

.amcheckout-step-container button:not(.braintree-googlepay-button):not(.ui-datepicker-trigger):not(.gpay-card-info-container),
.amcheckout-step-container .amcheckout-button:not(.braintree-googlepay-button):not(.ui-datepicker-trigger):not(.gpay-card-info-container),
.amcheckout-step-container button:not(.braintree-googlepay-button):not(.ui-datepicker-trigger):not(.gpay-card-info-container){
    background-color: #414b56;
}

.table-checkout-shipping-method  .amcheckout-items{
    flex-direction: column;
}

.table-checkout-shipping-method  .amcheckout-items .amcheckout-method{
    width: 100%;
    margin-top: 10px;
}

.am-checkout.-modern .authentication-wrapper .action-auth-toggle{
    background: #414b56!important;
    padding: 5px 20px!important;
    height: auto!important;
    border-radius: 2px!important;
    color: #fff!important;
}

.amcheckout-step-container .amcheckout-summary-container .amcheckout-title{
    background: #414b56;
}

.am-checkout  .pslogin-block  .pslogin-clearfix{
    justify-content: flex-start;
}

.amcheckout-step-container input[type='text']{
    color: #414b56;
}

.amcheckout-step-container .amcheckout-summary-container .product-item .delete {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    box-sizing: border-box;
    padding: 0;
    width: 10px;
    height: 15px;
    border: 0;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjE2NyAxNWg3LjU1OGwuOTUtOC45NThILjI2TDEuMTY3IDE1em01Ljg5LTEyLjc3MlYuNTEyQS41MS41MSAwIDAgMCA2LjU1MiAwaC0zLjIxYy0uMjggMC0uNTA1LjIzLS41MDUuNTEyVjIuMmMtMS4wODUuMTIzLTEuNzExLjMxNS0yLjgzNi43MjRWNC41bDEwIC4xMThWM3MtLjk1NC0uNTM0LTIuOTQyLS43NzJ6TTYuMDUgMi4xMzRhMTguMDggMTguMDggMCAwIDAtMi4yNTgtLjAxNXYtLjkwNWMwLS4xNC4xMTEtLjI1NS4yNTItLjI1NWgxLjc1MmMuMTQxIDAgLjI1NC4xMTUuMjU0LjI1NXYuOTJ6IiBmaWxsPSIjNTc1ODU1Ii8+PC9zdmc+) center no-repeat;
    background-size: contain;
}
/* ---------------  END Amasty Checkout --------------- */

/* ---------------  Amasty XSearch --------------- */

.amsearch-block-header .amsearch-title{
    color: black;
}

.actions-secondary>.action{
    width: 30px !important;
}

.amsearch-more-results .amsearch-link{
    color: #2e2e2e;
}

.block-search .search .control{
    position: unset !important;
}

.amsearch-results .amsearch-item .item-name, .amsearch-products {
    color: #34343c;
}

.search .amsearch-loupe{
    display: none !important;
}

.amsearch-close, .search .amsearch-loupe:hover {
    -webkit-filter: unset;
    filter: unset;
}
.amsearch-wrapper-content .amsearch-wrapper-inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.amsearch-wrapper-input .amsearch-input{
    color: white !important;
}

.amsearch-input-wrapper .amsearch-input:focus{
    box-shadow: 0 0 0 9999px #000000b0 !important;
}

.amsearch-wrapper-content .product-item-actions{
    display: flex;
    flex-direction: column;
}

.minisearch .actions{
    position: unset !important;
}

.amsearch-form-container .search-autocomplete .amsearch-leftside .amsearch-products {
    background-color: #fff !important;
}

.data.item.content.amsearch-category-tab .amsearch-item .item-description{
    display: none;
}

/*new xsearch 2.4.3-p2*/
@media only screen and (min-width: 768px){
    .page-header .amsearch-wrapper-block{
        float: unset;
        width: 100% !important;
        margin-top: 40px;
    }

    .page-header .sticky-menu.active .amsearch-wrapper-block{
        margin: 0 !important;
    }

    .amsearch-input-wrapper .amsearch-input{
        color: black !important;
    }

    .container.sticky-menu.js-sticky-menu.active .header-panel-center .amsearch-wrapper-block .amsearch-form-block .amsearch-input-wrapper .amsearch-input {
        color: white !important;
    }
}

@media only screen and (min-width: 1150px){
    .page-header .amsearch-input-wrapper {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1149px){
    .page-header .features-links{
        margin-top: 25px;
    }

    .page-header .amsearch-input-wrapper{
        min-width: 283px;
        width: auto;
    }

    .page-header .features-links li{
        margin-bottom: 10px;
    }
}


.amsearch-form-block{
    justify-content: flex-start;
}

/* end new xsearch 2.4.3-p2*/


@media only screen and (min-width: 768px) and (max-width: 999px){
    .amsearch-wrapper-input{
        max-width: calc(100% / 1.75) !important;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1299px){
    .amsearch-wrapper-input{
        max-width: calc(100% / 2.15) !important;
    }
}

@media only screen and (min-width: 1300px) {
    .amsearch-wrapper-input{
        max-width: calc(100% / 1.75) !important;
    }
}

@media only screen and (max-width: 767px){
    .page-header .mobi-cart-wrapper {
        padding-top: 8px;
    }

    .amsearch-leftside {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: space-around;
        text-align: center;
    }

    .amsearch-wrapper-content .amsearch-wrapper-inner {
        display: flex;
        align-items: flex-start;
        margin-top: auto;
        flex-direction: column;
    }

    .header-search .minisearch .actions{
        position: unset !important;
    }
    /*.header-search .minisearch .action.search{*/
    /*    display: none;*/
    /*}*/

    .amsearch-wrapper-content .product-item-actions {
        flex-direction: row;
    }

    .amsearch-item .item-name, .amsearch-item .product-item-link {
        white-space: initial;
    }
    .amsearch-autocomplete-information .action.tocompare{
        display: inline !important;
    }

    .amsearch-wrapper-input {
        display: inline-block;
        width: 240px !important;
    }

    .header-search.has-cat-search .cdz-cat-search a.current-cat{
        padding: 10px 10px !important;
    }

    .header-search.has-cat-search input.input-text {
        padding-left: 10px !important;
        padding-right: unset !important;
        border: unset !important;
        box-shadow: unset !important;

    }

    .page-header .header-panel-bottom {
        text-align: end !important;
    }

    .amsearch-wrapper-inner .price-box{
        white-space: normal;
    }

    .page-header {
        min-height: unset !important;
    }

    .amsearch-wrapper-block{
        padding: 8px 0;
    }
}


/* --------------- END Amasty XSearch --------------- */

/* --------------- Amasty Free gift --------------- */
.ampromo-items-form .product-info-price{
    display: none;
}
/* --------------- END Amasty Free gift --------------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .block-products-list .products-grid .product-item {
        display: inline-block;
        display: flex;
        padding: 10px;
        margin: 10px;
        max-width: calc((30%) - 20px);
        margin-right: 10px;
        border-bottom: 1px solid #e1e1e1 !important;
        border-right: 1px solid #e1e1e1 !important;
        padding-bottom: 5px !important;
        border-radius: 5px;
        box-shadow: 5px 5px 13px #e4e4e4, -5px -5px 13px #f2f2f2;
    }



}

@media only screen and (max-width: 767px) {
    .block-products-list .products-grid .product-item {
        display: inline-block;
        display: flex;
        padding: 10px;
        margin: 10px;
        max-width: calc((50%) - 20px);
        margin-right: 10px;
        border-bottom: 1px solid #e1e1e1 !important;
        border-right: 1px solid #e1e1e1 !important;
        padding-bottom: 5px !important;
        border-radius: 5px;
        box-shadow: 5px 5px 13px #e4e4e4, -5px -5px 13px #f2f2f2;
    }
    .product-item .price-box {
        height: 45px;
    }
    .actions-primary .tocart,
    .actions-secondary>a.action {
        width: auto !important;
        border: none !important;
        border-radius: 4px !important;
        color: #fff !important;
        border-color: #414b56 !important;
        background: #414b56 !important;
        padding: 0 4px !important;
        margin-right: 4px;
    }
    .product-item .product-item-actions .actions-secondary>.action {
        color: #414b56 !important;
        background: #fff !important;
    }
}


/* Tab edit css .tabs-style-05 */

.cdz-tabs.df-tabs .tab-item {
    display: none;
}

@media only screen and (max-width: 1366px) {
    .tabs-style-05 ul.box-cate-link{
        display: flex !important;
        overflow-x: auto;
    }
}

.tabs-style-05 ul.box-cate-link li.item {
    white-space: nowrap;
    margin-bottom: 5px;
}
.tabs-style-05 .box-cate-link .item a{
    font: 400 14px/1.35 Sukhumvit Set, Helvetica Neue, Verdana, Arial, sans-serif;
 }
 .tabs-style-05 .box-cate-link .item a .item-image{
    padding: 0px;
 }
 .tabs-style-05 .box-cate-link .item a .item-title{
    padding: 7px 20px;
 }

@media only screen and (max-width: 767px) {
    .tabs-style-05 ul.box-cate-link {
        position: relative;
        background: #ffffff;
        z-index: 1;
        width: auto;
        border: 0;
        left: inherit;
        padding: 0;
        list-style: none;
        text-align: center;
        margin-bottom: 25px;
    }
    .tabs-style-05 ul.box-cate-link li.item {
        width: auto;
        -moz-border-radius: 0;
        border-radius: 0;
        display: inline-block;
        margin: 0 10px;
        border: 2px solid #e9eaec;
        text-transform: uppercase;
        color: #414b56;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        padding: 0;
        white-space: nowrap;
    }
    .tabs-style-05 .mobile-toggle {
        display: none !important;
    }
}


/* edit color Review  */

@media (min-width: 768px),
print {
    .amreview-author-details .amreview-recommended {
        max-width: 100px;
    }
}

.catalog-product-view .mdl-progress>.progressbar {
    background-color: #ED9D00;
}
/* off amreview checkbox label */
/*.amreview-recommend-wrap>.amreview-checkboxlabel:before, .amreview-gdpr-wrap>.amreview-checkboxlabel:before{*/
/*    display: none;*/
/*}*/

/* css cross-sell,up-sell product */
@media only screen and (max-width: 767px){
    .block.related .products-grid .product-item, .block.upsell .products-grid .product-item, .block.crosssell .products-grid .product-item{
      padding:10px;
      }
    .product-list-style-01 .product-item-inner {
          border-top: 1px solid #e9eaec;
      }
      .product-list-style-01 .owl-carousel.owl-loaded .owl-stage {
      padding-top: 20px;
      padding-bottom: 40px;
      }
   }
.block.related .products-grid .product-item, .block.upsell .products-grid .product-item, .block.crosssell .products-grid .product-item{
      padding-bottom: 5px !important;
      border-radius: 5px;
      box-shadow: 0px 0px 14px 0px #e4e2e2, 0px 0px 20px #ffffff;
      margin-left: 5px;
}

/* css brand size filter */
/* [แก้ตอน deploy] ใส่ scope แล้ว — เดิมเป็น global ยิงทุกหน้า ทับ swatch บน PDP/listing */
.sidebar-main .swatch-option.image,
.catalog-topnav .swatch-option.image {
    height: 80px !important;
    width: 80px !important;
}

.color_new .swatch-option.image{
    height: 20px !important;
    width: 20px !important;
    border: unset !important;
}

.sidebar-main .block.filter .filter-options .filter-options-content .item:before {
    display: none !important;
}

.sidebar-main .color_new .swatch-option-link-layered{
    padding: 10px !important;
    padding-left: 0px !important;
}

.am-swatch-options .am-shopby-swatch-label{
    display: flex !important;
}

.filter-options-item .filter-options-content .am-shopby-swatch-label .label {
    margin-right: 5px !important;
    margin-top: 2px !important;
    font: 500 14px/1.35 Sukhumvit Set, Helvetica Neue, Verdana, Arial, sans-serif;
}

/* show old price in product page */
.old-price.sly-old-price {
    display: inline-block !important;
}

/* review form: unset strong of product name */
.review-add .review-legend strong{
    margin-top: unset;
}

/* edit wishlist icon line */
.cart-container .cart.table-wrapper .actions-toolbar>.action.action-towishlist:before{
    line-height: 1.5;
}

/* edit coupon style in wishlist page */
button.action.primary.action-apply{
    color: #fff;
    border-color: #414b56;
    background: #414b56;
    font: 600 14px/1.35 Sukhumvit Set, Helvetica Neue, Verdana, Arial, sans-serif;
}


/* new 2.4 */

.table-comparison .cell {
    width: 200px;
}

@media only screen and (max-width: 767px){
    .block-dashboard-addresses .edit>span {
        display: none;
    }

    .block-dashboard-info .block-title .action.edit{
        font-size: 0 !important;
        padding: 7px 10px;
    }

    .amsearch-input-wrapper input[type="text"]{
        color: #71717A !important
    }

    .box-tocart.large-box-tocart.att-scr-qty.scr-bottom.active{
        bottom: 40px !important;
    }
}


.product-item-name>a, .product.name a>a {
    color: #333 !important;
}

.block-content .cart-total {
    background: #f5f5f5 !important;
    padding: 20px !important;
    border-top: 1px solid rgba(245,245,245,0.5) !important;
}

.account .form-address-edit .actions-toolbar .action.primary, a.action.primary, .action.primary, .action-primary, .action.primary, .cdz-popup-area .cdz-popup .actions-toolbar .primary button {
    color: #fff !important;
    border-color: #414b56 !important;
    background: #414b56 !important;
    font: 600 14px/1.35 Sukhumvit Set, Helvetica Neue, Verdana, Arial, sans-serif !important;
}

.checkout-shipping-address .custom-span {
    color: #A93226;
    font-weight: bold;
}

.form-address-edit input[type="text"], .form-address-edit input[type="password"], .form-address-edit input[type="url"], .form-address-edit input[type="tel"], .form-address-edit input[type="search"], .form-address-edit input[type="number"], .form-address-edit input[type="datetime"], .form-address-edit input[type="email"]{
    color: black;
}

.form-address-edit .fieldset>.field:not(.choice)>.control {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.file-upload {
    background-color: #ffffff;
    margin: 0 auto;
    padding: 20px;
}

.file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #414b56;
    border: none;
    padding: 10px;
    border-radius: 4px;
    /*border-bottom: 4px solid #15824B;*/
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

.file-upload-btn:hover {
    background: #414b56;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.file-upload-btn:active {
    border: 0;
    transition: all .2s ease;
}

.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap {
    margin-top: 20px;
    border: 4px dashed #414b56;
    position: relative;
}

.image-dropping,
.image-upload-wrap:hover, .drag-text h3:hover {
    background-color: #414b56;
    border: 4px dashed #ffffff;
    color: #fff;
}

.image-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
}

.drag-text {
    text-align: center;
}

.drag-text h3 {
    font-weight: 100;
    text-transform: uppercase;
    color: #b2b9be;
    padding: 60px 0;
}

.file-upload-image {
    max-height: 200px;
    max-width: 200px;
    margin: auto;
    padding: 20px;
}

.remove-image {
    width: 200px;
    margin: 0;
    color: #fff;
    background: #cd4535;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #b02818;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

.remove-image:hover {
    background: #c13b2a;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all .2s ease;
}

div#switcher-language-nav {
    position: absolute;
    bottom: -100px;
    width: 100%;
}

.nav-sections .switcher a img {
    margin: 0 5px 0 0;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 5px;
}

.product-items.slick-slider .slick-slide .product-item {
    display: inline-block!important;
    margin: auto!important;
    max-width: 205px;
}

.block-products-list .products-grid .product-item {
    margin-right: 10px;
    border-bottom: 1px solid #e1e1e1 !important;
    border-right: 1px solid #e1e1e1 !important;
    padding-bottom: 5px !important;
    border-radius: 5px;
    box-shadow: 5px 5px 13px #e4e4e4, -5px -5px 13px #f2f2f2;
    /*height: 450px !important;*/
}

/*.product-item .product-reviews-summary {*/
/*    margin-bottom: 40px;*/
/*}*/

.box-tocart.large-box-tocart.att-scr-qty.scr-bottom.active{
    z-index: 10!important;
}

#back-top {
    bottom: 7px !important;
}

.actions-primary span{
    font-weight: bold !important;
    padding-top: 5px;
}

.data table totals {
    table-layout: fixed!important;
}

.cart-totals .amount, .opc-block-summary .table-totals .amount {
    padding-right: 4px;
    text-align: right;
    white-space: inherit!important;
    width: 100px!important;
}
@media only screen and (max-width: 820px) and (-webkit-min-device-pixel-ratio: 2){
    .checkout-payment-method.submit .payment-methods {
        margin-bottom: 80px !important;
    }
}




/* --------------- Disney's Stitch --------------- */

.stitch .stitch-main img.stitch2.image-main,
.stitch .stitch-hover a img.stitch2.image-hover{
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 820px) {
    .stitch {
        display: none;
    }

    .stitch-mobile {
        display: block;
    }
    .stitch-mobile .stitch-hover {
        display: block;
        position: relative;
        width: 130px;
        height: auto;
    }

    .stitch-mobile img.stitch2.image-close {
        -webkit-backface-visibility: hidden;
        display: flex;
        position: sticky;
        right: 1%;
        bottom: 20%;
        cursor: pointer;
        max-width: 25px;
        height: auto;
        /*margin-bottom: 30px;*/
        margin-right: 10px;
        margin-left: auto;
    }

    .stitch-mobile img.stitch2.image-hover{
        cursor: pointer;
    }


}

@media only screen and (min-width: 821px) {
    .stitch {
        display: block;
    }

    .stitch-mobile {
        display: none;
    }

    .stitch:hover .stitch-hover {
        display: block;
        position: relative;
        width: 200px;
        height: auto;
    }

    .stitch:hover .stitch-main {
        display: none;
    }

    .stitch:hover .stitch-hover img.stitch2.image-close {
        position: fixed;
        right: 1%;
        cursor: pointer;
        max-width: 25px;
        height: auto;
        margin-bottom: 20px;
        /*margin-right: 10px;*/
        margin-left: 20px;
    }

    .stitch:hover .stitch-hover img.stitch2.image-hover{
        cursor: pointer;
    }

    .stitch .stitch-main {
        display: flex;
        flex-direction: row-reverse;
        width: 80px;
        height: auto;
    }

    .stitch .stitch-hover {
        display: none;
    }

}

.slick-prev, .slick-next {
    z-index: 9;
}

.box-tocart.att-scr-qty.active .scr-pdeal{
    display: none !important;
}

@media only screen and (min-width: 264px) and (max-width: 648px) and (-webkit-min-device-pixel-ratio: 2) {

    .amsearch-message-block {
        color: black!important;
    }
}

.cdz-tab-pane.active {
    height: 400px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    min-height: 450px !important;
}

/* ---------------  tinkerbell --------------- */
.page-product-bundle.catalog-product-view .bundle-options-wrapper .field.option input, .page-product-bundle.catalog-product-view .bundle-options-wrapper .field.option select {
    max-width: 300px;
    vertical-align: bottom!important;
}

.page-product-bundle.catalog-product-view .bundle-options-container .bundle-options-wrapper {
    width: 100% !important;
}

.page-product-bundle.catalog-product-view .bundle-options-container .block-bundle-summary {
    width: 100% !important;
}

.bundle-options-container {
    width: 50% !important;
    float: right !important;
}

.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary, .page-product-bundle .bundle-actions .action.primary {
    width: 100%;
    border-radius: 4px;
    border: 1px solid;
}

.page-product-bundle.catalog-product-view .block-bundle-summary .box-tocart .actions {
    display: flex;
}

.page-product-bundle.catalog-product-view .block-bundle-summary .box-tocart .action.primary.buy-now {
    margin-top: 0px;
}

.nested.options-list {
    width: 100%;
}

.bundle__control-thumbnail {
    width: 90px;
    height: 90px;
}

.name-price {
    margin-left: 20px;
    /*width: 620px!important;*/
}

/*.input-checkbox {*/
/*    position: relative;*/
/*    width: 15%!important;*/
/*}*/

/*.input-radio {*/
/*    position: relative;*/
/*    width: 15%!important;*/
/*}*/

.image-thumbnail {
    width: 75%!important;
    margin-left: 16px;
}

label.label.label-not-recieved {
    margin-left: 30px;
}

.add-product {
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: right;
}

.bundle-options-wrapper .fieldset > .field.required > .label:after, .fieldset > .fields > .field.required > .label:after, .fieldset > .field._required > .label:after, .fieldset > .fields > .field._required > .label:after {
    content: '* โปรดระบุ';
    font-size: 13px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .bundle-options-container {
        width: 50% !important;
        float: right !important;
    }
}

@media only screen and (min-width: 264px) and (max-width: 648px) and (-webkit-min-device-pixel-ratio: 2) {
    .bundle-options-container {
        width: 100% !important;
    }

    /*.input-checkbox {*/
    /*    position: relative;*/
    /*    width: 20%!important;*/
    /*}*/

    /*.input-radio {*/
    /*    position: relative;*/
    /*    width: 20%!important;*/
    /*}*/

    .page-product-bundle.catalog-product-view .bundle-options-wrapper .field.option input, .page-product-bundle.catalog-product-view .bundle-options-wrapper .field.option select {
        max-width: 300px;
        vertical-align: bottom!important;
    }

    .image-thumbnail {
        width: 80%!important;
        margin-left: 16px;
    }

    label.label.label-not-recieved {
        margin-left: 30px;
    }

    .page-product-bundle.catalog-product-view .block-bundle-summary .box-tocart .actions {
        display: block;
    }

    .bundle-info button#product-addtocart-button {
        margin-bottom: 10px;
    }
    span.name-bundle-option, label.label-bundle-checkbox   {
        font-size: 14px;
    }
}

.input-group {
    clear: both;
    position: relative;
}

.input-group button {
    min-width: 38px;
    width: auto;
    transition: all 300ms ease;
}

.input-group .minus,
.input-group .plus {
    font-weight: bold;
    height: 25px;
    padding: 0;
    width: 38px;
    position: relative;
    border-radius: 0px;
    border: 1px solid #E9EAEC;
}

.bundle-options-container .nested .field.qty {
    margin-top: 0px;
}

.input-group .minus {
    border-right-style: none;
}

.input-group .minus:hover, .input-group .plus:hover {
    color: #fff;
    background: #414b56;
}

.input-group .plus {
    border-left-style: none;
}

.page-product-bundle .bundle-options-container .input-text.qty {
    border: 1px solid #E9EAEC;
    border-radius: 0px;
    position: relative;
    height: 25px;
    left: -5px;
    right: 5px;
    text-align: center;
    width: 50px;
    display: inline-block;
    font-size: 13px;
    resize: vertical;
    border-left-style: none;
    border-right-style: none;
    color: #000000;
    font-weight: bold;
}

.plus {
    left: -5px;
}

input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

.bundle-info {
    order: 2;
}

.bundle-info button#product-addtocart-button {
    margin-right: 15px;
}

.bundle-options-container .block-bundle-summary .bundle-summary {
    margin-top: 0px;
}

.bundle-options-wrapper .fieldset > .field.required > .label:after, .fieldset > .fields > .field.required > .label:after, .fieldset > .field._required > .label:after, .fieldset > .fields > .field._required > .label:after {
    content: '* โปรดระบุ';
}

.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary>span:before,
.page-product-bundle .bundle-actions .action.primary>span:before,
.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary>span:after,
.page-product-bundle .bundle-actions .action.primary>span:after {
    content: none;
}

.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary>span:after {
    content: none;
    top: 0;
}

.page-product-bundle .bundle-options-container .block-bundle-summary .box-tocart .action.primary>span, .page-product-bundle .bundle-actions .action.primary>span {
    padding-left: 0px;
}

.add-product input[type="checkbox"]:hover::after {
    transform: scale(0) !important;
}
.bundle-options-container .action.back {
    margin-bottom: 0px;
}

.page-product-bundle.catalog-product-view .block-bundle-summary .product-details .price-box .price {
    font-weight: 600;
}

#bundle-summary .total_price, #bundleSummary .price-box.price-configured_price, .image-thumbnail span.price-container.tax.weee.rewards_earn {
    display: none;
}

/* --------------- end tinkerbell --------------- */

a.action.sorter-action.sort-desc {
    display: none !important;
}


.product-items.widget-product-grid ul.slick-dots {
    display: none !important; 
} 

.products-grid .slick-initialized .slick-slide { 
    width: auto !important; 
}

div.block-content div.products-grid .product-item-details {
    height: 220px!important;
}

.products-grid .slick-slide .product-item-image {
    height: auto !important;
}

/* --------------- 2.4.6 --------------- */
@media only screen and (max-width: 639px) {
    .account .order-details-items .table-order-items .product-item-name, .account .order-details-items .table-order-items .price-including-tax, .account .order-details-items .table-order-items .price-excluding-tax, .account .order-details-items .table-order-items .items-qty {
        display: inline-block;
        vertical-align: unset!important;
    }
}

.am-checkout .pslogin-block .pslogin-clearfix {
    justify-content: flex-start;
    flex-direction: row;
}

/*@media only screen and (max-width: 320px) {*/
/*    .cdz-dd-content {*/
/*        left: -303px !important;*/
/*    }*/
/*}*/

@media only screen and (max-width: 639px) {
    .table-wrapper .table:not(.totals):not(.table-comparison) tfoot {
        display: block;
        overflow-x: visible !important;
    }

    .form-login .secondary {
        padding-top: 0px !important;
    }

    a.button.action.secondary.view-cart.visible-xs {
        margin-bottom: 10px;
        text-align: center;
    }
    .page-print .logo {
        float: left;
    }

    .cart-container {
        display: flex;
        flex-direction: column;
    }

    cart-container .cart-summary {
        background: #f5f5f5;
        padding: 20px;
        order: 2!important;
    }
}

a.button.action.secondary.view-cart.visible-xs {
    margin-bottom: 10px;
    text-align: center;
}

.form-login .secondary {
    padding-top: 0px !important;
}

.block-addresses-list .block-content{
    overflow: scroll;
}

.product-items.widget-product-grid ul.slick-dots {
    display: none !important;
}

.products-grid .slick-initialized .slick-slide{
    width: auto !important;
}

.products-grid .slick-slide .product-item-image {
    height: auto !important;
}

div.block-content div.products-grid .product-item-details {
    height: 220px!important;
}

.cart.actions .action.towishlist {
    margin-bottom: 10px !important;
}

.row.cdz-tabs {
    width: 1000px !important;
}

ul.groupmenu-drop.slidedown {
    width: 1000px;
}

.product-item .product-label {
    position: absolute;
    top: 10px; /* Adjust as needed */
    left: 10px;
    width: auto; /* Ensures it adjusts dynamically */
    max-width: 100%;
    height: auto; /* Adjust height to fit */
    z-index: 10; /* Ensures label is above the image */
}

.product-item img {
    max-width: 100%;
    height: auto;
}

.cart-summary div#block-shipping {
    display: none;
}

/* --------------- END 2.4.6 --------------- */

/* --------------- Product Label --------------- */

.gallery-container .label-wrap.left .cdz-product-labels {
    margin-left: 0px;
}

.left.label-wrap.horizontal {
    top: 0px;
}

@media only screen and (max-width: 639px) {
    .gallery-container .label-wrap.left .cdz-product-labels {
        margin-left: -10px;
    }
}



/* --------------- END Product Label --------------- */

/* --------------- pslogin custom --------------- */
.block.block-customer-login {
    padding: 10px 0 0 0 !important;
}

.pslogin-block.pslogin-login {
    width: 100%;
    order: 1;
}

ul.pslogin-clearfix {
    display: flex;
    flex-direction: column;
}

.block-authentication .form-login .actions-toolbar {
    flex-direction: column !important;
}

form[name="loginForm"] {
    margin-top: 32px;
}

.head-login {
    margin-top: 42px;
    text-align: center;
}

.pslogin-block.pslogin-login .pslogin-buttons {
    text-align: center;
}

.pslogin-spacer {
    margin-top: 32px;
    margin-bottom: 32px;
}

.block.block-customer-login {
    margin-top: 32px;
}

li.pslogin-button {
    display: contents;
    text-align: center;
}

.customer-account-login .pslogin-buttons .ps-default {
    max-width: none;
}

@media only screen and (min-width: 264px) and (max-width: 648px) and (-webkit-min-device-pixel-ratio: 2) {
    .modal-popup.modal-slide .modal-inner-wrap[class] {
        background-color: #ffffff;
    }
}

a.action.sorter-action.sort-desc {
    display: none;
}

.mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-upgraded {
    font-size: 14px;
}

.am-checkout .pslogin-spacer.pslogin-clearfix {
    display: none;
}

/* --------------- end pslogin custom --------------- */

/* --------------- firebase --------------- */
@media only screen and (min-width: 768px) {
    .page-header .account-trigger:before, .page-header #top-wishlist:before {
        position: absolute;
        left: 0;
        top: 0;
        padding: 3px 0;
        color: #000;
        width: 38px;
        height: 38px;
        line-height: 24px;
        margin-right: 5px;
        text-align: center;
        border-radius: 100%;
    }

    .page-header .action.showcart:before {
        position: absolute;
        left: 0;
        top: -6px;
        padding: 3px 0;
        color: #000;
        width: 38px;
        height: 38px;
        line-height: 38px;
        margin-right: 5px;
        text-align: center;
        border-radius: 100%;
    }
}

a.account-trigger.cdz-dd-trigger, a.account-trigger.cdz-dd-trigger {
    padding-left: 35px !important;
}

@media only screen and (min-width: 768px) {
    .page-header .features-links #top-wishlist, .page-header .features-links .account-trigger, .page-header .features-links .showcart {
        position: relative;
        text-decoration: none;
        display: block;
        padding-left: 40px;
        transition: all 500ms ease;
        backface-visibility: hidden;
    }

}

/*@media only screen and (min-width: 264px) and (max-width: 648px) and (-webkit-min-device-pixel-ratio: 2) {*/
/*    #maincontent ul {*/
/*        padding-left: 20px ;*/
/*    }*/
/*}*/

.customer-account-login .page-title-wrapper .page-title {
    display: none;
}

.customer-account-login .login-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0px;
    background: #fff;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

@media only screen and (min-width: 768px) {
    .customer-account-login .login-container {
        width: 100%;
        margin: 0 auto;
    }
}

a.action.showcart.cdz-dd-trigger.cdz-top-link {
    margin-top: -2px;
}

a#top-wishlist {
    margin-top: 1.5px;
}

a.action.login.primary {
    width: 100%;
    text-align: center;
    background-color: #FFC75B !important;
    border-color: #FFC75B !important;
    color: black !important;
    font-weight: 900 !important;
}

.acount-menu .account-menu-items {
    padding-bottom: 0px;
}

.info-summary-bottom p {
    text-align: left;
    padding-left: 25px;
    font-size: 11px;
    font-weight: 600;
}

a.contact-link {
    display: none !important;
}

.acount-menu .account-menu-items>li>a.order-link:before {
    content: "\f1b2" !important;
}

.acount-menu .account-menu-items>li>a.mst-rewards:before {
    content: "\f555" !important;
}

.info-summary-bottom i.fa.fa-sign-out {
    font-family: 'FontAwesome' !important;
}

.account-menu-items li.item.link.compare {
    display: none;
}

.authorization-link.authorization-style-01 li.language-link {
    display: none;
}

.cdz-dd-content-inner.nice-scroll {
    display: grid;
}

.account-info-summary {
    order: 2;
}

.account-info-summary .info-summary-top .icon-account {
    display: none;
}

.account-info-summary .info-summary-bottom .title {
    display: none;
}

/* --------------- end firebase --------------- */

/* --------------- checkout --------------- */
.cart-summary button.action.primary.checkout, #minicart-content-wrapper a.action.button.secondary, .bundle-info button#product-buy-now-button, .product-info-main button#product-buy-now-button, .cart-informed-modal a.button.action.secondary.view-cart {
    background-color: #FFC75B !important;
    border-color: #FFC75B !important;
    color: black !important;
    font-weight: 900 !important;
}

.bundle-info button#product-addtocart-button, .product-info-main button#product-addtocart-button, .cart-informed-modal .actions button.action {
    background-color: white !important;
    color: black !important;
    font-weight: 900;
    border: 1px solid #DBDBDB !important;
}

.cart-summary button.action.primary.action-apply {
    background-color: black !important;
    width: 100%;
}

.modal-inner-wrap button.action-close {
    background-color: #101010 !important;
}

.cart-summary input#coupon_code {
    border: solid 1px #E4E4E7;
    background-color: white;
    height: 35px;
    width: 100%;
}

.block-addresses-list .edit-info {
    font-size: 14px;
    font-weight: 400;
    color: #2E2E2E
}

.tooltip .tooltip-address {
    visibility: hidden;
    background-color: #414b56;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    left: 105%;  /* Moves tooltip to the right */
    top: 50%;
    transform: translateY(-50%);  /* Centers tooltip vertically */
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;  /* Prevents text from wrapping */
}

.tooltip:hover .tooltip-address {
    visibility: visible;
    opacity: 1;
}

.product-list-style-01 .action.primary {
    background-color: #101010 !important;
}

.additional-addresses td.col.actions {
    display: none;
}

button.action.primary.add {
    display: none;
}

.block-dashboard-info a.action.edit {
    display: none;
}

.block-addresses-default a.action.edit {
    display: none;
}

.form-edit-account .field.choice {
    display: none;
}

a#product-buy-now-button {
    display: inline-block;
    width: calc(50% - 15px);
    padding: 0;
    height: 40px;
    letter-spacing: 0;
    margin-bottom: 10px;
    background-color: #FFC75B !important;
    border-color: #FFC75B !important;
    color: black !important;
    font-weight: 900 !important;
    float: right;
}

#block-discount .title[data-role="title"]::after {
    content: none !important;
    display: none !important;
}

/* --------------- end checkout --------------- */

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 290px;
    background-color: #414b56;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    left: 105%;  /* Moves tooltip to the right */
    top: 50%;
    transform: translateY(-50%);  /* Centers tooltip vertically */
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;  /* Prevents text from wrapping */
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

ul.groupmenu-drop.slidedown.open {
    width: 100%;
}

.product.attribute.description ul ul, ol ul, ul ol, ol ol {
    padding-left: 40px;
}

.amgdprcookie-bar-container.modal-popup {
    position: fixed!important;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

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

.button-disabled {
    background-color: #ccc !important;  /* gray background */
    color: #666 !important;             /* gray text */
    cursor: not-allowed !important;     /* show not-allowed cursor */
    pointer-events: none !important;    /* disable clicks */
    opacity: 0.7;
}


/* --------------- amasty - promo - banner --------------- */

.ambanners.ambanner-4 {
    position: relative;
    height: 80px; /* Adjust to match your expected banner height */
    overflow: hidden;
    margin-bottom: 10px;

}

.ambanners.ambanner-4::before {
    content: "";
    /*position: absolute;*/
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.skeleton-wrapper-adv-style-425 {
    position: relative;
    height: 250px; /* Adjust to match your expected banner height */
    overflow: hidden;
    margin-bottom: 10px;

}

.skeleton-wrapper-adv-style-425::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.device-slider-iphone {
    position: relative;
    height: 390px;
    overflow: hidden;
}

.device-slider-samsung {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.device-slider-ipad {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.device-slider-ipad::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.device-slider-iphone::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.device-slider-samsung::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.iphone-accessories {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.iphone-accessories::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.accessories-samsung, .s25-series-feature, .s24ultra-feature, .accessories-samsung-2024 {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.accessories-samsung-2024::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.accessories-samsung::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.s25-series-feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

.s24ultra-feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

@keyframes shimmer {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(100%);
    }
}

.rewardssocial-buttons .buttons-facebook-like {
    position: relative;
    width: 90px; /* Adjust to match your expected banner height */
    overflow: hidden;
    margin-bottom: 10px;

}

.rewardssocial-buttons .buttons-facebook-like::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
}

@media (max-width: 767px) {
    .ambanners.ambanner-4 {
        height: 110px;
    }
    .skeleton-wrapper-adv-style-425 {
        height: 170px;
    }
    .device-slider-iphone {
        height: 295px;
    }
    .device-slider-samsung {
        height: 220px;
    }
    .device-slider-ipad {
        height: 220px;
    }
    .iphone-accessories, .accessories-samsung, .s24ultra-feature, .accessories-samsung-2024 {
        height: 115px;
    }
    .s25-series-feature {
        height: 120px;
    }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ambanners.ambanner-4 {
        height: 200px;
    }
    .skeleton-wrapper-adv-style-425 {
        height: 215px;
    }

    .device-slider-iphone {
        height: 220px; /* Adjust for smaller screens */
    }
    .device-slider-samsung {
        height: 250px;
    }
    .device-slider-ipad {
        height: 250px;
    }
    .iphone-accessories, .accessories-samsung, .s24ultra-feature, .accessories-samsung-2024 {
        height: 125px; /* Adjust for smaller screens */
    }
    .s25-series-feature {
        height: 130px;
    }
}

@media only screen and (min-width: 820px) and (max-width: 1180px) {
    .ambanners.ambanner-4 {
        height: 80px;
    }
    .skeleton-wrapper-adv-style-425 {
        height: 230px;
    }
    .device-slider-iphone {
        height: 240px; /* Adjust for smaller screens */
    }
    .device-slider-samsung {
        height: 250px;
    }
    .device-slider-ipad {
        height: 250px;
    }
    .iphone-accessories, .accessories-samsung, .s25-series-feature, .s24ultra-feature, .accessories-samsung-2024 {
        height: 140px; /* Adjust for smaller screens */
    }
}

@font-face {
    font-display: swap;
}

/* --------------- amasty - promo - banner END --------------- */

/* --------------- cookie consent --------------- */

.amgdprcookie-bar-container{
    background-color: #F4F4F5!important;
}

.amgdprcookie-bar-container .amgdprcookie-policy{
    color: #3F3F46 !important;
    font-size: 13px;
    font-weight: 600;
    --max-lines: 3;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
    padding-right: 1rem;
}

.amgdprcookie-bar-container .amgdprcookie-button.-save{
    background-color: #FFC75B !important;
    border-color: #FFC75B !important;
    color: #09090B !important;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px 8px 16px !important;
}

.amgdprcookie-bar-container .amgdprcookie-button.-save:hover {
    background-color: #101010 !important;
    border-color: #101010 !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px 8px 16px !important;
}

.amgdprcookie-bar-container .amgdprcookie-link,.amgdprcookie-bar-container .amgdprcookie-policy a{
    color: #FFB932;
    font-weight: 600;
    font-size: 13px;
}

.amgdprcookie-policy{
    margin-top: 12px;
    margin-right: 16px;
    margin-left: 16px;
    margin-bottom: 12px !important;
}

.amgdprcookie-bar-container .action-close {
    padding: 0px !important;
    top: 5px !important;
    right: 90px;
}

.amgdprcookie-buttons-block .amgdprcookie-button {
    margin-top: 12px!important;
    margin-bottom: 12px!important;
}

.amgdprcookie-buttons-block{
    margin-bottom: 0px !important;
    margin-right: 16px;
}

.amgdprcookie-bar-container.modal-popup {
    border-top: solid 1px #DBDBDB !important;
}

.amgdprcookie-buttons-block .amgdprcookie-button:active, .amgdprcookie-buttons-block .amgdprcookie-button:focus {
    box-shadow: none !important;
}

@media only screen and (max-width: 767px){
    .amgdprcookie-bar-block{
        display: block;
    }

    .amgdprcookie-bar-container .amgdprcookie-policy{
        margin-bottom: unset !important;
    }

    .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button{
        margin: 12px;
    }

    .amgdprcookie-buttons-block{
        margin-bottom: 0px !important;
        margin-right: 0px !important;
    }

    .amgdprcookie-bar-container .action-close {
        margin-top: 0px !important;
        right: 0px !important;
    }
}

/* --------------- cookie consent END --------------- */

/* --------------- header mobile --------------- */

@media only screen and (max-width: 767px) {
    .col-sm-4.header-panel-left {
        background-color: #000;
    }

    .container.sticky-menu.js-sticky-menu {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .amsearch-wrapper-block {
        margin: 0px !important;
    }

    .page-header .nav-toggle {
        padding-left: 16px !important;
        padding-top: 2px;
        width: 37px !important;
    }

    .page-header .nav-toggle:before {
        left: 16px !important;
        margin-top: 2px;
        width: 21px !important;
    }

    .amsearch-input-wrapper .amsearch-input {
        border: none!important;
        border-radius: 4px!important;
        background-color: #F4F4F5 !important;
    }

    .page-header .logo {
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }

    .page-header .mobi-cart-wrapper {
        padding-top: 12px !important;
    }

    .amsearch-input-wrapper input[type="text"]::-webkit-input-placeholder {
        color: #71717A !important;

    }

    .amsearch-input-wrapper .amsearch-button.-loupe {
        left: 5px;
        right: unset!important;
    }

    .amsearch-input-wrapper.-typed .amsearch-button.-loupe {
        left: 6px;
    }

    .col-sm-10.header-panel-center {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    input.amsearch-input {
        padding-left: 30px !important;
    }

    .nav-before-open.nav-open .nav-toggle span:before, .nav-before-open.nav-open .nav-toggle span:after {
        left: -3.3px;
    }

    .amsearch-input-wrapper .amsearch-input:focus {
        color: #71717A;
    }

    .col-sm-4.header-panel-left {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page-header .action.showcart .counter.qty{
        background: #FFC75B !important;
    }

    .page-header .mobi-cart-wrapper .action.showcart .counter-number {
        color: #000;
    }
}

li.greet.welcome {
    display: none !important;
}

div#mobi_account-wrapper {
    right: 50px !important;
}

/* --------------- header mobile END --------------- */

.coupon .primary {
    width: 100%;
}

div#block-discount .content {
    display: block !important;
}

.owl-carousel {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

/* --------------- top bar noti --------------- */
.ambanners.ambanner-10 .block-static-block.widget {
    margin-bottom: 0px !important;
}

.ambanners.ambanner-10 .pmb-wrapper {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.counter.qty.empty {
    display: none !important;
}

ul.header.links.visible-xs li a{
    line-height: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ambanners .ambanner-10 [data-content-type='row'][data-appearance='contained'] [data-element='inner'] {
    box-sizing: border-box;
    height: 40px;
}

/* --------------- top bar noti END --------------- */

/* --------------- stock status --------------- */

svg:not(:root) {
    overflow: visible;
}

#app-stock-status {
    background: #fff !important;
    color: #71717A !important;
}

.product-view-style-03 .product-info-main .product-info-stock-sku .stock.available, .product-view-style-03 .product-info-main .product-info-stock-sku .stock.unavailable {
    display: none;
}

.product-view-style-03 .product-info-main .product-info-stock-sku {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-view-style-03 .product-info-main .product-reviews-summary {
    margin-top: 0px;
    padding-bottom: 0px;
}

.product-info-main .product-info-stock-sku .attribute.sku {
    margin-top: 0px;
    margin-bottom: 0px;
}

.product-view-style-03 .product-info-main .page-title-wrapper .page-title {
    margin-bottom: 0px;
}

#app-product-status {
    cursor: text;
}

.stock-trigger, .online-stock-trigger {
    display: block;
    height: fit-content;
}

div.stock-wrapper a.cdz-top-link {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

div.stock-wrapper {
    margin-top: 22px;
    margin-bottom: 8px;
}

div.pdp-express-card a, .ambanner-10 .hidden-xs a, .ambanner-10 .visible-xs a {
    display: block;
}

/* --------------- stock status END --------------- */


/* ================= SWATCH (PDP) ================= */
/* accent: #FFB932 (border 2px) | border: #E9EAEC 1px | text: #414B56 */
/* disabled: overlay #D4D4D8 50% ทับ (ไม่เปลี่ยนสีพื้น/ตัวอักษร) */
/* รองรับ .disabled (Magento) + .am-stockstatus-disabled (Amasty) */

/* --- ปิด transition / shadow / แถบดำใต้ปุ่มของ Codazon --- */
/* box-shadow: swatch เป็น div ที่รับ focus ได้ Codazon ใส่เงาตอน :focus/:active
   → คลิกเลือกแล้วไปคลิกที่อื่น เงายังค้าง (UX desktop ข้อ 5) ปิดทุก state ทิ้งเลย
   -webkit-tap-highlight-color: มือถือมีแถบเทาแวบตอนแตะ */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option:focus,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option:focus-visible,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option:active,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.selected {
    transition: none !important;
    outline: none !important;
    transform: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ปิด :after ของ Codazon เฉพาะ state ปกติ/hover/selected
   (state disabled ใช้ :after ทำ overlay — ดูท้ายไฟล์) */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option:not(.disabled):not(.am-stockstatus-disabled):after,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option:not(.disabled):not(.am-stockstatus-disabled):hover:after,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option:not(.disabled):not(.am-stockstatus-disabled).selected:after {
    display: none !important;
    background: none !important;
    content: none !important;
}

/* ปิดเส้นทแยงของ Amasty ที่วาดด้วย :before */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.am-stockstatus-disabled:before,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.disabled:before {
    display: none !important;
    background: none !important;
    content: none !important;
}

/* ================= TEXT SWATCH ================= */

/* default */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums !important;
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;             /* ✅ Figma: padding 0 12px */
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #E9EAEC !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #414B56 !important;
    margin: 0 !important;                 /* ระยะระหว่าง swatch คุมด้วย gap ที่ container (ดู VERTICAL RHYTHM ท้ายไฟล์) */
}

/* selected — border 2px ตาม Figma
   ✅ Figma: stroke แบบ inside → กล่องไม่โตขึ้นตอน stroke หนาขึ้น
   CSS ทำแบบนั้นตรง ๆ ไม่ได้เพราะ width เป็น auto (hug) → ลด padding 12→11px ชดเชยแทน
   ผลลัพธ์ outer width คงที่เหมือน Figma กล่องไม่กระตุก */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.text.selected {
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #FFB932 !important;
    background: #fff !important;
    color: #414B56 !important;
    padding: 0 11px !important;
    box-shadow: none !important;
}

/* hover — แยกจาก .selected แล้วครอบด้วย (hover: hover)
   WHY: มือถือมี sticky hover — แตะแล้ว :hover ค้างจนไปแตะที่อื่น
   ทำให้กรอบเหลืองยังอยู่หลังแตะซ้ำเพื่อ deselect (UX mobile ข้อ 3)
   ห้ามรวมกับ .selected ใน rule เดียว ไม่งั้น selected หายบนมือถือ */
@media (hover: hover) and (pointer: fine) {
    body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.text:not(.disabled):not(.am-stockstatus-disabled):hover {
        border-style: solid !important;
        border-width: 2px !important;
        border-color: #FFB932 !important;
        background: #fff !important;
        color: #414B56 !important;
        padding: 0 11px !important;
        box-shadow: none !important;
    }
}

/* ================= IMAGE / COLOR SWATCH ================= */

/* default */
/* ✅ Figma: background #FFF — ใส่เฉพาะ .image ห้ามใส่ .color
   เพราะ color swatch รับสีจาก inline style ของ Magento ถ้าทับจะกลายเป็นขาวหมด
   ใช้ background-color ไม่ใช่ background (shorthand จะลบ background-image ที่ Magento ใส่มา) */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.image {
    background-color: #fff !important;
}

body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.image,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.color {
    box-sizing: border-box !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background-size: cover !important;
    background-position: center !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #E9EAEC !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;                 /* ระยะระหว่าง swatch คุมด้วย gap ที่ container (ดู VERTICAL RHYTHM ท้ายไฟล์) */
}

/* selected — border 2px */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.image.selected,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.color.selected {
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #FFB932 !important;
}

/* hover — desktop เท่านั้น (เหตุผลเดียวกับ text swatch ด้านบน) */
@media (hover: hover) and (pointer: fine) {
    body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.image:not(.disabled):not(.am-stockstatus-disabled):hover,
    body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.color:not(.disabled):not(.am-stockstatus-disabled):hover {
        border-style: solid !important;
        border-width: 2px !important;
        border-color: #FFB932 !important;
    }
}

/* ไม่มีเครื่องหมาย ✓ ตาม prototype */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.image.selected:before,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.color.selected:before {
    display: none !important;
}

/* ================= DISABLED (ทุกชนิด) ================= */
/* Figma: ไม่เปลี่ยนสีพื้น/ตัวอักษร แต่ใส่ overlay #D4D4D8 50% ทับทั้งกล่อง
   ทำได้กับ image swatch ด้วยเพราะพื้นเป็นรูปสินค้า จะทาสีเทาทับตรง ๆ ไม่ได้ */

body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.disabled,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.am-stockstatus-disabled {
    position: relative !important;
    opacity: 1 !important;
    cursor: default !important;
    pointer-events: none !important;
}

body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.text.disabled,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.text.am-stockstatus-disabled {
    padding: 0 12px !important;
    border-width: 1px !important;
    border-color: #E9EAEC !important;
    background: #fff !important;
    color: #414B56 !important;
}

/* overlay */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.disabled:after,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.am-stockstatus-disabled:after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    background: #D4D4D8 !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* disabled + selected (Amasty preselect ตัวที่หมด) — Figma stage table ให้มีกรอบเหลือง */
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.text.am-stockstatus-disabled.selected {
    border-width: 2px !important;
    border-color: #FFB932 !important;
    padding: 0 11px !important;
}

body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.image.am-stockstatus-disabled.selected,
body.product-view-style-03 .product-info-main .product-options-wrapper .swatch-option.color.am-stockstatus-disabled.selected {
    border-width: 2px !important;
    border-color: #FFB932 !important;
}

/* ================= CUSTOM OPTION / DROPDOWN ================= */

body.product-view-style-03 .product-info-main .product-options-wrapper select.product-custom-option,
body.product-view-style-03 .product-info-main .product-options-wrapper select.super-attribute-select {
    box-sizing: border-box !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid #E9EAEC !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #414B56 !important;
    background: #fff !important;
}

/* ================= SWATCH ATTRIBUTE ROW (label / value / error) ================= */
/* Figma: label ↔ ค่าที่เลือก = 12px (UX desktop ข้อ 3)
   WHY flex: 2 span คั่นด้วย whitespace text node กินที่ ~4px คุมค่าตรง ๆ ไม่ได้
             flex ไม่นับ whitespace-only node เป็น item → ระยะแม่นเป๊ะ
   ปลอดภัย: INPUT.swatch-input เป็น position:absolute อยู่แล้ว (verify บน beta) ไม่กวน flow
   order คุมลำดับเพราะ error span ถูก append ท้าย แต่ต้องแสดงอยู่แถวบน */
body.product-view-style-03 .product-info-main .swatch-attribute {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    /* ระยะเว้นด้านบนตอน JS เลื่อนมาที่กลุ่มนี้ (anchor scroll — ดู pdp-scripts.js ส่วนที่ 5)
       verify บน beta: ไม่มี sticky header ที่บังเนื้อหา จึงเว้นแค่พอหายใจ
       ถ้าวันหลังมี sticky header/bar ต้องเพิ่มค่านี้เท่าความสูงของมัน + 16 */
    scroll-margin-top: 24px !important;
    column-gap: 12px !important;
    row-gap: 4px !important;              /* ✅ Figma: กลุ่ม attribute = column · gap 4px */
}

body.product-view-style-03 .product-info-main .swatch-attribute-label {
    order: 1 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #414B56 !important;
    text-transform: none !important;
    margin: 0 !important;                 /* Codazon ใส่ 0 8px 7px 0 → บวกกับ gap เป็น 20px */
    padding: 0 !important;                /* ยังมี padding ค้างทำให้กล่องสูง 25 แทน 20 (verify บน beta) */
}

/* ค่าที่เลือก — Figma: 14px/20px w600 #7D7D7D
   padding: Magento core ใส่ padding-left: 17px มา (lib/web/css ของ Swatches)
   ต้อง zero ไม่งั้นระยะจาก label = 12 (column-gap) + 17 = 29px */
body.product-view-style-03 .product-info-main .swatch-attribute-selected-option {
    order: 2 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #7D7D7D !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ยังไม่เลือก = span ว่าง แต่ยังเป็น flex item → กิน column-gap ไป 12px
   ต้องซ่อนไม่ให้ระยะ label ↔ error เพี้ยนเป็น 24px */
body.product-view-style-03 .product-info-main .swatch-attribute-selected-option:empty {
    display: none !important;
}

/* error inline ข้าง label — Figma: 14px/20px w400 #CC0000 (UX desktop ข้อ 4)
   ข้อความ inject จาก JS (ผ่าน __() เพื่อให้แปล EN ได้) ไม่ใช่ content: ใน CSS */
body.product-view-style-03 .product-info-main .swatch-attribute .swatch-attribute-error {
    order: 3 !important;
    display: none !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #CC0000 !important;
    margin: 0 !important;
}

body.product-view-style-03 .product-info-main .swatch-attribute .swatch-attribute-error.is-visible {
    display: inline !important;
}

/* แถว swatch ลงบรรทัดใหม่เต็มความกว้าง
   reset margin: size2 มี margin-right -10px แต่ size_vi ไม่มี → 2 attribute ไม่เท่ากัน */
body.product-view-style-03 .product-info-main .swatch-attribute > .swatch-attribute-options {
    order: 4 !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
}

/* ================= LISTING SWATCH ================= */
/* ค่ายังเดา — ยังไม่มี mockup หน้า category จาก UX/UI */

.products-grid .product-item .swatch-option.image,
.products-grid .product-item .swatch-option.color,
.products-list .product-item .swatch-option.image,
.products-list .product-item .swatch-option.color {
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    background-size: cover !important;
    background-position: center !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #E9EAEC !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 4px 4px 0 !important;
}

.products-grid .product-item .swatch-option.text,
.products-list .product-item .swatch-option.text {
    box-sizing: border-box !important;
    height: 24px !important;
    min-width: 32px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    line-height: 22px !important;
    font-variant-numeric: tabular-nums !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #E9EAEC !important;
    border-radius: 0 !important;
}

.products-grid .product-item .swatch-option.selected,
.products-list .product-item .swatch-option.selected {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #FFB932 !important;
}

/* hover — desktop เท่านั้น กัน sticky hover บนมือถือ */
@media (hover: hover) and (pointer: fine) {
    .products-grid .product-item .swatch-option:not(.disabled):hover,
    .products-list .product-item .swatch-option:not(.disabled):hover {
        border-style: solid !important;
        border-width: 1px !important;
        border-color: #FFB932 !important;
    }
}

.products-grid .product-item .swatch-option:after,
.products-list .product-item .swatch-option:after {
    display: none !important;
    content: none !important;
}

/* ================= GALLERY DOT (MOBILE) ================= */
/* Figma: dot 8×8 #D4D4D8 / active #FFB932 */

@media only screen and (max-width: 767px) {
    /* frame คงขนาดเดิม แค่ลดความสูงให้พอดี */
    .catalog-product-view .fotorama__nav--dots .fotorama__nav__frame {
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        margin: 0 2px !important;
    }

    /* dot — reset offset ของ fotorama แล้วจัดกลาง */
    .catalog-product-view .fotorama__nav--dots .fotorama__dot {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 8px !important;
        height: 8px !important;
        border: none !important;
        border-radius: 50% !important;
        background: #D4D4D8 !important;
    }

    .catalog-product-view .fotorama__nav--dots .fotorama__nav__frame.fotorama__active .fotorama__dot {
        background: #FFB932 !important;
    }

    /* กัน nav wrap สูงเกินจำเป็น */
    .catalog-product-view .fotorama__nav--dots {
        height: 16px !important;
    }
}

/* ================= TOCART ALERT ================= */

/* margin-top ไม่ตั้งที่นี่ — คุมที่ VERTICAL RHYTHM ข้อ 8 ท้ายไฟล์ที่เดียว
   (เคยมี margin-top: 0 ที่นี่ แต่เป็น dead code เพราะแพ้ rule ท้ายไฟล์ที่ selector เดียวกัน) */
body.product-view-style-03 .product-info-main .tocart-messages {
    display: none;
    width: 100%;
}

body.product-view-style-03 .product-info-main .tocart-messages.has-error {
    display: flex;
    flex-direction: column;
    gap: 12px;                       /* ✅ Figma: gap 12px ระหว่างกล่อง alert */
    margin-top: 0 !important;        /* ระยะคุมที่ .actions margin-bottom (ดูท้ายไฟล์) */
}

/* ✅ Figma: flex · padding 12px · align-items center · gap 12px · align-self stretch
   background var(--colors-danger-100, #FFD4D4) · ไม่มี border-radius (= 0)
   สูง Hug 44px = 12 + icon 20 + 12 */
body.product-view-style-03 .product-info-main .tocart-messages div.mage-error  {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 0 !important;
    background: #FFD4D4 !important;
    color: #CC0000 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    position: static !important;
    border: none !important;
    clear: none !important;
    float: none !important;
}

/* ✅ Figma icon = Material `error_outline` 20×20 (วงกลมเส้นขอบ ไม่ใช่วงทึบ)
   FontAwesome \f06a เป็นวงทึบ หน้าตาไม่ตรง → ใช้ SVG inline ฝังสี #CC0000 มาเลย
   ใช้ background-image ไม่ใช่ mask เพื่อให้รองรับ browser กว้างสุด */
body.product-view-style-03 .product-info-main .tocart-messages div.mage-error:before {
    content: "" !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CC0000' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}

/* ปิด #qty-error แบบ absolute ของเดิม */
body.product-view-style-03 .box-tocart .field.qty #qty-error {
    position: static !important;
    width: auto !important;
}

/* session message ที่ถูกย้ายเข้ามาในกล่อง */
body.product-view-style-03 .product-info-main .tocart-messages .page.messages {
    width: 100%;
    margin: 0;
}

body.product-view-style-03 .product-info-main .tocart-messages .message {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    margin: 0 !important;             /* ระยะระหว่างกล่องคุมด้วย gap ที่ .has-error */
    padding: 12px !important;
    border-radius: 0 !important;
    border: none !important;
    background: #FFD4D4 !important;
    color: #CC0000 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

body.product-view-style-03 .product-info-main .tocart-messages .message > div:before {
    content: "" !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CC0000' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ================= PDP TYPOGRAPHY ================= */

/* ชื่อสินค้า — Figma 24px/40px w700 ตัวพิมพ์ปกติ */
body.product-view-style-03 .product-info-main .page-title-wrapper .page-title {
    font-size: 24px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: #414B56 !important;
}

/* SKU — `SKU` w700 / ค่า w400 / ทั้งคู่ #7D7D7D
   line-height 20px: Figma ไม่ได้ระบุตรง ๆ ที่ SKU แต่ text style ขนาด 14px
   ทุกตัวในไฟล์นี้เป็น 14/20 (label · ค่าที่เลือก · invalid · alert) → อนุมานว่า 20
   ถ้าไม่ตั้ง จะรับ 18.9px ของ Codazon (14 × 1.35) กล่องสูง 19.9 ไม่ใช่ 20 */
body.product-view-style-03 .product-info-main .product-info-stock-sku .attribute.sku,
body.product-view-style-03 .product-info-main .product-info-stock-sku .attribute.sku .type,
body.product-view-style-03 .product-info-main .product-info-stock-sku .attribute.sku .value {
    font-size: 14px !important;
    line-height: 20px !important;
    color: #7D7D7D !important;
}
body.product-view-style-03 .product-info-main .product-info-stock-sku .attribute.sku .type {
    font-weight: 700 !important;
}
body.product-view-style-03 .product-info-main .product-info-stock-sku .attribute.sku .value {
    font-weight: 400 !important;
}

/* ================= PRICE ================= */
/* เว็บนี้ไม่ใช้ .special-price — ใช้ .normal-price + .old-price.sly-old-price (Sly Old Price)
   ⚠️ ห้ามใช้ :has(.old-price) แยกสินค้าลด/ไม่ลด — node อยู่ใน DOM ตลอด
      ถูก toggle ด้วย inline style เท่านั้น → :has() match แม้ display:none
      ใช้ class .has-old-price ที่ JS toggle ให้แทน (ดู addtocart.phtml) */

/* ซ่อน label "ราคา" / "ราคาปกติ" */
body.product-view-style-03 .product-info-main .price-box .price-label {
    display: none !important;
}

/* ระยะห่างนิ่งทุกตัวเลือก (UX desktop ข้อ 2 ท่อนหลัง)
   วัดจาก beta: .normal-price mr 15px · .old-price m 0 10px 5px 0 ·
   .price-container mb 5px + whitespace ระหว่าง inline-block 2 ตัว → คุมด้วย gap ค่าเดียว */
body.product-view-style-03 .product-info-main .price-box.price-final_price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 8px !important;     /* ✅ Figma: gap 8px */
    row-gap: 0 !important;
    margin: 0 !important;           /* เดิม mT 10 / mB 30 ของ Codazon — ย้ายไปคุมที่ VERTICAL RHYTHM */
}

body.product-view-style-03 .product-info-main .price-box.price-final_price .normal-price,
body.product-view-style-03 .product-info-main .price-box.price-final_price .old-price.sly-old-price,
body.product-view-style-03 .product-info-main .price-box.price-final_price .price-container {
    margin: 0 !important;
}

/* ลูกตัวอื่น (tier price, price-from/to ของ bundle, "As low as" block)
   ต้องขึ้นบรรทัดใหม่เต็มความกว้าง ไม่ไปต่อแถวกับราคาหลัก */
body.product-view-style-03 .product-info-main .price-box.price-final_price > *:not(.normal-price):not(.old-price) {
    flex: 0 0 100% !important;
}

/* ซ่อนราคาขีดฆ่าเมื่อ child ที่เลือกไม่ได้ลดราคา (UX desktop ข้อ 2)
   บั๊ก: Magento ใส่ oldPrice = finalPrice ให้ child ที่ไม่มี special price
         Sly show .sly-old-price โดยไม่เทียบ 2 ค่านี้ → "4,990 ขีดฆ่า 4,990"
   !important จำเป็น — ต้องชนะ inline style="display:block" ที่ Sly ยัดมา
   ทำให้ไม่ต้องแข่งลำดับการทำงานกับ Sly/core (กัน race condition) */
body.product-view-style-03 .product-info-main .price-box.price-final_price:not(.has-old-price) .old-price.sly-old-price {
    display: none !important;
}

/* ราคาหลัก — 32px/40px w700 (default ดำ)
   tabular-nums: Sukhumvit Set ไม่ tabular → 4,000 vs 4,990 กว้างต่างกัน
   ทำให้ราคาขีดฆ่าที่อยู่ถัดไปขยับตอนสลับ swatch */
body.product-view-style-03 .product-info-main .price-box .normal-price .price {
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    color: #000 !important;
    font-variant-numeric: tabular-nums !important;
}

/* ลดราคาจริง → แดง (ต้องอยู่ *หลัง* rule สีดำ ไม่งั้นถูกทับ) */
body.product-view-style-03 .product-info-main .price-box.price-final_price.has-old-price .normal-price .price {
    color: #CC0000 !important;
}

/* ราคาเดิม (sly-old-price) — 18px/24px w600 */
body.product-view-style-03 .product-info-main .price-box .old-price.sly-old-price .price {
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: #A8AEBA !important;
    text-decoration: line-through !important;
    font-variant-numeric: tabular-nums !important;
}

/* ================= GALLERY THUMBNAIL ================= */

/* กรอบรูปที่เลือก — เดิมเป็นสีส้ม default ของ fotorama */
.catalog-product-view .fotorama__nav__frame--thumb.fotorama__active .fotorama__thumb-border,
.catalog-product-view .fotorama__thumb-border {
    border-color: #FFB932 !important;
    border-width: 2px !important;
}

/* ================= PDP LAYOUT (SKU / title / status row) ================= */
/* ลำดับตาม Figma: SKU → ชื่อสินค้า → [stock status ... review] → ราคา */

/* --- คอลัมน์ขวาเรียงลงมาเสมอ ไม่ต้องพึ่ง clear/float ของ Codazon --- */
body.product-view-style-03 .product-right {
    display: flex !important;
    flex-direction: column !important;
}

/* ลูกทุกตัวได้ order 3 เป็นค่าเริ่มต้น (ไม่ใส่ !important เพื่อให้ 2 rule ล่างทับได้)
   สำคัญ: ถ้าไม่มีบรรทัดนี้ ลูกที่ไม่ได้กำหนด order จะเป็น 0 แล้วลอยขึ้นบนสุด
   (wish list / social / quick overview) */
body.product-view-style-03 .product-right > * {
    order: 3;
}

/* UX desktop ข้อ 1: verify บน beta แล้ว ไม่มี padding ค้างจากโครงเก่า
   (container padding 0 · .stock.available ถูกซ่อน h:0 · h1 margin 0)
   margin ควบคุมที่ VERTICAL RHYTHM ท้ายไฟล์ */
body.product-view-style-03 .product-right > .product-info-stock-sku {
    order: 1 !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}

body.product-view-style-03 .product-right > .page-title-wrapper {
    order: 2 !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
}

/* --- แถว stock status + review --- */
body.product-view-style-03 .product-status-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;    /* ✅ Figma: stock status ↔ review = 16px */
    flex-wrap: wrap !important;
    width: 100% !important;
}

body.product-view-style-03 .product-status-row .custom-product-info-inner {
    order: 1 !important;
}

body.product-view-style-03 .product-status-row .product-reviews-summary {
    order: 2 !important;
}

body.product-view-style-03 .product-status-row .custom-product-info-inner,
body.product-view-style-03 .product-status-row .product-reviews-summary {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
}

/* ✅ Figma: tag stock status min-height 24px · align-items center
   verify บน beta: a.cdz-top-link สูง 54px ทั้งที่ลูก (#app-product-status) สูง 24px
   ส่วนเกินมาจาก whitespace text node ข้างในโหนดที่เป็น display:block
   → ได้ anonymous line box สูง ~24px (line-height 21.6px) + padding 3px×2
   ซ้อนกัน 6 ชั้น: .custom-product-info-inner → .status-wrapper → <a>
                → #app-product-status → .product-info-card → .shipping-status-container

   แก้ด้วย flex: flex container ไม่นับ whitespace-only text node เป็น item
   → บรรทัดผีหายไป ความสูงเหลือ 24px เท่าลูกจริง
   ต้องทำ *ทุกชั้น* ไม่งั้นชั้นที่เหลือยังเก็บบรรทัดผีไว้ (54 → 48 → 48 → ...)
   แต่ละชั้นที่ยังเป็น block จะเก็บ ghost line ของตัวเองไว้ 1 บรรทัด
   #app-product-status = root ของ Vue app (Custom425degree_FirebaseAuth) ชั้นในสุดที่ต้องแก้

   ห้าม cap height: 24px ตรง ๆ — ถ้าวันหลังข้อความยาวขึ้นเป็น 2 บรรทัดจะถูกตัดหาย
   ใช้ min-height แทน */
body.product-view-style-03 .product-status-row .custom-product-info-inner,
body.product-view-style-03 .product-status-row .status-wrapper,
body.product-view-style-03 .product-status-row .cdz-top-link.online-stock-trigger,
body.product-view-style-03 .product-status-row #app-product-status,
body.product-view-style-03 .product-status-row .product-info-card,
body.product-view-style-03 .product-status-row .shipping-status-container {
    display: flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

    /* ชื่อสินค้า — 18px/24px w700 (h1 คงเดิม ไม่กระทบ SEO) */
    body.product-view-style-03 .product-info-main .page-title-wrapper .page-title {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    /* ราคา — 24px/32px w700 */
    body.product-view-style-03 .product-info-main .price-box .normal-price .price {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    /* ราคาเดิมขีดฆ่า — 14px/20px w600 */
    body.product-view-style-03 .product-info-main .price-box .old-price.sly-old-price .price {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* status row — review ลงบรรทัดใหม่ ชิดซ้าย */
    body.product-view-style-03 .product-status-row {
        justify-content: flex-start !important;
        gap: 4px 16px !important;
    }
}

/* ================= PDP VERTICAL RHYTHM ================= */
/*
   ระยะแนวตั้งทั้งคอลัมน์ขวา — รวมไว้ที่นี่ที่เดียว แก้จุดนี้จุดเดียวเมื่อ UX ส่งเลขมา
   ทุกค่าในบล็อกนี้ยืนยันจาก Figma Dev Mode แล้ว (✅)

   ต้องรู้ก่อนตีความเลข: gap ที่ "ตาเห็น" = margin + half-leading ของ line-height
     SKU     14px / lh 18.9px  → +2.5px ต่อด้าน
     ชื่อ     24px / lh 40px    → +8px   ต่อด้าน
     ราคา    32px / lh 40px    → +4px   ต่อด้าน
   ฉะนั้น margin 0 ระหว่าง SKU กับชื่อ = ตาเห็นห่าง ~10.5px อยู่แล้ว

   ค่าเดิมที่วัดได้จาก beta (ก่อนบล็อกนี้) เผื่อ rollback:
     SKU mB 4 · title mB 8 · status row mB 16 · price mT 10 mB 30 ·
     options fieldset mT 20 mB 20 · swatch-attribute#1 mB 10 (#2 = 0) ·
     swatch margin-bottom 8 (baked ในทุกกลุ่ม) · field.qty mB 20 · tocart-messages mT 12
*/

/* --- 0. ภายในบรรทัด SKU: คำว่า "SKU" ↔ ค่า --- */
/* ✅ Figma: display flex · align-items baseline · gap 8px
   .value เป็น <div> ไม่ใช่ <span> — ต้อง flex ไม่งั้นตกบรรทัด */
body.product-view-style-03 .product-info-main .product-info-stock-sku .attribute.sku {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}

/* --- 1. SKU → ชื่อสินค้า --- */
/* ✅ Figma: block [SKU + ชื่อ] เป็น column gap 0 → ระยะมาจาก line-height ล้วน */
body.product-view-style-03 .product-right > .product-info-stock-sku {
    margin: 0 !important;
}

/* --- 2. ชื่อสินค้า → status row --- */
body.product-view-style-03 .product-right > .page-title-wrapper {
    margin: 0 0 8px !important;      /* ✅ Figma: block [SKU + ชื่อ] padding-bottom 8px */
}

/* --- 3. status row → ราคา --- */
body.product-view-style-03 .product-status-row {
    margin: 0 0 16px !important;     /* ✅ Figma: 16px */
}

/* --- 4. ราคา → label ตัวเลือกแรก --- */
/* ✅ Figma: กล่องราคา padding-bottom 24px
   price-box margin ถูก zero ไว้แล้วในบล็อก PRICE · fieldset ของ Codazon zero ที่นี่
   แล้วคุมระยะที่ .product-options-wrapper ตัวเดียว */
body.product-view-style-03 .product-right .product-info-price {
    margin: 0 !important;
}

/* <div class="fieldset"> ไม่ใช่ <fieldset> — ต้องใช้ .fieldset ด้วย
   (verify บน beta: type selector เดี่ยว ๆ ไม่ match margin ของ Codazon ยังค้าง) */
body.product-view-style-03 .product-info-main .product-options-wrapper > fieldset,
body.product-view-style-03 .product-info-main .product-options-wrapper > .fieldset {
    margin: 0 !important;
}

body.product-view-style-03 .product-info-main .product-options-wrapper {
    margin-top: 24px !important;     /* ✅ Figma: ราคา padding-bottom 24px */
    /* ระยะใต้กลุ่มสุดท้ายมาจาก .swatch-attribute margin-bottom 16px แล้ว
       ห้ามใส่ที่นี่อีก ไม่งั้นบวกกันเป็น 32px (เจอบน beta) */
    margin-bottom: 0 !important;
}

/* --- 5. ระหว่างกลุ่ม attribute (ขนาด → สี) --- */
/* ✅ Figma: ทุกกลุ่ม padding-bottom 16px (รวมกลุ่มสุดท้าย)
   ห้ามใช้ :last-child กันระยะซ้อน — fieldset ของ Codazon มีลูกอื่นปนอยู่
   ทำให้ .swatch-attribute ตัวสุดท้ายไม่ match แล้วระยะกลายเป็น 32px */
body.product-view-style-03 .product-info-main .swatch-attribute {
    margin: 0 0 16px !important;
}

/* --- 6. แถว swatch: ย้ายจาก margin ของแต่ละปุ่ม มาเป็น gap ที่ container --- */
/* WHY: margin-bottom 8px ของปุ่มค้างใต้แถวสุดท้ายทุกกลุ่ม → บวกทับระยะระหว่างกลุ่ม
        นับสองรอบ คุมไม่ได้ · Figma ระบุ Gap 8px / Wrap / Top left ตรง ๆ
   :before/:after = clearfix ของ Magento — พอ container เป็น flex ปุ่มไม่ float แล้ว
        clearfix ไม่จำเป็น แต่ถ้าไม่ปิดจะกลายเป็น flex item กิน gap เพิ่มท้ายแถว */
body.product-view-style-03 .product-info-main .swatch-attribute > .swatch-attribute-options {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 8px !important;
}

body.product-view-style-03 .product-info-main .swatch-attribute > .swatch-attribute-options:before,
body.product-view-style-03 .product-info-main .swatch-attribute > .swatch-attribute-options:after {
    display: none !important;
    content: none !important;
}

/* --- 7. จำนวน → ปุ่ม --- */
/* เหมือนกัน — .fieldset มี margin-bottom 20px ค้าง บวกกับ .box-tocart 32px เป็น 52px
   ทำให้ช่องว่างใต้กลุ่มปุ่ม/alert เกินจาก Figma (32px) ไป 20px */
body.product-view-style-03 .product-info-main .box-tocart > fieldset,
body.product-view-style-03 .product-info-main .box-tocart > .fieldset {
    margin: 0 !important;
}

body.product-view-style-03 .product-info-main .box-tocart .field.qty {
    margin: 0 0 32px !important;     /* ✅ Figma: frame จำนวน padding-bottom 32px */
}

/* Codazon ใส่ margin-top 15px ให้ .actions เอง
   verify บน beta: margin แถวนี้ **ไม่ collapse** แต่บวกกัน (field.qty 32 + actions 15 = 47)
   จึงต้อง zero ทิ้ง แล้วให้ระยะ จำนวน→ปุ่ม มาจาก .field.qty margin-bottom ตัวเดียว */
body.product-view-style-03 .product-info-main .box-tocart .actions {
    margin: 0 !important;
}

/* ตัวสำรองของระยะ ปุ่ม → กล่อง alert (ตัวหลักคือ .tocart-messages margin-top ข้อ 8)
   margin 2 ตัวนี้ collapse กัน → ได้ 12 ไม่ใช่ 24 (วัดยืนยันแล้ว) ปล่อยไว้ได้
   :has(+ ...) ทำให้เพิ่มค่า *เฉพาะตอน alert โชว์* ถ้าใส่ที่ .actions ตรง ๆ
        เวลาไม่มี alert ระยะใต้ปุ่มจะกลายเป็น 32 + 12 = 44 (Figma ต้องการ 32) */
body.product-view-style-03 .product-info-main .box-tocart .actions:has(+ .tocart-messages.has-error) {
    margin-bottom: 12px !important;
}

/* ✅ Figma: frame จำนวน ไม่มี gap → label ชิดกล่อง qty ระยะมาจาก line-height
   ⚠️ selector ยังไม่ verify กับ DOM จริง (Codazon อาจใช้คลาสอื่น) — ถ้าไม่ match ก็ไม่มีผลเสีย */
body.product-view-style-03 .product-info-main .box-tocart .field.qty > .label {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 8. ปุ่ม → กล่อง alert / ระหว่าง alert / ใต้กลุ่มปุ่ม --- */
/* ✅ Figma: frame [ปุ่ม + alert] = column · gap 12px · padding-bottom 32px
   นี่คือ **จุดเดียว** ที่ตั้ง margin-top ของ .tocart-messages (selector เดียวกันใน
   section TOCART ALERT ถูกลบออกแล้ว เพราะแพ้ rule นี้และทำให้เข้าใจผิด)

   margin ที่นี่ **collapse ปกติ** ไม่ได้บวกกัน — วัดจริงบน beta:
     .actions margin-bottom 12 + .tocart-messages margin-top 12 → gap 12 (ไม่ใช่ 24)
   ที่เคย gap เป็น 0 เพราะ Codazon ให้ .actions margin-bottom **ติดลบ 12**
   collapse ของ +12 กับ -12 = ผลรวม 0 (กฎ collapse: ถ้ามีค่าติดลบให้บวกกัน)
   พอ zero .actions ทิ้ง เหลือ +12 → ได้ 12 ตาม Figma */
body.product-view-style-03 .product-info-main .tocart-messages {
    margin-top: 12px !important;
}

/* Codazon เอา `.box-tocart` **ตัวเดิม** ไปทำบาร์ล่างตอน scroll (ไม่ได้ clone —
   verify แล้วว่ามี .box-tocart / .tocart-messages ตัวเดียวในหน้า)
   พอเป็นบาร์ มันกลายเป็น position: fixed แนวนอน → กล่อง alert ที่อยู่ข้างใน
   ถูกลากไปโผล่กลางบาร์

   ⚠️ ตัวบอกสถานะคือคลาส `active` **ไม่ใช่ `scr-bottom`**
      verify บน beta: `scr-bottom` ติดอยู่ตลอดทั้งตอน relative และ fixed
      ถ้าใช้ `scr-bottom` กล่อง alert จะหายตลอดเวลา

   ซ่อนตอนโหมดบาร์ได้ เพราะ anchor scroll (pdp-scripts.js ส่วนที่ 5) เลื่อนขึ้นไป
   ที่กลุ่ม swatch ให้อยู่แล้ว ตอนนั้น `.box-tocart` หลุด fixed กล่องโผล่ตำแหน่งปกติเอง */
body.product-view-style-03 .box-tocart.active .tocart-messages {
    display: none !important;
}

body.product-view-style-03 .product-info-main .box-tocart {
    margin-top: 0 !important;        /* Codazon มี margin-top ของตัวเอง → ดันระยะ สี → จำนวน */
    margin-bottom: 32px !important;
}

/* ============================================================
   HOTFIX prod 18 ส.ค. 69 — wrapper .product-info-main-inner
   ============================================================
   prod ห่อเนื้อคอลัมน์ขวาด้วย .product-info-main-inner ซึ่ง beta ไม่มี
   (สงสัย theme setting ใน DB — คนละฐานกัน) → กฎ order ที่สั่งลูกตรง (>)
   ของ .product-right จับไม่ติด: title (อยู่นอก wrapper) ได้ order 2
   ลอยขึ้นก่อน ที่เหลือกอง order 3 เรียงตาม DOM ดิบ

   verify บน prod (Edifier AC817-A1): ลูกตรงของ .product-right =
   page-title-wrapper(2) · product-info-main-inner(3) · social(3) · overview(3)

   แก้: display:contents ให้ลูกของ wrapper เข้าร่วม flex ของ .product-right
   โดยตรง แล้วประกาศ order ชั้นในซ้ำอีกชุด
   - beta ไม่มี wrapper → กฎชุดนี้เป็น no-op ไม่กระทบ
   - display:contents ทำให้ bg/padding ของ wrapper เองหาย — wrapper เป็น
     โครงเปล่า ตรวจแล้วไม่มี styling ของตัวเอง */

body.product-view-style-03 .product-right > .product-info-main-inner {
    display: contents !important;
}

/* default order ให้ลูกของ wrapper — ไม่งั้นได้ order 0 ลอยขึ้นเหนือ title */
body.product-view-style-03 .product-right > .product-info-main-inner > * {
    order: 3;
}

body.product-view-style-03 .product-right .product-info-main-inner > .product-info-stock-sku {
    order: 1 !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* เผื่อบางหน้า title อยู่ในและบางหน้าอยู่นอก wrapper — ประกาศทั้งคู่ */
body.product-view-style-03 .product-right .product-info-main-inner > .page-title-wrapper {
    order: 2 !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 8px !important;
}

/* ============================================================
   HOTFIX 2 · 18 ส.ค. 69 — simple product (ไม่มี options wrapper)
   ============================================================
   rhythm เดิมคุมระยะ ราคา→ตัวเลือก ที่ .product-options-wrapper
   ซึ่ง simple ไม่มี → ราคาชน add-form · ให้ระยะเฉพาะเคสที่
   form ตามหลังราคาตรง ๆ (configurable ไม่โดนซ้ำ เพราะมี options คั่น) */
body.product-view-style-03 .product-info-price + .product-add-form {
    margin-top: 16px !important;
}

/* simple ที่ลดราคา ใช้ .special-price/.old-price มาตรฐาน (ไม่ใช่ Sly)
   default เป็น block ซ้อนกัน → จัด inline ให้เหมือน configurable
   scope แคบระดับ class คู่นี้ — ไม่แตะ bundle (price-from/to ต้องคนละบรรทัด
   ตาม smoke test ข้อ 22) */
body.product-view-style-03 .product-info-price .price-box .special-price,
body.product-view-style-03 .product-info-price .price-box .old-price {
    display: inline-block !important;
    vertical-align: baseline !important;
    margin: 0 !important;
}
body.product-view-style-03 .product-info-price .price-box .special-price + .old-price,
body.product-view-style-03 .product-info-price .price-box .old-price + .special-price {
    margin-left: 8px !important;
}