.alert.warning{background-color: rgba(255, 152, 0, 0.729); color: #ff5400;} .closebtn{margin-left: 15px; color: #ffffff; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s;} .closebtn:hover{color: black;} @media only screen and (max-width: 600px){.hero-wrap.hero-bread{padding: 3em 0;}} .imgbrand:hover .overlaybrand{opacity: 1;} .overlaybrand{position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: var(--orange-toffin);} .brandname{color: white; font-size: 15px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;} .l-radio{padding: 3px; border: 1px solid; border-radius: 50px; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; cursor: pointer; transition: background 0.2s ease; margin: 5px 0; -webkit-tap-highlight-color: transparent;} .l-radio:has(input:checked){background: var(--orange-toffin); border: 1px solid var(--orange-toffin); color: #fff;} .l-radio:hover, .l-radio:focus-within{background: rgba(159, 159, 159, 0.1);} .l-radio input{vertical-align: middle; background: none; border: 0; box-shadow: inset 0 0 0 1px #9F9F9F; box-shadow: inset 0 0 0 1.5px #9F9F9F; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; margin: 0; transition: box-shadow 150ms cubic-bezier(0.95, 0.15, 0.5, 1.25); pointer-events: none;} .l-radio input:focus{outline: none;} .l-radio span{vertical-align: middle; display: inline-block; line-height: 20px; padding: 0 8px; font-size: 13px;} .search{position: relative; margin: 0 auto; width: 100%;} .search input{font-size: 11px; letter-spacing: 1px; text-transform: uppercase; height: 50px; width: 100%; padding: 0 12px 0 25px; background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 19px no-repeat; border-width: 1px; border-style: solid; border-color: #a8acbc #babdcc #c0c3d2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;} .search input:focus{outline: none; border-color: #66b1ee; -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);} .search input:focus + .results{display: block;} .search .results{display: none; position: absolute; top: 55px; left: 0; right: 0; font-size: 12px; z-index: 10; padding: 0; margin: 0; border-width: 1px; border-style: solid; border-color: #cbcfe2; background-color: #ffffff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);} .search .results li{display: block;} .search .results li:first-child{margin-top: -1px;} .search .results li:first-child:before, .search .results li:first-child:after{display: block; content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent;} .search .results li:first-child:before{border-bottom: 5px solid #c4c7d7; top: -11px;} .search .results li:first-child:after{border-bottom: 5px solid #fdfdfd; top: -10px;} .search .results li:first-child:hover:before, .search .results li:first-child:hover:after{display: none;} .search .results li:last-child{margin-bottom: -1px;} .search .results a{display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px;} .search .results a span{font-weight: 200;} .search .results a:before{content: ''; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; background: url(/tdg_web/static/src/css/../images/search.png) 0 0 no-repeat;} .search .results a:hover{text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); background-color: var(--orange-toffin);} :-moz-placeholder{color: #a7aabc; font-weight: 200;} ::-webkit-input-placeholder{color: #a7aabc; font-weight: 200;} .lt-ie9 .search input{line-height: 26px;} .tooltip{position: relative; display: inline-block; border-bottom: 1px dotted black;} .tooltip .tooltiptext{visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1;} .tooltip:hover .tooltiptext{visibility: visible;} .first a:hover{color: var(--orange-toffin) !important;} .active-1{color: var(--orange-toffin) !important;} .breadcrumb > li + li:before{content: "" !important;} .breadcrumb{font-size: 9px; color: #aaa !important; letter-spacing: 1px; border-radius: 5px !important;} .first{background-color: white !important;} .text-uppercase1{text-transform: uppercase !important; color: #a89898;} a:focus, a:active{outline: none !important; box-shadow: none !important;} .fa-caret-right{vertical-align: middle; font-size: 14px !important;} @media (max-width: 767px){.breadcrumb{font-size: 10px;}.breadcrumb-item + .breadcrumb-item{padding-left: 0;}.fa{font-size: 9px !important;}.breadcrumb{letter-spacing: 1px !important;}.fa-caret-right:before{content: "\f0da"; vertical-align: super !important;}} .shopping-cart .product-image{float: left; width: 12%;} .shopping-cart .product-details{float: left; width: 30%;} .shopping-cart .product-price{float: left; width: 16%; text-align: center;} .shopping-cart .product-quantity{float: left; width: 10%; text-align: center;} .shopping-cart .product-quantity1{float: left; width: 14%; text-align: center;} .shopping-cart .product-removal{float: left; width: 16%; text-align: center;} .shopping-cart .product-removal-hide{float: left; width: 16%; text-align: center; visibility: hidden;} .shopping-cart .product-line-price{float: left; width: 16%; text-align: center;} .shopping-cart .product-line-discount{text-align: center;} .group:before, .shopping-cart:before, .shopping-cart .column-labels:before, .shopping-cart .product:before, .totals-item:before, .group:after, .shopping-cart:after, .shopping-cart .column-labels:after, .shopping-cart .product:after, .totals-item:after{content: ""; display: table;} .group:after, .shopping-cart .shopping-cart:after, .shopping-cart .column-labels:after, .product:after, .totals-item:after{clear: both;} .group, .shopping-cart, .column-labels, .product, .totals-item{zoom: 1;} .shopping-cart .column-labels label{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 4px solid #adadad; font-weight: bold;} .shopping-cart .column-labels .product-image, .shopping-cart .column-labels .product-removal{text-indent: -9999px;} .shopping-cart .product .product-image{text-align: center;} .shopping-cart .product .product-image img{width: 100px;} .shopping-cart .product .product-details .product-title{margin-right: 20px;} .shopping-cart .product .product-details .product-description{margin: 5px 20px 5px 0; line-height: 1.4em;} .shopping-cart .product .product-quantity input{width: 40px; text-align: center;} .shopping-cart .product .product-quantity1 input{width: 40px; text-align: center;} .shopping-cart .product-title{font-weight: bold;} .totals .totals-item{float: right; clear: both; width: 100%; margin-bottom: 10px;} .totals .totals-item label{float: left; clear: both; width: 79%; text-align: right;} .totals .totals-item .totals-value{float: right; width: 21%; text-align: right;} .checkout{float: right; border: 0; padding: 6px 25px; background-color: #6b6; color: #fff; font-size: 25px; border-radius: 3px;} @media screen and (max-width: 760px){.shopping-cart{margin: 0; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #eee;}.shopping-cart .column-labels{display: none;}.shopping-cart .product-image{float: left; width: auto; padding-right: 20px; height: 120px;}.shopping-cart .product-details{float: none; width: auto !important;}.shopping-cart .product-price{width: fit-content;}.shopping-cart .product-quantity{width: 65px; float: right;}.shopping-cart .product-quantity1{width: 100px; padding: 0px !important; text-align: left;}.shopping-cart .product-quantity:before{content: "x";}.shopping-cart .product-quantity1:after{content: "x";}.shopping-cart .product-removal{width: fit-content;}.shopping-cart .product-remove{width: auto !important;}.shopping-cart .product-line-price{float: right; width: 100px; height: 0; visibility: hidden;}.shopping-cart .distri1{display: block !important;}.shopping-cart .bundle-name{width: 100% !important;}.shopping-cart .procuct-rmv{float: right !important;}.shopping-cart .price{align-items: baseline !important;}} @media screen and (max-width: 350px){.shopping-cart .product-removal{float: right;}.shopping-cart .product-line-price{float: right; clear: left; width: auto; margin-top: 10px;}.shopping-cart .product .product-image{width: 80px;}.totals .totals-item label{width: 60%;}.totals .totals-item .totals-value{width: 40%;}} .shopping-cart-wrap{padding: 20px; padding-top: 0px; padding-bottom: 0px; color: #888; background-color: white;} .shopping-cart-wrap button{cursor: pointer; border-radius: 0px; transition: all 0.25s; padding: 0;} .shopping-cart-wrap .cart-wrap-header{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 30px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: baseline; justify-content: space-between;} .shopping-cart-wrap .cart-wrap-header .heading{font-weight: 700; font-size: 20px; color: #000; margin-bottom: 0; margin-top: 0;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-wrap-header .heading{font-size: 16px;}} .shopping-cart-wrap .cart-wrap-header .closed-btn{font-size: 20px; color: #666;} .shopping-cart-wrap .cart-wrap-header .closed-btn:hover{color: red;} .shopping-cart-wrap .cart-total-amount{background-color: #f0f0f0; margin-left: -20px; margin-right: -20px; padding: 10px;} .shopping-cart-wrap .cart-total-amount .cart-total-amount-inner{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;} .shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-title{font-weight: 500; color: #444; margin-bottom: 0;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-title{font-size: 16px;}} .shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-no{font-weight: 700;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-no{font-size: 16px;}} .shopping-cart-wrap .shopping-cart-items{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 10px;} .shopping-cart-wrap .cart-item{display: -webkit-box; display: -webkit-flex; display: flex; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #e6e3e3; align-items: center;} .shopping-cart-wrap .cart-item .product-thumb{width: 100px; height: 100px; overflow: hidden; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-thumb{width: 80px; height: 80px;}} .shopping-cart-wrap .cart-item .product-thumb:hover > button:before{width: 100%; left: 0; right: auto;} .shopping-cart-wrap .cart-item .product-thumb:hover > button > span{margin-bottom: 0; opacity: 1; visibility: visible;} .shopping-cart-wrap .cart-item .product-thumb > button{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 24px;} .shopping-cart-wrap .cart-item .product-thumb > button:before{position: absolute; content: ""; right: 0; top: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.35); transition: all 0.3s;} .shopping-cart-wrap .cart-item .product-thumb > button > span{transition: all 0.35s; margin-bottom: 50px; opacity: 0; visibility: 0; color: #ffffff; position: relative; z-index: 1;} .shopping-cart-wrap .cart-item .product-info{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; padding-left: 15px;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info{display: block; width: 100%;}} .shopping-cart-wrap .cart-item .product-info .info-left .title{font-size: 14px; font-weight: 500; line-height: 1.4em; color: #444; margin-bottom: 5px; margin-top: 0;} .shopping-cart-wrap .cart-item .product-info .info-left .unit-price{font-size: 14px; font-weight: 500;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .info-left .unit-price{font-size: 14px;}} .shopping-cart-wrap .cart-item .product-info .price-count{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; padding-left: 15px;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .price-count{padding-left: 0px; align-items: center;}} .shopping-cart-wrap .cart-item .product-info .price-count .s-product-price{color: #000; font-weight: 600; margin-bottom: 0px;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .price-count .s-product-price{font-size: 16px;}} .shopping-cart-wrap .cart-item .product-info .price-count .count-product{background-color: #000; border-radius: 5px; color: #ffffff; font-size: 14px; font-weight: 500; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); transition: all 0.25s;} .shopping-cart-wrap .cart-item .product-info .price-count .count-product:hover{box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);} .shopping-cart-wrap .cart-item .product-info .price-count .count-product > button{border: 0px solid; background-color: transparent; color: inherit; height: 30px !important; width: 30px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; transition: all 0.25s; font-size: 10px; padding: 0px;} .shopping-cart-wrap .cart-item .product-info .price-count .count-product > button:hover{color: red;} .shopping-cart-wrap .cart-item .product-info .price-count .count-product > .count-no{min-width: 30px; padding: 0 5px; text-align: center;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .price-count .count-product{margin-right: 5px;}} .check-field [type="checkbox"]{position: absolute !important; left: -9999px;} .check-field [type="checkbox"] + label{position: relative !important; padding-left: 2rem !important; cursor: pointer !important;} .check-field [type="checkbox"] + label:before{content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border: 4px solid deeppink;} .check-field [type="checkbox"] + label:after{content: ''; position: absolute; width: 12px; height: 12px; top: 14px; left: 6px; font-size: 1.3em; line-height: 0.8; background-color: deeppink; transition: all .2s;} .check-field [type="checkbox"]:not(:checked) + label:after{opacity: 0; transform: scale(0);} .check-field [type="checkbox"]:checked + label:after{opacity: 1; transform: scale(1);} .cart-footer{background: #cbcbcb;} .distributor{font-size: medium; font-weight: bold;} .price2{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: flex-end;} .checkout-price{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .check-total-price{font-weight: bold; color: black;} .checkmark{position: absolute; margin-top: 10px; left: 0; height: 17px; width: 17px;} .select-wrapper{padding-top: 10px; position: relative; user-select: none; width: 100%;} .select{position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .select__trigger{position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 5px 22px; font-size: 14px; font-weight: 500; color: #ffffff; min-height: 40px; height: fit-content; background: #ff4b4b; cursor: pointer;} .custom-options{position: absolute; display: block; top: 100%; left: 0; right: 0; text-align: center; border-top: 0; background: #f3f3f3; transition: all 0.5s; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2;} .select.open .custom-options{opacity: 1; visibility: visible; pointer-events: all;} .custom-option{position: relative; display: block; padding: 5px 10px 5px 10px; font-size: 14px; font-weight: 500; color: #3b3b3b; cursor: pointer; transition: all 0.5s;} .custom-option:hover{cursor: pointer; background-color: var(--orange-toffin);} .custom-option.selected{color: #000000; background-color: var(--orange-toffin);} .info-delivery{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between;} .card-sameday{background-color: #f5f5f5; padding: 30px;} .border-line{border-right: 1px solid gray;} @media screen and (max-width: 575px){.border-line{border-right: none; border-bottom: 1px solid #EEEEEE;}} .tracking-detail{padding: 3rem 0;} #tracking{margin-bottom: 1rem;} [class*=tracking-status-] p{margin: 0; font-size: 1.1rem; color: #fff; text-transform: uppercase; text-align: center;} [class*=tracking-status-]{padding: 1.6rem 0;} .tracking-status-intransit{background-color: #65aee0;} .tracking-status-outfordelivery{background-color: #f5a551;} .tracking-status-deliveryoffice{background-color: #f7dc6f;} .tracking-status-delivered{background-color: #4cbb87;} .tracking-status-attemptfail{background-color: #b789c7;} .tracking-status-error, .tracking-status-exception{background-color: #d26759;} .tracking-status-expired{background-color: #616e7d;} .tracking-status-pending{background-color: #ccc;} .tracking-status-inforeceived{background-color: #214977;} .tracking-item{border-left: 1px solid #e5e5e5; position: relative; padding: 1rem; font-size: .8rem; margin-left: 3rem; min-height: 5rem;} .tracking-item:last-child{padding-bottom: 4rem;} .tracking-item .tracking-date{margin-bottom: .5rem;} .tracking-item .tracking-date span{color: #888; font-size: 85%; padding-left: .4rem;} .tracking-item .tracking-content{padding: .5rem .8rem; background-color: #f4f4f4; border-radius: .5rem;} .tracking-item .tracking-content span{display: block; color: #888; font-size: 85%;} .tracking-item .tracking-icon{position: absolute; left: -11px; width: 1.3rem; height: 1.3rem; text-align: center; border-radius: 50%; font-size: 1.3rem; background-color: transparent; color: transparent;} .tracking-item .tracking-icon.status-sponsored{background-color: var(--orange-toffin);} .tracking-item .tracking-icon.status-delivered{background-color: var(--orange-toffin);} .tracking-item .tracking-icon.status-outfordelivery{background-color: var(--orange-toffin);} .tracking-item .tracking-icon.status-deliveryoffice{background-color: var(--orange-toffin);} .tracking-item .tracking-icon.status-attemptfail{background-color: var(--orange-toffin);} .tracking-item .tracking-icon.status-exception{background-color: var(--orange-toffin);} .tracking-item .tracking-icon.status-inforeceived{background-color: var(--orange-toffin);} .tracking-item .tracking-icon.status-intransit{color: #e5e5e5; border: 1px solid #e5e5e5; font-size: .6rem;} @media (min-width: 992px){.tracking-item{margin-left: 10rem;}.tracking-item .tracking-date{position: absolute; left: -10rem; width: 7.5rem; text-align: right;}.tracking-item .tracking-date span{display: block;}.tracking-item .tracking-content{padding: 0; background-color: transparent;}} .rating{font-size: 20px;} #notfound{position: relative; height: 90vh;} #notfound .notfound{position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .notfound{max-width: 520px; width: 100%; line-height: 1.4; text-align: center;} .notfound .notfound-404{position: relative; height: 200px; margin: 0px auto 55px; z-index: -1;} .notfound .notfound-404 h1{font-family: 'Varela Round', sans-serif; font-size: 200px; font-weight: 100; margin: 0px; color: #211b19; text-transform: uppercase; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .notfound .notfound-404 h2{font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 400; text-transform: uppercase; color: #211b19; background: #fff; padding: 10px 5px; margin: auto; display: inline-block; position: absolute; bottom: -40px; left: 0; right: 0;} .notfound a{font-family: 'Montserrat', sans-serif; display: inline-block; font-weight: 700; text-decoration: none; color: #fff; text-transform: uppercase; padding: 18px 28px; background: var(--orange-toffin); font-size: 20px; -webkit-transition: 0.2s all; transition: 0.2s all;} .notfound a:hover{color: var(--orange-toffin); background: #211b19;} @media only screen and (max-width: 767px){.notfound .notfound-404 h1{font-size: 148px;}} @media only screen and (max-width: 480px){.notfound .notfound-404{height: 148px; margin: 0px auto 10px;}.notfound .notfound-404 h1{font-size: 86px;}.notfound .notfound-404 h2{font-size: 16px;}.notfound a{padding: 7px 15px; font-size: 14px;}} .product-notfoud{width: 100%;} .lead{background-color: #ffa55c36; padding: 20px; border-radius: 10px;} .thumb-produk-detail{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center;} .img-detail-produk{height: fit-content;} .a-dark{color: gray;} .a-dark-normal-fonts{color: gray; font-weight: 500;} @media only screen and (max-width: 767px){.two-grid-mobile-view-left{width: 50%; padding-right: 5px;}.two-grid-mobile-view-right{width: 50%; padding-left: 5px;}} .heading-section{font-weight: 600;} .card-cat{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: all 0.3s;} .card-cat:hover{transform: scale(1.2); color: orange;} .card-cat .category-title{font-size: 14px; color: #fff; margin-bottom: 1rem;} .card-cat .article-title{font-size: 13px; font-weight: 600; text-align: center;} .card-cat .article-header{margin-bottom: auto;} .blog-slider{width: 100%; position: relative; margin: auto; background: #fff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); padding: 25px; border-radius: 25px; height: 625px; transition: all 0.3s;} @media screen and (max-width: 1200px){.blog-slider{width: 100%; position: relative; margin: auto; background: #fff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); padding: 25px; border-radius: 25px; height: 500px; transition: all 0.3s;}} @media screen and (min-width: 1200px){.blog-slider{width: 100%; position: relative; max-width: 900px; margin: auto; background: #fff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); padding: 25px; border-radius: 25px; height: 625px; transition: all 0.3s; transform: translateX(105px);}} @media screen and (max-width: 768px){.blog-slider{min-height: 500px; height: auto; margin: 180px 0px -35px 0px;}} @media screen and (max-height: 500px) and (min-width: 992px){.blog-slider{height: 350px;}} .blog-slider__item{display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; align-items: center;} @media screen and (max-width: 768px){.blog-slider__item{-webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;}} .blog-slider__item.swiper-slide-active .blog-slider__img img{opacity: 1; transition-delay: 0.3s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *{opacity: 1; transform: none;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1){transition-delay: 0.3s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2){transition-delay: 0.4s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3){transition-delay: 0.5s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4){transition-delay: 0.6s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5){transition-delay: 0.7s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6){transition-delay: 0.8s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7){transition-delay: 0.9s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8){transition-delay: 1s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9){transition-delay: 1.1s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10){transition-delay: 1.2s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11){transition-delay: 1.3s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12){transition-delay: 1.4s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13){transition-delay: 1.5s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14){transition-delay: 1.6s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15){transition-delay: 1.7s;} .blog-slider__img{width: 450px; flex-shrink: 0; background-image: linear-gradient(147deg, #fe8a39 0%, var(--orange-toffin) 74%); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); border-radius: 20px; transform: translateX(-130px); overflow: hidden;} @media screen and (min-width: 1199px){.blog-slider__img{width: 450px; flex-shrink: 0; background-image: linear-gradient(147deg, #fe8a39 0%, var(--orange-toffin) 74%); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); border-radius: 25px; transform: translateX(-235px); overflow: hidden;}} @media screen and (max-width: 1199px){.blog-slider__img{width: 350px; flex-shrink: 0; background-image: linear-gradient(147deg, #fe8a39 0%, var(--orange-toffin) 74%); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); border-radius: 25px; transform: translateX(0px); overflow: hidden;}} .blog-slider__img:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 25px; opacity: 0.8;} .blog-slider__img img{width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all 0.3s;} @media screen and (max-width: 768px){.blog-slider__img{transform: translateY(-50%); width: 90%;}} @media screen and (max-width: 576px){.blog-slider__img{width: 100%;}} @media screen and (max-height: 500px) and (min-width: 992px){.blog-slider__img{height: 270px;}} .blog-slider__content{padding: 30px;} @media screen and (max-width: 768px){.blog-slider__content{margin-top: -165px; text-align: center; padding: 0 30px;}} @media screen and (max-width: 576px){.blog-slider__content{padding: 0;}} @media screen and (min-width: 1200px){.blog-slider__content{transform: translateX(-110px);}} .blog-slider__content > *{opacity: 0; transform: translateY(25px); transition: all 0.4s;} .blog-slider__code{color: #7b7992; margin-bottom: 15px; display: block; font-weight: 500;} .blog-slider__title{font-size: 24px; font-weight: 700; color: #0d0925; margin-bottom: 20px;} .blog-slider__text{color: #4e4a67; margin-bottom: 30px; line-height: 1.5em;} .blog-slider__button{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; background-image: linear-gradient(#000000 0%, #000000 74%); padding: 15px 35px; border-radius: 50px; color: #fff; text-decoration: none; font-weight: 500; justify-content: center; text-align: center; letter-spacing: 1px;} @media screen and (max-width: 576px){.blog-slider__button{width: 100%;}} .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction{bottom: 10px; left: 0; width: 100%;} .blog-slider__pagination{position: absolute; z-index: 21; right: 20px; width: 11px !important; text-align: center; left: auto !important; top: 50%; bottom: auto !important; transform: translateY(-50%);} @media screen and (max-width: 768px){.blog-slider__pagination{transform: translateX(-50%); left: 50% !important; top: 205px; width: 100% !important; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}} @media screen and (max-width: 768px){.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px; visibility: hidden;}} .blog-slider__pagination .swiper-pagination-bullet{width: 11px; height: 11px; display: block; border-radius: 10px; background: #062744; opacity: 0.2; transition: all 0.3s;} .blog-slider__pagination .swiper-pagination-bullet-active{opacity: 1; background: var(--orange-toffin); height: 30px;} @media screen and (max-width: 768px){.blog-slider__pagination .swiper-pagination-bullet-active{height: 11px; width: 30px;}} .bundle-pr-images{width: 100%; border-radius: var(--product-card-radius); padding: 5px;} @media (max-width: 576px){.bundle-pr-images{width: 100%; border-radius: 18px;}} @media (max-width: 768px){.bundle-pr-images{width: 100%; border-radius: 18px;}} .card-slider-bundle{border-radius: 18px; background-color: #ffffff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; transition: 0.2s; margin: 0;} .card-slider-bundle:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .card-feature{min-width: 250px; height: 180px; border-radius: 18px; background-color: var(--orange-toffin); box-shadow: 0px 0px 2px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s;} .card-feature .article-title{font-size: 17px; font-weight: 600; line-height: initial;} .card-feature .article-header{margin-bottom: auto; color: black;} .card-feature:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .box-feature{padding: 5px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; transition: all 0.3s;} .feature-icon{font-size: 30px;} @media (max-width: 768px){.card-feature{min-width: auto; height: 220px; border-radius: 18px; background-color: var(--orange-toffin); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s;}} .card-product{height: 360px; border-radius: 18px; background-color: #ffffff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s; margin: 0;} .card-product-list{height: auto; border-radius: 18px; background-color: #ffffff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s; margin: 0;} .card-product-list:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .card-product:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .box-product{padding: 5px;} .box-product-list{padding: 0;} .prod-home-title{font-size: 17px; font-weight: 600;} .box-heading-bundle{width: 200px;} .white{background: white;} a.blantershow-chat{background: #fff; color: #000000; position: fixed; display: -webkit-box; display: -webkit-flex; display: flex; height: 40px; font-weight: 600; justify-content: space-between; z-index: 98; bottom: 25px; right: 30px; font-size: 12px; padding: 10px 20px; border-radius: 30px; box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);} a.blantershow-chat svg{transform: scale(1.2); margin: 0 10px 0 0;} .alert-form{font-size: 12px; color: red; font-weight: 500;} .swiper-container-nav{margin: auto;} @media (min-width: 576px){.swiper-container-nav{max-width: 630px;}} @media (min-width: 768px){.swiper-container-nav{max-width: 810px;}} @media (min-width: 992px){.swiper-container-nav{max-width: 1050px;}} @media (min-width: 1200px){.swiper-container-nav{max-width: 1250px;}} .swiper-button-next, .swiper-button-prev{position: absolute; top: 50%; width: 30px !important; height: 30px !important; margin-top: -10px !important; z-index: 1 !important; cursor: pointer; -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: 10px 14px !important; background-position: center; background-repeat: no-repeat; background-color: white; box-shadow: 0 0px 5px rgba(32, 33, 36, 0.28); border-radius: 50px;} .swiper-container{margin: auto;} @media (min-width: 576px){.swiper-container{max-width: 540px;}} @media (min-width: 768px){.swiper-container{max-width: 720px;}} @media (min-width: 992px){.swiper-container{max-width: 960px;}} @media (min-width: 1200px){.swiper-container{max-width: 1140px;}} .swiper-container-kelebihan{margin: auto; overflow-x: hidden; padding: 5px;} @media (min-width: 576px){.swiper-container-kelebihan{max-width: 540px;}} @media (min-width: 768px){.swiper-container-kelebihan{max-width: 720px;}} @media (min-width: 992px){.swiper-container-kelebihan{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-kelebihan{max-width: 1140px;}} .swiper-container-product{margin: auto; overflow-x: hidden; padding: 5px;} .swiper-container-product::-webkit-scrollbar{width: 0 !important;} @media (min-width: 576px){.swiper-container-product{max-width: 540px;}} @media (min-width: 768px){.swiper-container-product{max-width: 720px;}} @media (min-width: 992px){.swiper-container-product{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-product{max-width: 1140px;}} .swiper-container-bootcamp{margin: auto; overflow-x: hidden; padding: 5px;} .swiper-container-bootcamp::-webkit-scrollbar{width: 0 !important;} @media (min-width: 576px){.swiper-container-bootcamp{max-width: 540px;}} @media (min-width: 768px){.swiper-container-bootcamp{max-width: 720px;}} @media (min-width: 992px){.swiper-container-bootcamp{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-bootcamp{max-width: 1140px;}} .sub ol{list-style-type: none; counter-reset: item; margin: 0; padding: 0;} .sub li{display: table; counter-increment: item; margin-bottom: 0.6em;} .sub li:before{content: counters(item, "."); display: table-cell; padding-right: 0.6em; font-weight: bold;} .sub li li{margin: 0;} .sub li li:before{content: counters(item, ".") " "; font-weight: 600;} .alpha{font-weight: 600;} .head-detail{font-size: 17px; font-weight: bold; color: black;} @media (max-width: 575.98px){.input-group-btn-detail{text-align: center !important;}} .video-product{transition: .2s; position: absolute; top: 60px; right: 12px;} .toggle-password{position: relative; float: right; cursor: pointer; margin-right: 10px; margin-top: -32px;} .mobile-menu-button .menu-toggle{all: unset; width: 30px; height: 30px; cursor: pointer; vertical-align: middle;} .mobile-menu-button .menu-toggle span{background-color: #555555; height: 2px; width: 100%; display: block;} .mobile-menu-button .menu-toggle span:nth-child(2){margin: 5px 0 5px auto; width: 75%; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all;} .mobile-menu-button .menu-toggle span:nth-child(3){margin-left: auto; width: 45%; -webkit-transition: 0.6s all; -moz-transition: 0.6s all; -o-transition: 0.6s all; transition: 0.6s all;} .mobile-menu-button .menu-toggle:hover span:nth-child(2), .mobile-menu-button .menu-toggle:hover span:nth-child(3){width: 100%;} .side-menu{width: 80%; position: fixed; right: 0; top: 0; z-index: 1610; height: 100vh; background-color: #ffffff; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out, -o-transform .5s ease-in-out; -o-transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out, -o-transform .5s ease-in-out; -moz-transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out, -o-transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out, -o-transform .5s ease-in-out; overflow-y: auto;} .side-menu.side-menu-active{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .side-menu .inner-wrapper{padding: 30px 30px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: flex-start; text-align: left; -webkit--webkit-flex-wrap: wrap; flex-wrap: wrap; -ms--webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;} .side-menu .btn-close{position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; cursor: pointer;} .side-menu .btn-close:before{content: ""; height: 30px; width: 2px; background-color: #555555; display: block; position: absolute; left: 50%; top: 0; transform: rotate(45deg);} .side-menu .btn-close:after{content: ""; height: 30px; width: 2px; background-color: #555555; display: block; position: absolute; left: 50%; top: 0; transform: rotate(-45deg);} .side-nav-menu{list-style-type: none; margin: 0; padding: 0 0 30px;} .side-nav-menu > .menu-item{position: relative; padding: 0 25px 0 0;} .side-nav-menu > .menu-item:not(:last-child){margin-bottom: 15px;} .side-nav-menu > .menu-item > .arrow{position: absolute; right: 0; width: 15px; height: 15px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid #555555; border-right: 1px solid #555555; transform: rotate(45deg); cursor: pointer;} .side-nav-menu > .menu-item > .arrow.open{transform: rotate(225deg);} .side-nav-menu > .menu-item > .menu-link{color: #555555; font-size: 18px;} .side-nav-menu > .menu-item > .menu-link:hover{color: #7b7b7b; text-decoration: none;} .side-nav-menu > .menu-item > .sub-menu{list-style-type: none; margin: 10px 0 0; padding: 0 0 0 15px; display: none;} .side-nav-menu > .menu-item > .sub-menu > .menu-item:not(:last-child){margin-bottom: 5px;} .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link{color: #555555; font-size: 18px;} .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link:hover{color: #7b7b7b; text-decoration: none;} .side-nav-menu > .custom-menu-item .button.custom-button-link{display: inline-block;} .side-menu-bg{position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; display: none; z-index: 1031; opacity: 0.5; cursor: pointer;} @media only screen and (max-width: 1199px){.main-header-bar{padding: 15px 0;}.main-header-right{display: none;}.side-menu{width: 50%;}} @media only screen and (max-width: 767px){.button{padding: 11px 30px;}.side-menu{width: 90%;}.side-menu .inner-wrapper{padding: 20px 20px;}.side-nav-menu > .menu-item > .arrow{width: 10px; height: 10px;}.side-nav-menu > .menu-item > .menu-link, .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link{font-size: 14px;}} @media only screen and (max-width: 1199px){nav ul{background: #1b1b1b; height: 100%; width: 100%; list-style: none; padding: 10px;}nav ul li{line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1);}nav ul li:last-child{border-bottom: 1px solid rgba(255, 255, 255, 0.05);}nav ul li a{position: relative; color: white; text-decoration: none; font-size: 13px; padding-left: 14px; font-weight: 500; display: block; width: 100%; border-left: 3px solid transparent;}nav ul li.active a{color: var(--orange-toffin); background: #1e1e1e; border-left-color: var(--orange-toffin);}nav ul li a:hover{background: #1e1e1e;}.feat-show{transition: all 0.5s;}nav ul li.active ul{transition: all 0.5s;}nav ul ul{position: static; display: none;}nav ul.show{display: block; transition: all 0.5s;}nav ul ul li{line-height: 42px; border-top: none;}nav ul ul li a{font-size: 12px; color: #e6e6e6;}nav ul li.active ul li a{color: #e6e6e6; background: #1b1b1b; border-left-color: transparent;}nav ul li a span{position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 15px; transition: transform 0.4s;}nav ul li a span.rotate{transform: translateY(-50%) rotate(-180deg);}.content{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #202020; z-index: -1; text-align: center;}} .white-popup{position: relative; background: #FFF; padding: 50px 20px 10px 20px; width: auto; max-width: 500px; margin: 20px auto; transition: 1s all;} .mfp-fade.mfp-bg{opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out;} .mfp-fade.mfp-bg.mfp-ready{opacity: 0.8;} .mfp-content{position: fixed; left: 0; top: 250px;} .mfp-fade.mfp-bg.mfp-removing{opacity: 0;} .mfp-fade.mfp-wrap .mfp-content{opacity: 0; transition: all 0.4s ease-out;} .mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity: 1;} .mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity: 0;} .mfp-fade.mfp-wrap{overflow: hidden !important; position: fixed !important;} .notice-btn{background-color: #ff4b4b !important; border: 1px solid #ff4b4b !important; color: white !important;} .mainbox{z-index: 1; transition: .2s; position: absolute; top: 15px; right: 60px;} label.share{text-align: center; color: lightgray; cursor: pointer; transition: all 0.3s ease;} #check{display: none;} #check:checked ~ label.share::before{opacity: 1;} .media-icons{position: absolute; left: 50%; top: 0px; transform: translateX(-50%); background: #fff; width: 105px; height: 120px; text-align: center; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: space-around; padding: 4px; z-index: 1; opacity: 0; pointer-events: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;} #check:checked ~ .media-icons{opacity: 1; pointer-events: auto; top: 50px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);} .media-icons::before{content: ''; width: 18px; height: 18px; position: absolute; left: 50%; background: #fff; top: -9px; transform: translateX(-50%) rotate(45deg); z-index: -1;} .accordion{display: block; cursor: pointer; padding: 7px 7px 7px 0px; width: 100%; border: none; text-align: left; outline: none; font-size: 13px; transition: 0.4s;} .panel{padding: 0 18px; display: none; background-color: white; overflow: hidden;} .price-input{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex;} .price-input .field{width: 100%; height: 45px; align-items: center;} .field input{width: 90%; height: 70%; outline: none; font-size: 13px; border-radius: 5px; text-align: center; border: 1px solid #999; -moz--webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{-webkit--webkit-appearance: none; -moz-appearance: none; appearance: none;} .radio-toolbar input[type="radio"]{opacity: 0; position: fixed; width: 0;} .radio-toolbar label{color: gray; font-size: 13px;} .radio-toolbar input[type="radio"]:checked + label{color: orange;} .copy{cursor: pointer; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; opacity: 0.9; transition: all 0.1s ease;} .copy:hover{transform: translateY(-4px); opacity: 1;} .tooltip{position: absolute; top: 0px; left: -30px; background: #373737; padding: 5px 10px; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; color: #fff; font-size: 14px; border-radius: 4px; letter-spacing: 1px; opacity: 0;} .tooltip.appear{animation: appear 1s ease;} @keyframes appear{0%{opacity: 0;}20%{transform: translateY(10px); opacity: 1;}80%{transform: translateY(0px); opacity: 1;}100%{opacity: 0;}} #faq{max-width: 850px; margin: auto; text-align: center;} section.faq{padding-top: 2em; padding-bottom: 3em;} #faq ul{text-align: left;} .transition, p, ul li i:before, ul li i:after{transition: all 0.3s;} #faq .no-select, #faq h2{-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;} #faq h1{color: #000; margin-bottom: 30px; margin-top: 0;} #faq h2{color: #ff8d00; font-size: 18px; line-height: 34px; text-align: left; padding: 15px 25px 0; text-transform: none; font-weight: 300; letter-spacing: 1px; display: block; margin: 0; cursor: pointer; transition: .2s;} #faq p{color: #333; text-align: left; font-size: 16px; line-height: 1.45; position: relative; overflow: hidden; max-height: 250px; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0, 0); margin-top: 5px; margin-bottom: 15px; padding: 0 50px 0 25px; transition: .3s opacity, .6s max-height; hyphens: auto; z-index: 2;} #faq ul{list-style: none; perspective: 900; padding: 0; margin: 0;} #faq ul li{position: relative; overflow: hidden; padding: 0; margin: 0; background: #fff; box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.1); -webkit-tap-highlight-color: transparent;} #faq ul li + li{margin-top: 15px;} #faq ul li:last-of-type{padding-bottom: 0;} #faq ul li i{position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px;} #faq ul li i:before{content: ""; position: absolute; background-color: #ff8d00; width: 3px; height: 9px;} #faq ul li i:after{content: ""; position: absolute; background-color: #ff8d00; width: 3px; height: 9px;} #faq ul li i:before{transform: translate(-2px, 0) rotate(45deg);} #faq ul li i:after{transform: translate(2px, 0) rotate(-45deg);} #faq ul li input[type=checkbox]{position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation;} #faq ul li input[type=checkbox]:checked ~ h2{color: #000;} #faq ul li input[type=checkbox]:checked ~ p{max-height: 0; transition: .3s; opacity: 0;} #faq ul li input[type=checkbox]:checked ~ i:before{transform: translate(2px, 0) rotate(45deg);} #faq ul li input[type=checkbox]:checked ~ i:after{transform: translate(-2px, 0) rotate(-45deg);} .img-sold{opacity: 30%;} @media screen and (max-width: 1024px){.overlay{position: absolute; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.85); opacity: 0; transition: all 450ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;}.overlay .social{position: fixed; bottom: 0; width: 100%; background-color: #fff; padding: 10px 10px 10px; box-sizing: border-box; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.22), 0px 14px 56px rgba(0, 0, 0, 0.25); transform: translate(0, 100%); transition: all 450ms cubic-bezier(0.32, 1, 0.23, 1) 100ms;}.overlay:target{display: block; position: fixed; top: 0; opacity: 1; z-index: 1111;}.overlay:target .social{transform: translate(0, 0); z-index: 9;}.overlay:target .btn-close{display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; outline: 0 none; transform: scale(1, 1);}} @media screen and (min-width: 1024px){.overlay{display: none !important;}.overlay .social{display: none !important;}.overlay:target{display: none !important;}.overlay:target .social{display: none !important;}.overlay:target .btn-close{display: none !important;}} .btn.btn-primary-mc{background: #ffffff; border: 1px solid var(--orange-toffin); color: #fff;} .btn.btn-primary-mc:hover{border: 1px solid var(--orange-toffin); background: var(--orange-toffin); color: var(--orange-toffin);} .no-border{border: none !important;} #lokasi-trigger, #mesin-trigger{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;} .product-icon, .product-actions i, .input-group-btn i, .rating i, .btn i{font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; line-height: 1;} 

/* /tdg_web/static/src/css/custom-2607.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 html, body{overflow-x: clip; width: 100%;} :root{--pl-primary: #f8941f; --pl-primary-dark: #f96d00; --pl-danger: #ef4444; --pl-danger-strong: #dc2626; --pl-text: #111827; --pl-muted: rgba(0, 0, 0, 0.55);} .pl-tag{position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 50px; font-weight: 900; font-size: 12px; color: #fff; background: var(--pl-danger);} .pl-body{padding: 12px 12px 14px;} .pl-product-title{margin: 0 0 5px; font-size: 13px; font-weight: 500; line-height: 1.35;} .pl-product-title a{color: var(--pl-text); text-decoration: none;} .pl-product-title a:hover{color: var(--pl-primary-dark);} .pl-price-row{display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;} .pl-price-new{display: block; font-weight: 900; font-size: 16px; color: var(--pl-text);} .pl-price-old{display: block; margin-top: 2px; font-size: 12px; color: rgba(0, 0, 0, 0.55); text-decoration: line-through;} .pl-stock{font-size: 12px; color: var(--pl-muted); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03);} .pl-expired{margin-top: 8px; font-size: 11px; color: var(--pl-danger-strong);} .pl-actions{margin-top: 12px; display: -webkit-box; display: -webkit-flex; display: flex; gap: 10px;} .pl-btn{flex: 1; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 13px; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.12); transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;} .pl-btn-primary{background: var(--pl-primary); color: #fff; box-shadow: 0 12px 26px rgba(248, 148, 31, 0.18);} .pl-btn-primary:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(249, 109, 0, 0.22); color: var(--pl-primary); background: #ffffff; border: 1px solid var(--pl-primary);} .pl-btn-ico{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.25);} .product-list-section{width: 100%;} .product-card{position: relative; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: none; transition: transform 180ms ease, border-color 180ms ease;} .product-card:hover{transform: translateY(-2px); border-color: rgba(0, 0, 0, 0.14);} .product-card .img-prod{display: block; position: relative; overflow: hidden;} .product-card .img-prod img{width: 100%; object-fit: cover; display: block; border-radius: 0 !important;} .product-card .product__list__item--icons{position: absolute; top: 10px; right: 12px; z-index: 3; margin: 0;} .product-card .product__list__item--icons i{font-size: 1.5rem !important;} .product-grid{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;} .product-grid-item{width: 100%;} @media (max-width: 991.98px){.product-grid{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}} @media (max-width: 767.98px){.product-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}} @media (max-width: 420px){.product-grid{gap: 12px;}} .swiper-container-product-upsell{margin: auto; overflow-x: hidden; padding: 5px;} .swiper-container-product-upsell::-webkit-scrollbar{width: 0 !important;} @media (min-width: 576px){.swiper-container-product-upsell{max-width: 540px;}} @media (min-width: 768px){.swiper-container-product-upsell{max-width: 720px;}} @media (min-width: 992px){.swiper-container-product-upsell{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-product-upsell{max-width: 1140px;}} .blog-slider{position: relative;} .blog-slider__pagination{position: absolute; top: 50% !important; right: 15px; transform: translateY(-50%); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 6px;} .blog-slider__pagination .swiper-pagination-bullet{width: 10px; height: 10px; background: #ddd; opacity: 1;} .blog-slider__pagination .swiper-pagination-bullet-active{background: #ffa45c;} .product span.status-add-to-cart{position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -25%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); padding: 5px 15px; font-weight: bold; background: #ffa45c; color: white; border-radius: 15px; width: 89%; text-align: center;} @media (min-width: 576px){.upsell{max-width: 1100px; margin: 1.75rem auto;}} .swiper-container-nav .swiper-container{padding: 12px 4px 18px;} .swiper-container-nav .swiper-wrapper{align-items: stretch;} .swiper-container-nav .card-cat{transition: transform .2s ease, box-shadow .2s ease;} .swiper-container-nav .card-cat:hover{transform: translateY(-4px);} .swiper-button-next, .swiper-button-prev{width: 42px; height: 42px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.22s ease; --swiper-navigation-size: 16px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center;} .swiper-button-next::after, .swiper-button-prev::after{font-size: var(--swiper-navigation-size); font-weight: 700; color: #111827;} .swiper-button-next:hover, .swiper-button-prev:hover{background: #ffffff; border-color: rgba(248, 148, 31, 0.28); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14); transform: translateY(-2px);} .swiper-button-next:hover::after, .swiper-button-prev:hover::after{color: #f8941f;} .swiper-button-next:focus, .swiper-button-prev:focus{outline: none; box-shadow: 0 0 0 4px rgba(248, 148, 31, 0.14), 0 14px 28px rgba(0, 0, 0, 0.14);} .swiper-button-disabled{opacity: 0.45 !important; cursor: not-allowed; transform: none !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);} @media (max-width: 767.98px){.swiper-button-next, .swiper-button-prev{width: 40px; height: 40px;}.swiper-button-next::after, .swiper-button-prev::after{font-size: 14px;}} .coupon .kanan{border-left: 1px dashed #ddd; width: 40% !important; position: relative;} .coupon .kanan .info::after, .coupon .kanan .info::before{content: ''; position: absolute; width: 20px; height: 20px; background: #f8f9fa; border-radius: 100%;} .coupon .kanan .info::before{top: -10px; left: -10px;} .coupon .kanan .info::after{bottom: -10px; left: -10px;} .coupon .time{font-size: 1.6rem;} .text-muted{font-size: 13px;} .card-coupon{background-color: white; border: none; font-size: 13px;} @media (max-width: 768px){.img-voucher-sm{width: 80px !important;}} .button{display: block; background-color: #ffa45c; font-size: 14px; height: 42px; line-height: 42px; text-align: center; color: white; text-decoration: none; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; border-radius: 10px;} .button:hover{background-color: white; color: #ffa45c; border: 1px solid #ffa45c;} .search-container{position: relative; display: inline-block; margin: 4px 2px; height: 42px; width: 42px; vertical-align: bottom;} .mglass{display: inline-block; pointer-events: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg);} .searchbutton{position: absolute; font-size: 22px; width: 100%; margin: 0; padding: 0;} .search{position: absolute; left: 49px; background-color: #efefef; outline: none; border: none; padding: 0; width: 0; height: 100%; z-index: 10; transition-duration: 0.4s; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; border-bottom: 1px solid #000000;} .search:focus{width: 300px; padding: 0 6px 0 0;} .expandright{left: auto; right: 45px;} .expandright:focus{padding: 0 0 0 16px;} .filterapply{white-space: nowrap; overflow: auto; font-size: 13px;} .Filtersbtn{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;} .filteration{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: end; justify-content: flex-end; padding-top: 10px; padding-bottom: 10px;} @media only screen and (max-width: 767px){.Filtersbtn{display: block; padding-bottom: 20px;}} @media only screen and (max-width: 767px){.reset-fil{width: 100%;}} @media (min-width: 768px){.brand-mobile-search{visibility: hidden; display: none;}} @media only screen and (min-width: 767px){.filter-no-brand{display: none; visibility: hidden;}} @media (max-width: 768px){.filter-brand{visibility: hidden; display: none;}} #chat-toggle{position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; background: #ffa45c; color: #fff; font-size: 28px; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); z-index: 999;} .chat-option{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; padding: 10px; cursor: pointer; transition: background 0.2s; border: solid 1px #e9e9e9; border-radius: 15px;} .chat-option:hover{background: #ffebda;} .chat-icon{width: 35px; height: 35px; margin-right: 12px; object-fit: contain;} .chat-text{flex: 1;} .chat-title{font-size: 13px; font-weight: 700; color: #333;} .chat-desc{font-size: 10px; color: #666;} #chat-widget{position: fixed; bottom: 100px; right: 24px; width: 380px; height: fit-content; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; z-index: 998;} .page-widget-ai{-webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; width: 100%;} .header-widget-ai{color: #121111; padding: 15px; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; font-weight: 700; border-bottom: 1px solid #e6e6e6;} .header-widget-ai button{background: none; border: none; color: #ff0000; font-size: 16px; cursor: pointer;} .lihat-semua-link{font-size: 1rem; text-decoration: none;} @media (max-width: 767.98px){.card-body img{width: 40px !important; height: 40px !important; margin-bottom: 10px !important;}.card-title{font-size: 13px !important; margin-bottom: 6px !important;}.lihat-semua-link{font-size: 0.95rem; padding-top: 8px; display: inline-block;}.heading-section{margin-bottom: 0;}} .tab-content-point{border-radius: 10px; box-shadow: 0 1px 4px rgba(141, 150, 170, 0.4);} .debit{color: #00de07; font-weight: 700;} .credit{color: #de0000; font-weight: 700;} .box-point{border-radius: 15px; border: solid 1px #e9e9e9; padding: 15px;} .tab-myaccount{-webkit-flex-wrap: nowrap; flex-wrap: nowrap; white-space: nowrap; overflow: auto; background: white; border-radius: 15px; border: solid 1px #e9e9e9; padding: 10px;} .point-datepicker{height: 44px !important; border-radius: 5px;} input[type="checkbox"].switch{-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 3.5em; height: 1.5em; background: #ddd; border-radius: 3em; position: relative; cursor: pointer; outline: none; transition: all .2s ease-in-out;} input[type="checkbox"].switch:checked{background: #ffa45c;} input[type="checkbox"].switch:after{position: absolute; content: ""; width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3); transform: scale(0.7); left: 0; transition: all .2s ease-in-out;} input[type="checkbox"].switch:checked:after{left: calc(100% - 1.5em);} .switch-point{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;} .info-tfn-point{border: solid 1px #ffa45c; border-radius: 15px; padding: 10px; background: #fff1e7 !important;} .custom-check{-webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit--webkit-appearance: none; -moz-appearance: none; appearance: none; width: 22px; height: 22px; border: 2px solid #ffa45c; border-radius: 6px; background-color: #fff; cursor: pointer; transition: all 0.25s ease; position: relative; outline: none;} .custom-check:hover{box-shadow: 0 0 8px #e3a2154d; transform: scale(1.05);} .custom-check:checked{background-color: #ffa45c; border-color: #ffa45c;} .custom-check:checked::after{content: ""; position: absolute; top: 3px; left: 7px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);} .text-orange{color: #FFA500; font-weight: bold;} .text-red{color: #FF0000; font-weight: bold;} @media screen and (max-width: 576px){.tab-content-mobile{font-size: 11px;}} .info-discount{border: solid 1px #08b34b; border-radius: 15px; padding: 10px; background: #ccffe3;} .info-row{display: grid; grid-template-columns: auto 1fr; padding: 3px 0;} .order-card{border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(141, 150, 170, 0.4);} .order-card img{width: 55px; height: 55px;} .icon-belanja{width: 25px !important; height: 25px !important;} .product-card-slide{height: auto;} .product-actions{position: absolute; top: 14px; right: 14px; display: -webkit-box; display: -webkit-flex; display: flex; gap: 10px; z-index: 10;} .action-btn{width: 44px; height: 44px; border-radius: 999px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);} .action-btn i{font-size: 18px; color: #c1c1c1;} .fav-btn:hover i{color: #ef4444;} .share-wrapper{position: relative;} .share-wrapper input{display: none;} .media-icons{position: absolute; top: 54px; right: 0; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 6px; background: #fff; padding: 8px; border-radius: 10px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);} .share-wrapper input:checked ~ .media-icons{display: -webkit-box; display: -webkit-flex; display: flex;} .modern-navbar{background: #fff !important; border-bottom: 1px solid #eee; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);} .modern-navbar .container{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;} .nav-brand{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;} .nav-brand-img{height: 38px; width: auto; object-fit: contain;} .modern-shared-nav-menu{gap: 6px; align-items: center;} .modern-shared-nav-menu .nav-link{font-size: 14px; font-weight: 500; color: #333 !important; padding: 8px 14px !important; border-radius: 10px; transition: all .2s ease;} .modern-shared-nav-menu .nav-link:hover{background: #f5f5f5; color: #000 !important;} .nav-search-item{margin-left: 12px;} .nav-search-field{border-bottom: 1px solid #000000;} .nav-search-item .form-control{height: 36px; border-radius: 10px; font-size: 13px;} .nav-utilities-mobile{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 8px;} .nav-utility-btn{width: 36px; height: 36px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f7f7f7; border: none; transition: all .2s ease;} .nav-utility-btn:hover{background: #ececec;} .nav-utility-icon{font-size: 20px; color: #555555 !important;} .nav-utility-icon-search{line-height: 0 !important;} .nav-utility-btn-menu{background: #f7f7f7;} .nav-utility-btn-menu i{font-size: 18px; line-height: 1; color: #333; transition: color .2s ease, transform .2s ease;} .nav-utility-btn-menu:hover i{color: #f8941f;} .modern-side-menu{position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; visibility: hidden;} .modern-side-menu__panel{background: #fff; width: 280px; height: 100%; box-shadow: 2px 0 20px rgba(0, 0, 0, 0.08); padding: 10px 20px;} .modern-side-menu__close{position: absolute; right: 16px; top: 12px; cursor: pointer;} .modern-side-menu__close:before{content: "✕"; font-size: 18px; color: #333;} .modern-side-menu__nav{padding-top: 1.5rem !important;} .nav-full-width{width: 100%;} .mobile-nav-list--legacy{list-style: none; margin: 0; padding: 0;} .mobile-nav-list--legacy > .nav-item, .mobile-nav-list--legacy > li{width: 100%;} .mobile-nav-list--legacy > .nav-item + .nav-item, .mobile-nav-list--legacy > li + li{margin-top: 8px;} .mobile-nav-list--legacy .nav-link, .mobile-nav-list--legacy > li > a, .mobile-nav-list--legacy .dropdown-toggle, .mobile-nav-list--legacy .modern-marketplace-nav__menu > .nav-item > .nav-link{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 16px !important; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05); color: #111827 !important; font-size: 14px; font-weight: 600; text-align: left;} .mobile-nav-list--legacy .nav-item.dropdown > .dropdown-menu{display: none; position: static !important; float: none !important; width: 100%; min-width: 0; max-width: none; margin: 10px 0 0; padding: 10px; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);} .mobile-nav-list--legacy .nav-item.dropdown.mobile-open > .dropdown-menu, .mobile-nav-list--legacy .nav-item.dropdown.show > .dropdown-menu{display: block !important;} .mobile-nav-list--legacy .dropdown-menu .dropdown-item, .mobile-nav-list--legacy .dropdown-menu a{display: block; width: 100%; min-height: 0; padding: 10px 12px; border-radius: 12px; color: #374151; font-size: 13px; font-weight: 500; background: transparent; box-shadow: none;} .mobile-nav-list--legacy .dropdown-menu .dropdown-item + .dropdown-item, .mobile-nav-list--legacy .dropdown-menu li + li{margin-top: 6px;} .mobile-nav-list--legacy .dropdown-menu .dropdown-item:hover, .mobile-nav-list--legacy .dropdown-menu a:hover{background: rgba(248, 148, 31, 0.1); color: #f8941f !important;} .mobile-nav-list--legacy .marketplace-mega, .mobile-nav-list--legacy .modern-marketplace-nav__mega-menu, .mobile-nav-list--legacy .modern-marketplace-nav__mega-menu--marketplace{display: block !important; min-height: 0; width: 100%;} .mobile-nav-list--legacy .marketplace-mega__sidebar{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 8px; padding: 0; margin-bottom: 10px; border-right: 0; background: transparent;} .mobile-nav-list--legacy .marketplace-mega__main{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 0; border-radius: 12px; background: #fff; color: #111827; font-size: 13px; font-weight: 700; text-align: left; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);} .mobile-nav-list--legacy .marketplace-mega__panel{display: none; padding: 0;} .mobile-nav-list--legacy .marketplace-mega__panel.is-active{display: block;} .mobile-nav-list--legacy .marketplace-mega__content{padding: 0; background: transparent;} .mobile-nav-list--legacy .marketplace-mega__grid{display: grid; grid-template-columns: 1fr; gap: 10px;} .mobile-nav-list--legacy .marketplace-mega__card{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; background: #fff; box-shadow: none;} .mobile-nav-list--legacy .marketplace-mega__thumb{flex: 0 0 52px; width: 52px; height: 52px; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center;} .mobile-nav-list--legacy .marketplace-mega__thumb img{max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px;} .mobile-nav-list--legacy .marketplace-mega__label{font-size: 13px; line-height: 1.35;} .modern-marketplace-nav .dropdown-menu{opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none;} .modern-marketplace-nav .dropdown.show > .dropdown-menu{display: block; opacity: 1; transform: translateY(0); pointer-events: auto;} .modern-marketplace-nav .dropdown-menu{display: none;} .modern-marketplace-nav .dropdown.show > .dropdown-menu{display: block;} .modern-marketplace-nav{position: sticky; top: 0; z-index: 1025; background: #ffffffba !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 10px 34px rgba(15, 23, 42, 0.06);} .modern-marketplace-nav__container{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;} .marketplace-brand{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; margin-right: 22px;} .marketplace-brand__img{width: 164px; max-width: 100%; height: auto; display: block;} .modern-marketplace-nav__collapse{align-items: center;} .modern-marketplace-nav__search{flex: 1 1 360px; max-width: 320px;} .modern-marketplace-nav__search-form{margin-bottom: 0;} .modern-marketplace-nav__search-field{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; height: 44px; margin-bottom: 0; padding: 0 16px; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05); position: relative; overflow: visible; line-height: 1; transition: border-color .18s ease, box-shadow .18s ease;} .modern-marketplace-nav__search-field:focus-within{border-color: rgba(248, 148, 31, 0.24) !important; box-shadow: 0 10px 24px rgba(248, 148, 31, 0.1);} .modern-marketplace-nav__search-field .icon{color: #6b7280; font-size: 16px; margin-right: 6px; line-height: 1; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto;} .modern-marketplace-nav__search-field .form-control{height: 44px; padding: 0 0 0 12px; color: #111827; font-size: 14px; line-height: 44px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;} .modern-marketplace-nav__search-input, .modern-marketplace-nav__search-field input, .modern-marketplace-nav__search-field input.form-control{vertical-align: middle; line-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important;} .modern-marketplace-nav__search-field .form-control:focus{background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important;} .modern-marketplace-nav__search-dropdown{width: 100%; min-width: 100%; margin-top: 12px; padding: 10px; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 16px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 1300;} .modern-marketplace-nav__search-dropdown .dropdown-item{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: auto; padding: 10px 12px; border-radius: 12px; line-height: 1.35; background: transparent !important; width: 100%; transition: background-color .18s ease, color .18s ease;} .modern-marketplace-nav__search-tag{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-width: 78px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(248, 250, 252, 0.95); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap;} .modern-marketplace-nav__search-tag--product{color: #8a5a00; background: rgba(248, 148, 31, 0.1); border-color: rgba(248, 148, 31, 0.18);} .modern-marketplace-nav__search-tag--category{color: #0f766e; background: rgba(20, 184, 166, 0.1); border-color: rgba(20, 184, 166, 0.18);} .modern-marketplace-nav__search-tag--brand{color: #1d4ed8; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.18);} .modern-marketplace-nav__search-keyword{display: block; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; max-width: 100%; font-size: 13px; font-weight: 500; color: #111827; line-height: 1.25; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .modern-marketplace-nav__menu{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 6px;} .modern-marketplace-nav__menu > .nav-item > .nav-link{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; padding: 8px 14px !important; border-radius: 999px; color: #0f172a !important; font-size: 14px; font-weight: 600; letter-spacing: -.01em; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;} .modern-marketplace-nav__menu > .nav-item.active > .nav-link, .modern-marketplace-nav__menu > .nav-item > .nav-link:hover{background: rgba(248, 147, 31, 0.164); color: #111827 !important; box-shadow: inset 0 0 0 1px rgba(248, 148, 31, 0.12);} .modern-marketplace-nav__menu > .nav-item.dropdown > .nav-link::after{margin-left: 8px; opacity: .7;} .modern-marketplace-nav__dropdown .dropdown-menu, .modern-marketplace-nav__account-menu{margin-top: 14px; padding: 12px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 20px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 52px rgba(15, 23, 42, 0.12);} .modern-marketplace-nav__mega-menu{display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 18px; min-width: 620px;} .modern-marketplace-nav__promo-menu{min-width: 280px;} .modern-marketplace-nav__mega-col{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 4px;} .modern-marketplace-nav__mega-title{margin-bottom: 6px; padding: 6px 8px; color: #111827; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;} .modern-marketplace-nav__menu-divider{height: 1px; margin: 8px 0; background: rgba(15, 23, 42, 0.08);} .modern-marketplace-nav__dropdown .dropdown-item, .modern-marketplace-nav__account-menu .dropdown-item, .modern-marketplace-nav__search-dropdown .dropdown-item{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; min-height: 42px; padding: 10px 14px; border-radius: 12px; color: #111827; font-size: 14px; font-weight: 500; transition: background-color .18s ease, color .18s ease, transform .18s ease;} .modern-marketplace-nav__dropdown .dropdown-item:hover, .modern-marketplace-nav__account-menu .dropdown-item:hover{background: rgba(248, 148, 31, 0.1); color: #f8941f; transform: translateX(2px);} .modern-marketplace-nav__account-menu .dropdown-item-logout{color: #dc2626 !important; font-weight: 600;} .modern-marketplace-nav__account-menu .dropdown-item-logout:hover{background: rgba(220, 38, 38, 0.1) !important; color: #b91c1c !important;} .modern-marketplace-nav__search-dropdown .dropdown-item:hover{background: rgba(15, 23, 42, 0.05) !important; color: inherit; transform: none; border-radius: 12px;} .modern-marketplace-nav__search-dropdown li:hover, .modern-marketplace-nav__search-dropdown li:focus, .modern-marketplace-nav__search-dropdown li:active{background: transparent !important; border-radius: 12px;} .modern-marketplace-nav__search-dropdown li + li .dropdown-item{border-top: 1px solid rgba(15, 23, 42, 0.05);} .modern-marketplace-nav__utilities{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 10px; margin-left: 18px;} .modern-marketplace-nav__utility{position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); color: #374151; flex-shrink: 0;} .modern-marketplace-nav__utility:hover{color: #111827; background: #f8fafc;} .modern-marketplace-nav__utility-badge{position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #f8941f; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;} .modern-marketplace-nav__mobile-actions{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 8px;} .modern-marketplace-nav__icon-btn{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); color: #374151;} .modern-marketplace-nav__menu-btn{width: 42px; height: 42px;} .modern-marketplace-nav__menu-btn i{font-size: 18px; line-height: 1; color: #111827; transition: color .2s ease, transform .2s ease;} .modern-marketplace-nav__menu-btn:hover i, .modern-marketplace-nav__menu-btn:focus i{color: #f8941f;} .nav-drawer{position: fixed; inset: 0; z-index: 1100; visibility: hidden;} .nav-drawer__backdrop{position: fixed; inset: 0; background: rgba(15, 23, 42, 0.24); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden;} .nav-drawer__panel{position: relative; width: 320px; max-width: calc(100vw - 28px); min-height: 100%; background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%); box-shadow: 18px 0 40px rgba(15, 23, 42, 0.14); border-top-right-radius: 28px; border-bottom-right-radius: 28px; padding: 18px 18px 28px; overflow-y: auto;} .nav-drawer__header{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;} .nav-drawer__brand-img{width: 150px; height: auto; display: block;} .nav-drawer__close{position: relative; width: 40px; height: 40px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);} .nav-drawer__close::before{content: '✕'; position: absolute; inset: 0; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; color: #111827; font-size: 16px;} .nav-drawer__quick-actions{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px;} .nav-drawer__quick-link{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); color: #111827; font-size: 12px; font-weight: 600;} .nav-drawer__quick-link i{font-size: 18px;} .nav-drawer__section-label{margin: 18px 0 10px; color: #6b7280; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;} .nav-drawer__menu{list-style: none; margin: 0; padding: 0;} .nav-drawer__item + .nav-drawer__item{margin-top: 8px;} .nav-drawer__link, .nav-drawer__toggle, .nav-drawer__subtoggle{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05); color: #111827; font-size: 14px; font-weight: 600; text-align: left;} .nav-drawer__item.is-active .nav-drawer__link{background: rgba(248, 148, 31, 0.12); color: #111827; box-shadow: inset 0 0 0 1px rgba(248, 148, 31, 0.18);} .nav-drawer__toggle i, .nav-drawer__subtoggle i{font-size: 12px; color: #6b7280;} .nav-drawer__submenu{margin-top: 10px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);} .nav-drawer__submenu-group + .nav-drawer__submenu-group{margin-top: 10px;} .nav-drawer__submenu-list{list-style: none; margin: 8px 0 0; padding: 0;} .nav-drawer__submenu-list li + li{margin-top: 6px;} .nav-drawer__submenu-list a{display: block; padding: 10px 12px; border-radius: 12px; color: #374151; font-size: 13px; font-weight: 500;} .nav-drawer__submenu-list a:hover{background: rgba(248, 148, 31, 0.1); color: #f8941f;} @media (min-width: 1200px){.nav-drawer, .nav-drawer__backdrop, .modern-marketplace-nav__mobile-actions{display: none !important;}} @media (max-width: 1199.98px){.modern-marketplace-nav__collapse{display: none !important;}.modern-marketplace-nav__container{min-height: 78px;}.marketplace-brand__img{width: 148px;}} @media (min-width: 992px){.modern-marketplace-nav .nav-item.dropdown{position: relative;}.modern-marketplace-nav .nav-item.dropdown.show > .dropdown-menu, .modern-marketplace-nav .nav-item.dropdown > .dropdown-menu.show, .modern-marketplace-nav .nav-item.dropdown .dropdown-menu:hover{opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;}.modern-marketplace-nav .dropdown-menu{display: block; position: absolute; top: 100%; left: 50%; margin-top: 6px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; pointer-events: none; z-index: 30; max-width: clamp(0px, 92vw, 680px); box-sizing: border-box; transform: translateX(-50%) translateY(6px);}.modern-marketplace-nav .modern-marketplace-nav__promo-menu, .modern-marketplace-nav .modern-marketplace-nav__search-dropdown{transform: translateX(-50%) translateY(6px);}.modern-marketplace-nav .nav-item.dropdown.show > .modern-marketplace-nav__promo-menu, .modern-marketplace-nav .modern-marketplace-nav__promo-menu.show{opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important;}.modern-marketplace-nav .modern-marketplace-nav__dropdown--mega > .dropdown-menu, .modern-marketplace-nav .modern-marketplace-nav__mega-menu, .modern-marketplace-nav__mega-menu--marketplace{position: fixed !important; left: 50% !important; right: auto !important; width: calc(100vw - 32px) !important; max-width: 1080px !important; min-width: 960px; padding: 0 !important; display: block !important; background: #fff !important; border-radius: 0px 0px 20px 20px !important; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12) !important; overflow: hidden !important; transform: translateX(-50%) !important; margin: 0 !important; z-index: 1200 !important;}.modern-marketplace-nav .modern-marketplace-nav__dropdown--mega{position: static !important;}.modern-marketplace-nav .modern-marketplace-nav__dropdown--mega.show > .dropdown-menu, .modern-marketplace-nav .modern-marketplace-nav__dropdown--mega > .dropdown-menu.show, .modern-marketplace-nav .modern-marketplace-nav__dropdown--mega > .dropdown-menu:hover{left: 50% !important; right: auto !important; transform: translateX(-50%) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;}.marketplace-mega{display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 420px;}.marketplace-mega__sidebar{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 8px; padding: 18px; background: #fff; border-right: 1px solid rgba(15, 23, 42, 0.06);}.marketplace-mega__main{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; padding: 5px 14px; border: 0; border-radius: 12px; background: transparent; color: #3f3f46; font-size: 13px; font-weight: 700; text-align: left; transition: background-color .18s ease, color .18s ease;}.marketplace-mega__main.is-active, .marketplace-mega__main:hover{background: #f5f4ef; color: #f8941f;}.marketplace-mega__content{padding: 22px 28px; background: #fff;}.marketplace-mega__panel{display: none;}.marketplace-mega__panel.is-active{display: block;}.marketplace-mega__grid{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;}.marketplace-mega__card{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; background: #ffffff87; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;}.marketplace-mega__card:hover{border-color: rgba(111, 132, 80, 0.24); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07); transform: translateY(-1px);}.marketplace-mega__thumb{flex: 0 0 54px; width: 54px; height: 54px; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center;}.marketplace-mega__thumb img{max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 14px 0px 0px 14px;}.marketplace-mega__label{color: #2f2f2f; font-size: 12px; font-weight: 700; line-height: 1.35;}.modern-marketplace-nav .modern-marketplace-nav__promo-menu, .modern-marketplace-nav .modern-marketplace-nav__search-dropdown{transform: translateX(-50%) translateY(6px);}.modern-marketplace-nav .nav-item.dropdown.show > .modern-marketplace-nav__promo-menu, .modern-marketplace-nav .modern-marketplace-nav__promo-menu.show{opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important;}.modern-marketplace-nav__search-field:focus-within .modern-marketplace-nav__search-dropdown, .modern-marketplace-nav__search-field.show .modern-marketplace-nav__search-dropdown, .modern-marketplace-nav__search-dropdown.show, .modern-marketplace-nav__search-dropdown:hover{opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; display: block !important;}.modern-marketplace-nav::before{content: ""; position: absolute; top: 100%; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 20; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none;}.modern-marketplace-nav:has(.modern-marketplace-nav__dropdown--mega.show)::before, .modern-marketplace-nav:has(.modern-marketplace-nav__dropdown--promotion.show)::before, .modern-marketplace-nav:has(.modern-marketplace-nav__utility-dropdown.show)::before{opacity: 1; visibility: visible;}.modern-marketplace-nav .modern-marketplace-nav__account-menu{left: auto !important; right: 0 !important; transform: translateY(6px) !important;}.modern-marketplace-nav .nav-item.dropdown.show > .modern-marketplace-nav__account-menu, .modern-marketplace-nav .modern-marketplace-nav__account-menu.show{transform: translateY(0) !important;}.modern-marketplace-nav .nav-link{position: relative; z-index: 1002;}.modern-marketplace-nav .modern-marketplace-nav__mega-menu{z-index: 1001 !important;}} .get-in-touch-slider-wrap{height: 100%;} .get-in-touch-slider{overflow: hidden; border-radius: 24px;} .get-in-touch-slide-item{position: relative; overflow: hidden; border-radius: 24px; background: #ffffff; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);} .get-in-touch-slide-item img{width: 100%; height: 520px; object-fit: cover; display: block;} .get-in-touch-slide-content{position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);} .get-in-touch-slide-content span{display: inline-block; margin-bottom: 8px; color: #f69521; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;} .get-in-touch-slide-content h4{margin-bottom: 8px;} .get-in-touch-slide-content p{margin-bottom: 0; color: #5b6472; line-height: 1.8;} .get-in-touch-slider-pagination{position: static; margin-top: 18px; text-align: center;} .get-in-touch-slider-pagination .swiper-pagination-bullet{width: 10px; height: 10px; background: rgba(246, 149, 33, 0.28); opacity: 1;} .get-in-touch-slider-pagination .swiper-pagination-bullet-active{background: #f69521;} @media (max-width: 991.98px){.get-in-touch-slide-item img{height: 420px;}} @media (max-width: 767.98px){.get-in-touch-slide-item, .get-in-touch-slider{border-radius: 18px;}.get-in-touch-slide-item img{height: 320px;}.get-in-touch-slide-content{left: 16px; right: 16px; bottom: 16px; padding: 16px; border-radius: 16px;}} .digital-feature-list{margin: 0; padding: 0; list-style: none;} .digital-feature-list li{position: relative; padding-left: 24px; margin-bottom: 10px; color: inherit; line-height: 1.85;} .digital-feature-list li:last-child{margin-bottom: 0;} .digital-feature-list li::before{content: ""; position: absolute; top: 12px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #f69521; box-shadow: 0 0 0 5px rgba(246, 149, 33, 0.12);} .mobile-nav-list .mobile-menu-logout{color: #dc2626 !important; font-weight: 600 !important;} .mobile-nav-list .mobile-menu-logout i{color: #dc2626 !important;} .mobile-nav-list .mobile-menu-logout:hover{background: rgba(220, 38, 38, 0.05) !important;} .mobile-bottom-sheet{position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-height: 100dvh; height: 100dvh; background-color: #ffffff; border-radius: 0; z-index: 1610; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.35s; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); visibility: hidden;} .mobile-bottom-sheet.is-active{transform: translateX(0); visibility: visible;} #bottom-sheet-menu{height: 100dvh;} .mobile-bottom-sheet__content{flex: 1; overflow-y: auto; padding: 16px 20px 85px; -webkit-overflow-scrolling: touch;} .mobile-bottom-sheet__content::-webkit-scrollbar{display: none;} .mobile-bottom-sheet__content{-ms-overflow-style: none; scrollbar-width: none;} .mobile-account-list{list-style: none; margin: 0; padding: 0;} .mobile-account-list li{border-bottom: 1px solid #f5f5f5;} .mobile-account-list li:last-child{border-bottom: none;} .mobile-account-list a{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; padding: 5px 0; color: #334155; font-size: 15px; font-weight: 600; text-decoration: none; transition: color 0.2s;} .mobile-account-list a i{width: 24px; font-size: 18px; margin-right: 12px; color: #64748b; text-align: center;} .mobile-account-list a.logout-link{color: #dc2626;} .mobile-account-list a.logout-link i{color: #dc2626;} @media (max-width: 1199.98px){body{padding-bottom: 70px;}} .mobile-bottom-nav{position: fixed; bottom: 0; left: 0; right: 0; height: 65px; background: #ffffff; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); z-index: 1620; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-around; align-items: center; padding: 0 10px;} .mobile-bottom-nav__item{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; color: #8c8c8c; text-decoration: none; font-size: 11px; font-weight: 600; flex: 1; height: 100%;} .mobile-bottom-nav__item i, .mobile-bottom-nav__item svg{font-size: 20px; margin-bottom: 4px; transition: transform 0.2s ease, color 0.2s ease;} .mobile-bottom-nav__item:hover, .mobile-bottom-nav__item:focus{text-decoration: none; color: #F8941F;} .mobile-bottom-nav__item.active{color: #F8941F;} .mobile-bottom-nav__item.active i, .mobile-bottom-nav__item.active svg{transform: scale(1.1);} .mobile-nav-shell{position: relative; width: 100%;} .mobile-nav-view{display: none;} .mobile-nav-view.is-active{display: block; animation: viewFadeIn 0.3s ease forwards;} @keyframes viewFadeIn{from{opacity: 0; transform: translateY(10px);}to{opacity: 1; transform: translateY(0);}} .mobile-nav-list{list-style: none; margin: 0; padding: 0;} .mobile-nav-list .mobile-menu-item{list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #ececec;} .mobile-nav-list > .mobile-menu-item:last-child{border-bottom: 0;} .mobile-nav-list .mobile-menu-toggle, .mobile-nav-list .mobile-menu-link{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #171717; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: left; text-decoration: none; transition: color .18s ease;} .mobile-nav-list .mobile-menu-toggle{-webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit--webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;} .mobile-nav-list .mobile-menu-toggle span, .mobile-nav-list .mobile-menu-link{min-width: 0;} .mobile-nav-list .mobile-menu-toggle i{-webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; font-size: 14px; color: #171717; transition: transform .2s ease;} .mobile-nav-list .mobile-menu-item.is-open > .mobile-menu-toggle i{transform: rotate(180deg);} .mobile-nav-list .mobile-menu-panel{display: none; position: static !important; float: none !important; width: 100%; margin: 0 0 14px; padding: 14px; border: 0; border-radius: 0; background: #f5f5f5; box-shadow: none; opacity: 1 !important; visibility: visible !important; overflow: visible;} .mobile-nav-list .mobile-menu-item.is-open > .mobile-menu-panel{display: block;} .mobile-nav-list .mobile-menu-panel, .mobile-nav-list .mobile-menu-panel .mobile-menu-sublist, .mobile-nav-list .mobile-menu-panel .mobile-menu-sublist > .mobile-menu-item{width: 100%;} .mobile-nav-list .mobile-menu-panel .mobile-menu-sublist{display: block !important; position: static !important; float: none !important; margin: 0; padding: 0; list-style: none; opacity: 1 !important; visibility: visible !important;} .mobile-nav-list .mobile-menu-panel .mobile-menu-sublist > .mobile-menu-item{display: block !important; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #dddddd;} .mobile-nav-list .mobile-menu-panel .mobile-menu-sublist > .mobile-menu-item:last-child{border-bottom: 0;} .mobile-nav-list .mobile-menu-panel .mobile-menu-sublist > .mobile-menu-item + .mobile-menu-item{margin-top: 0;} .mobile-nav-list .mobile-menu-sublist{list-style: none; margin: 0; padding: 0;} .mobile-nav-list .mobile-menu-sublist.level-1, .mobile-nav-list .mobile-menu-sublist.level-2, .mobile-nav-list .mobile-menu-sublist.level-3, .mobile-nav-list .mobile-menu-sublist.level-4{padding-left: 0;} .mobile-nav-list .mobile-menu-sublist .mobile-menu-toggle, .mobile-nav-list .mobile-menu-sublist .mobile-menu-link{padding: 14px 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none; font-size: 14px; font-weight: 600; background: transparent; color: #1f1f1f;} .mobile-nav-list .mobile-menu-sublist .mobile-menu-link{-webkit-box-pack: start; justify-content: flex-start;} .mobile-nav-list .mobile-menu-sublist .mobile-menu-item.is-open > .mobile-menu-toggle, .mobile-nav-list .mobile-menu-sublist .mobile-menu-toggle:hover, .mobile-nav-list .mobile-menu-sublist .mobile-menu-link:hover{background: transparent; border-color: transparent; color: #171717;} .mobile-nav-list .mobile-menu-sublist .mobile-menu-item.is-open > .mobile-menu-toggle i, .mobile-nav-list .mobile-menu-sublist .mobile-menu-toggle:hover i{color: #171717;} .mobile-category-browser__header{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 18px; border-bottom: 1px solid #ededed;} .mobile-category-browser__back, .mobile-category-browser__search{flex: 0 0 40px; width: 40px; height: 40px; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: left; border: 0; background: transparent; color: #7b7b7b; font-size: 18px; padding: 0; cursor: pointer;} .mobile-category-browser__title{-webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; font-size: 18px; font-weight: 700; line-height: 1.3; color: #2a2a2a;} .mobile-category-browser__chips{display: -webkit-box; display: -webkit-flex; display: flex; gap: 10px; overflow-x: auto; padding: 16px 0 18px; scrollbar-width: none;} .mobile-category-browser__chips::-webkit-scrollbar{display: none;} .mobile-category-chip{-webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 12px 18px; border: 1px solid #e6e6e6; border-radius: 14px; background: #ffffff; color: #F8941F; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease;} .mobile-category-chip.is-active{background: #F8941F; border-color: #F8941F; color: #ffffff;} .mobile-category-browser__section{margin-top: 28px;} .mobile-category-browser__section + .mobile-category-browser__section{margin-top: 28px;} .mobile-category-browser__section-header{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;} .mobile-category-browser__section-title{font-size: 16px; font-weight: 700; line-height: 1.35; color: #2f2f2f;} .mobile-category-browser__section-link{font-size: 14px; font-weight: 700; color: #F8941F; text-decoration: none;} .mobile-category-browser__grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;} .mobile-category-card{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 12px; border-radius: 14px; background: #f3f3f0; text-decoration: none;} .mobile-category-card__image{flex: 0 0 64px; width: 64px; height: 64px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center;} .mobile-category-card__image img{max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 14px 0px 0px 14px;} .mobile-category-card__label{font-size: 14px; font-weight: 700; line-height: 1.35; color: #343434;} .mobile-search-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 9999; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease;} .mobile-search-overlay.is-active{display: -webkit-box; display: -webkit-flex; display: flex; opacity: 1; transform: translateY(0);} .mobile-search-overlay__header{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #eee; gap: 15px;} .mobile-search-overlay__back{background: none; border: none; font-size: 20px; color: #333; padding: 0; cursor: pointer;} .mobile-search-overlay__form{flex: 1; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;} .mobile-search-overlay__input{width: 100%; border: 1px solid #ddd; border-radius: 20px; padding: 8px 35px 8px 15px; font-size: 14px; outline: none;} .mobile-search-overlay__icon{position: absolute; right: 15px; color: #999; pointer-events: none;} .mobile-search-overlay__body{padding: 15px; overflow-y: auto;} .mobile-search-overlay__filters{display: -webkit-box; display: -webkit-flex; display: flex; gap: 10px; margin-bottom: 20px;} .search-filter-pill{background: #fff; border: 1px solid #ddd; color: #555; padding: 6px 16px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.2s ease;} .search-filter-pill.is-active{background: #F8941F; border-color: #F8941F; color: #fff;} .mobile-search-overlay__results{list-style: none; padding: 0; margin: 0;} .search-result-item{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; text-decoration: none !important; color: #333;} .search-result-icon{width: 32px; height: 32px; background: #f9f9f9; border-radius: 50%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin-right: 12px;} .search-result-icon svg{width: 16px; height: 16px;} .search-result-text{flex: 1; font-size: 15px; font-weight: 500;} .search-result-arrow{color: #ccc; font-size: 12px;} .bundle-page{background: #f5f6f8;} .bundle-wrap{max-width: 1200px;} .bundle-block{margin-bottom: 30px;} .bundle-row{background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; box-shadow: 0 10px 30px rgba(32, 33, 36, 0.06); display: grid; grid-template-columns: 330px 1fr; gap: 26px; padding: 24px; align-items: stretch;} .bundle-summary{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .bundle-pricebox{flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff8ef, #fffaf3); border: 1px solid rgba(248, 148, 31, 0.28); border-radius: 16px; padding: 30px 22px; text-align: center;} .bundle-ico{width: 58px; height: 58px; border-radius: 50%; background: #f8941f; color: #fff; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; box-shadow: 0 12px 26px rgba(248, 148, 31, 0.32);} .bundle-eyebrow{font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f96d00; background: rgba(248, 148, 31, 0.14); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;} .bundle-title{font-size: 20px; font-weight: 800; color: #111827; margin: 0 0 16px; line-height: 1.25;} .bundle-price-label{font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45);} .bundle-price-new{font-size: 27px; font-weight: 900; color: #111827; line-height: 1.1; margin: 2px 0 18px;} .bundle-buy{display: block; width: 100%; background: #f8941f; color: #fff !important; font-weight: 800; font-size: 15px; padding: 12px 18px; border-radius: 12px; text-decoration: none; box-shadow: 0 12px 26px rgba(248, 148, 31, 0.28); transition: transform .16s ease, box-shadow .16s ease; cursor: pointer;} .bundle-buy:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(249, 109, 0, 0.3); color: #fff !important;} .bundle-scroller{min-width: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .bundle-scroll-hint{font-size: 12px; color: rgba(0, 0, 0, 0.5); margin: 2px 2px 12px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 7px; font-weight: 600;} .bundle-scroll-hint i{color: #f96d00;} .bundle-track{display: -webkit-box; display: -webkit-flex; display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;} .bundle-track::-webkit-scrollbar{height: 8px;} .bundle-track::-webkit-scrollbar-thumb{background: rgba(0, 0, 0, 0.18); border-radius: 999px;} .bundle-track::-webkit-scrollbar-thumb:hover{background: rgba(0, 0, 0, 0.3);} .bundle-track::-webkit-scrollbar-track{background: rgba(0, 0, 0, 0.05); border-radius: 999px;} .bundle-slide{-webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 212px; scroll-snap-align: start;} .bundle-slide .product-card{height: 100%;} @media (max-width: 900px){.bundle-row{grid-template-columns: 1fr; gap: 18px; padding: 20px;}.bundle-pricebox{margin-top: 0;}} @media (max-width: 767.98px){.bundle-slide{width: 176px;}.bundle-pricebox{flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; padding: 14px 16px; gap: 4px 14px;}.bundle-ico, .bundle-eyebrow, .bundle-price-label{display: none;}.bundle-title{flex: 1 1 100%; font-size: 15.5px; margin: 0 0 8px; line-height: 1.3;}.bundle-price-new{-webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; margin: 0; font-size: 19px; text-align: left; white-space: nowrap;}.bundle-buy{width: auto; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 9px 18px; font-size: 13px; border-radius: 10px;}} .bundle-variant .modal-content.bv-content{border: none; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);} .bv-header{display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.08);} .bv-header h5{margin: 0; font-size: 17px; font-weight: 800; color: #111827;} .bv-header p{margin: 3px 0 0; font-size: 12.5px; color: rgba(0, 0, 0, 0.55); line-height: 1.4;} .bv-close{border: none; background: transparent; font-size: 26px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 4px;} .bv-close:hover{color: #111827;} .bv-body{padding: 4px 22px; max-height: 56vh; overflow-y: auto;} .bv-item{display: -webkit-box; display: -webkit-flex; display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.07);} .bv-item:last-child{border-bottom: none;} .bv-thumb{position: relative; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.08); background: #f5f5f5;} .bv-thumb img{width: 100%; height: 100%; object-fit: cover; display: block;} .bv-info{-webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0;} .bv-name{font-size: 13.5px; font-weight: 700; color: #111827; margin: 0 0 8px; line-height: 1.35;} .bv-field label{display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); margin-bottom: 5px;} .bv-select{width: 100%; max-width: 220px; font-size: 13px; font-weight: 600; color: #111827; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; background: #fff; cursor: pointer;} .bv-select:focus{outline: none; border-color: #f8941f; box-shadow: 0 0 0 3px rgba(248, 148, 31, 0.18);} .bv-footer{padding: 16px 22px 20px; border-top: 1px solid rgba(0, 0, 0, 0.08);} .bv-submit{display: block; width: 100%; background: #f8941f; color: #fff; font-weight: 800; font-size: 15px; padding: 13px; border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 12px 26px rgba(248, 148, 31, 0.28); transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;} .bv-submit:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(249, 109, 0, 0.3);} .bv-submit:disabled{opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none;} @media (max-width: 575.98px){.bv-select{max-width: none;}.bv-thumb{width: 62px; height: 62px;}} 

/* /tdg_web/static/src/css/flashsale-2603.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 :root{--product-card-radius: 20px; --product-card-border: 1px; --product-overlay-inset: 10px; --fs-primary: #f8941f; --fs-primary-dark: #f96d00; --fs-primary-deep: #ff7a00; --fs-primary-deeper: #ff5200; --fs-danger: #ef4444; --fs-danger-strong: #ff0000; --fs-text: #111; --fs-muted: rgba(0, 0, 0, 0.65);} .fs-section .fa-2x, .flashsale-product-list-section .fa-2x, .product-slider-section .fa-2x{font-size: 1.5em !important;} .fs-section .box-product-list, .fs-section .card-product-list.product, .fs-section .product, .flashsale-product-list-section .box-product-list, .flashsale-product-list-section .card-product-list.product, .flashsale-product-list-section .product, .product-slider-section .box-product-list, .product-slider-section .card-product-list.product, .product-slider-section .product{box-shadow: none !important;} .fs-section .box-product-list, .flashsale-product-list-section .box-product-list, .product-slider-section .box-product-list{border: var(--product-card-border) solid rgba(0, 0, 0, 0.12); border-radius: var(--product-card-radius); background: #fff;} .fs-section .card-product-list.product, .fs-section .product, .flashsale-product-list-section .card-product-list.product, .flashsale-product-list-section .product, .product-slider-section .card-product-list.product, .product-slider-section .product{border-radius: var(--product-card-radius); overflow: hidden; position: relative; border: 1px solid rgba(0, 0, 0, 0.1);} .fs-section .card-product-list .img-prod img, .fs-section .product .img-prod img, .flashsale-product-list-section .card-product-list .img-prod img, .flashsale-product-list-section .product .img-prod img, .product-slider-section .card-product-list .img-prod img, .product-slider-section .product .img-prod img{width: 100%; object-fit: cover; display: block; border-radius: 0 !important;} .fs-section .product__list__item--icons, .flashsale-product-list-section .product__list__item--icons, .product-slider-section .product__list__item--icons{position: absolute; top: calc(var(--product-overlay-inset) + var(--product-card-border)); right: calc(var(--product-overlay-inset) + var(--product-card-border)); margin: 0 !important; background: transparent !important; z-index: 3;} .fs-section .product span.status-add-to-cart, .flashsale-product-list-section .product span.status-add-to-cart, .product-slider-section .product span.status-add-to-cart{left: calc(var(--product-overlay-inset) + var(--product-card-border)) !important; right: calc(var(--product-overlay-inset) + var(--product-card-border)) !important; width: auto !important; bottom: calc(var(--product-overlay-inset) + var(--product-card-border)) !important; transform: none !important; -webkit-transform: none !important; -ms-transform: none !important; -moz-transform: none !important;} .fs-section{padding: 22px 0; background: #fff;} .fs-header{display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 18px; position: relative; overflow: hidden;} .fs-header::before{content: ""; position: absolute; inset: -40px; background: radial-gradient(circle at 20% 30%, rgba(249, 109, 0, 0.16), transparent 40%), radial-gradient(circle at 80% 10%, rgba(0, 0, 0, 0.06), transparent 35%), radial-gradient(circle at 70% 80%, rgba(249, 109, 0, 0.1), transparent 45%); pointer-events: none;} .fs-title-wrap{position: relative; z-index: 1; max-width: 720px;} .fs-badge{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(249, 109, 0, 0.25); background: rgba(249, 109, 0, 0.1); font-weight: 800; letter-spacing: .6px; font-size: 12px; color: var(--fs-text);} .fs-title{font-size: 30px; font-weight: 800; color: var(--fs-text);} .fs-subtitle{margin: 0; font-size: 12px;} .fs-info{color: var(--fs-primary); font-size: 16px;} .fs-countdown{width: 100%; max-width: 100%; position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-flex-wrap: nowrap; flex-wrap: nowrap;} .fs-count{min-width: 54px; flex: 0 1 54px; text-align: center;} .fs-num{display: block; font-weight: 900; font-size: 18px; line-height: 1; color: var(--fs-text);} .fs-lbl{display: block; margin-top: 4px; font-size: 11px; color: rgba(0, 0, 0, 0.6);} .fs-sep{font-weight: 900; opacity: .5;} .fs-header-right{min-width: 0;} .fs-grid{margin-top: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;} @media (max-width: 992px){.fs-header{align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;}.fs-title-wrap, .fs-header-right, .fs-countdown-wrap{width: 100%; max-width: 100%;}.fs-countdown-wrap{align-items: flex-start;}.fs-countdown{width: 100%; -webkit-box-pack: start; justify-content: flex-start;}.fs-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}} @media (max-width: 576px){.fs-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}} @media (max-width: 576px){.fs-header{padding: 16px; gap: 12px;}.fs-title{font-size: 30px;}.fs-countdown{gap: 6px; padding: 8px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}.fs-countdown::-webkit-scrollbar{display: none;}.fs-count{min-width: 46px; flex: 0 0 46px;}.fs-num{font-size: 16px;}.fs-lbl{font-size: 10px;}.fs-countdown-text, .fs-countdown-note, .fs-view-all{align-self: flex-start;}} @media (max-width: 420px){.fs-grid{grid-template-columns: 1fr;}} .fs-tag{position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 50px; font-weight: 900; font-size: 12px; color: #fff; background: var(--fs-danger);} .fs-body{padding: 12px 12px 14px;} .fs-product-title{margin: 0 0 5px; font-size: 13px; font-weight: 500; line-height: 1.35;} .fs-product-title a{color: var(--fs-text); text-decoration: none;} .fs-product-title a:hover{color: var(--fs-primary-dark);} .fs-price-row{display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;} .fs-price-new{display: block; font-weight: 900; font-size: 16px; color: var(--fs-text);} .fs-price-old{display: block; margin-top: 2px; font-size: 12px; color: rgba(0, 0, 0, 0.55); text-decoration: line-through;} .fs-stock{font-size: 12px; color: var(--fs-muted); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03);} .fs-actions{margin-top: 12px; display: -webkit-box; display: -webkit-flex; display: flex; gap: 10px;} .fs-btn{flex: 1; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 13px; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.12); transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;} .fs-btn-primary{background: var(--fs-primary); color: #fff; box-shadow: 0 12px 26px rgba(249, 109, 0, 0.18);} .fs-btn-primary:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(249, 109, 0, 0.22); color: var(--fs-primary); background: #ffffff; border: 1px solid var(--fs-primary);} .fs-btn-ico{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.25);} .swiper-container-flashsale{overflow: hidden;} .fs-section .product{position: relative; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 18px; overflow: hidden; background: #fff; transition: transform 180ms ease, border-color 180ms ease;} .fs-section .product:hover{border-color: rgba(249, 109, 0, 0.28);} .fs-section .product .img-prod{position: relative; display: block; width: 100%; height: 210px; overflow: hidden; background: rgba(0, 0, 0, 0.03);} .fs-section .product .img-prod img{width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 220ms ease;} .fs-section .product:hover .img-prod img{transform: scale(1.06);} .fs-section .product .fs-tag{position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 50px; font-weight: 600; font-size: 12px; color: #fff; background: var(--fs-danger); z-index: 2;} .fs-section .product .fs-image-meta{position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 7px; border-radius: 12px; backdrop-filter: blur(8px); background: #f8931f51; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 3px; font-size: 11px;} .fs-expired{margin-top: 8px; font-size: 11px; color: var(--fs-danger-strong);} .fs-section .product .fs-image-meta .fs-progress{height: 4px; border-radius: 999px; background: rgba(230, 230, 230, 0.08); overflow: hidden;} .fs-section .product .fs-image-meta .fs-progress-bar{display: block; height: 100%; border-radius: 999px; background: var(--fs-primary);} .fs-section .product .fs-image-meta .fs-progress-meta{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.2; color: rgba(0, 0, 0, 0.75);} .fs-section .product .fs-image-meta .fs-progress-meta b{color: var(--fs-text);} .fs-section .product .fs-tag{z-index: 3;} .fs-countdown-wrap{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; flex: 0 1 auto;} .fs-countdown-text{font-size: 12px; color: var(--fs-danger-strong); font-weight: 500; letter-spacing: .5px;} .fs-countdown-note{font-size: 11px; color: #999;} .fs-view-all{font-size: 13px; font-weight: 600; color: var(--fs-primary-deep); text-decoration: none; margin-top: 4px; display: inline-block; transition: all .25s ease;} .fs-view-all:hover{color: var(--fs-primary-deeper); transform: translateX(3px);} .flashsale-product-list-head, .product-slider-head{display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;} .flashsale-product-list-kicker, .product-slider-kicker{display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(249, 109, 0, 0.1); border: 1px solid rgba(249, 109, 0, 0.18); color: var(--fs-text); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 10px;} .flashsale-product-list-title, .product-slider-title{font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0 0 8px; color: var(--fs-text);} .flashsale-product-list-subtitle, .product-slider-subtitle{margin: 0; font-size: 14px; color: rgba(0, 0, 0, 0.65); max-width: 680px;} .flashsale-product-list-section, .product-slider-section{padding: 22px;} .flashsale-list-page-card{padding: 22px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);} .flashsale-product-list-upcoming{background: #fcfcfc;} .flashsale-product-list-section-head, .product-slider-section-head{display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px;} .flashsale-product-list-section-title, .product-slider-section-title{margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--fs-text);} .flashsale-product-list-section-note, .product-slider-section-note{font-size: 13px; color: rgba(0, 0, 0, 0.58);} .flashsale-product-list-timer{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: flex-end; gap: 6px;} .flashsale-product-list-timer-label{font-size: 12px; color: var(--fs-danger-strong);} .flashsale-product-list-timer-boxes{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(249, 109, 0, 0.08); border: 1px solid rgba(249, 109, 0, 0.16);} .flashsale-product-list-timer-upcoming .flashsale-product-list-timer-boxes{background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08);} .flashsale-product-list-pill{min-width: 34px; height: 30px; padding: 0 8px; border-radius: 10px; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; background: #111; color: #fff; font-size: 13px; font-weight: 800;} .flashsale-product-list-sep{font-weight: 800; color: var(--fs-text);} .flashsale-upcoming-card .fs-tag{background: #444;} .flashsale-upcoming-card .fs-body{background: #fff;} @media (max-width: 991.98px){.flashsale-product-list-head, .flashsale-product-list-section-head, .product-slider-head, .product-slider-section-head{-webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: flex-start;}.flashsale-product-list-timer{width: 100%; align-items: flex-start;}} @media (max-width: 575.98px){.flashsale-product-list-title, .product-slider-title{font-size: 24px;}.flashsale-product-list-section, .product-slider-section{padding: 16px; border-radius: 16px;}.flashsale-list-page-card{padding: 16px; border-radius: 16px;}.flashsale-product-list-timer-boxes{gap: 6px; padding: 7px 9px;}.flashsale-product-list-pill{min-width: 30px; height: 28px; font-size: 12px;}} .fs-flex-end{display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-end;} .swiper-product-detail{position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.06); background: #ffffff; padding: 0; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);} .swiper-product-detail::before{content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;} .swiper-product-detail .swiper-wrapper, .swiper-product-detail .swiper-slide{position: relative; z-index: 1;} .swiper-product-detail .swiper-slide{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; background: #f9fafb;} .swiper-product-detail .swiper-slide img{width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease;} .swiper-product-detail .swiper-slide:hover img{transform: scale(1.03);} .detail-prod{background: transparent !important;} .caption-container{margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); color: #6b7280; font-size: 13px; text-align: center;} .swiper-product-thumb{margin-top: 14px; padding: 2px 2px 4px; overflow: hidden; width: 100%;} .swiper-product-thumb .swiper-slide{height: auto; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); opacity: .55; transition: all .25s ease; flex-shrink: 0;} .swiper-product-thumb .swiper-slide:hover{opacity: 1; transform: translateY(-1px);} .swiper-product-thumb .swiper-slide-thumb-active{opacity: 1; border-color: #ffa45c;} .swiper-product-thumb .swiper-slide img{width: 100%; aspect-ratio: 1/1; object-fit: cover;} .swiper-product-thumb .swiper-wrapper{align-items: center;} .product-actions{position: absolute; top: 14px; right: 14px; display: -webkit-box; display: -webkit-flex; display: flex; gap: 10px; z-index: 5;} .action-btn{width: 44px; height: 44px; border-radius: 50%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); cursor: pointer; transition: all .25s ease;} .action-btn i{font-size: 16px; color: #c2c2c2; transition: all .25s ease;} .action-btn:hover{transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.16);} .fav-btn:hover i{color: #ef4444;} .fav-btn.selected i{color: #ef4444;} .share-wrapper{position: relative;} .share-wrapper input{display: none;} .media-icons{position: absolute; top: 52px; right: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14); opacity: 0; transform: translateY(10px); pointer-events: none; transition: all .25s ease;} .share-wrapper input:checked ~ .media-icons{opacity: 1; transform: translateY(0); pointer-events: auto;} .media-icons a, .media-icons iframe{border-radius: 8px;} @media (max-width: 768px){.action-btn{width: 38px; height: 38px;}.action-btn i{font-size: 14px;}} .button-learning{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; justify-content: center;} .button-learning .btn{min-height: 46px; padding: 0 18px; border-radius: 999px !important; font-weight: 700; border: none; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);} .button-learning .btn + .btn{margin-left: 0 !important;} @media (max-width: 991.98px){.swiper-product-detail .swiper-slide img{height: 100%;}} @media (max-width: 767.98px){.swiper-product-detail{border-radius: 16px;}.swiper-product-detail .swiper-slide img{height: 100%;}#addtocart a, .share{width: 40px; height: 40px;}.button-learning .btn{width: 100%;}} #shareModal .modal-dialog{max-width: 420px;} #shareModal .modal-content{border: none; border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);} #shareModal .modal-header{border: none !important; padding: 18px 20px 8px !important;} #shareModal .modal-title{font-size: 18px; font-weight: 700; color: #111827;} #shareModal .close{opacity: 1; text-shadow: none; color: #6b7280;} .share-sheet-body{padding: 12px 20px 20px;} .share-sheet-subtitle{margin: 0 0 14px; font-size: 13px; color: #6b7280;} .share-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;} .share-card{border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 18px; background: #fff; min-height: 110px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-decoration: none !important; color: #111827 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;} .share-card:hover{transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.12);} .share-icon-wrap{width: 52px; height: 52px; border-radius: 999px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background: #f9fafb;} .share-label{font-size: 13px; font-weight: 600;} .share-x-badge{width: 52px; height: 52px; border-radius: 999px; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center; background: #111827; color: #fff; font-size: 24px; font-weight: 800; font-family: Arial,Helvetica,sans-serif;} .share-wa-icon{font-size: 26px; color: #16a34a;} .share-link-icon{font-size: 22px; color: #2563eb;} .copy-link.share-card{cursor: pointer;} @media (max-width: 767.98px){#shareModal.modal.fade .modal-dialog{margin: 0; min-height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-end;}#shareModal .modal-content{width: 100%; border-radius: 22px 22px 0 0; animation: shareSheetUp .28s ease;}.share-sheet-body{padding-bottom: 24px;}} @keyframes shareSheetUp{from{transform: translateY(28px); opacity: .65;}to{transform: translateY(0); opacity: 1;}} .product-detail-panel{padding-left: 10px;} .product-detail-badge{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #fff4ec; color: #f97316; font-size: 12px; font-weight: 700; letter-spacing: .2px; margin-bottom: 14px;} .product-detail-panel h5{margin-bottom: 10px; font-size: 34px; line-height: 1.2; font-weight: 800; color: #111827;} .product-detail-panel .text-left a span, .product-detail-panel .text-left a{color: #6b7280 !important; font-size: 14px; font-weight: 600;} .product-detail-panel .rating{align-items: center; margin: 12px 0 16px;} .product-detail-panel .rating .text-left{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 8px; -webkit-flex-wrap: wrap; flex-wrap: wrap;} .product-detail-panel .rating a{margin-right: 0 !important; font-size: 14px;} .product-detail-panel .rating i{color: #f59e0b;} .product-price-card{margin: 0 0 18px; padding: 18px 20px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; background: linear-gradient(180deg, #fff 0%, #fff8f3 100%); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);} .product-price-main{font-size: 34px; line-height: 1.1; font-weight: 800; color: #111827;} .product-price-meta{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; gap: 10px; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px;} .product-exp{margin-top: 14px;} .product-exp-badge{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 12px; border-radius: 999px; background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%); border: 1px solid rgba(249, 115, 22, 0.16); color: #c2410c; font-size: 12px; font-weight: 700; letter-spacing: .2px; box-shadow: 0 8px 18px rgba(249, 115, 22, 0.1);} .product-exp-badge i{font-size: 13px; color: #ea580c;} .product-price-old{color: #9ca3af; text-decoration: line-through; font-size: 14px; font-weight: 600;} .product-price-save{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #fee2e2; color: #dc2626; border: solid 1px red; font-size: 12px; font-weight: 700;} .product-description-card{padding: 18px 20px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04); margin-bottom: 18px;} .product-description-card p{margin-bottom: 12px; color: #4b5563; line-height: 1.8; font-size: 14px;} .product-description-card p:last-child{margin-bottom: 0;} .product-detail-card{margin: 0; padding: 18px 20px 20px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);} .product-detail-card > .col-md-12, .product-detail-card > .col-md-6, .product-detail-card > .container, .product-detail-card > .w-100{padding-left: 0; padding-right: 0;} .product-detail-card > .col-md-12 + .col-md-12, .product-detail-card > .col-md-12 + .col-md-6, .product-detail-card > .col-md-6 + .w-100, .product-detail-card > .w-100 + .col-md-12, .product-detail-card > .col-md-12 + .container, .product-detail-card > .container + .container, .product-detail-card > .container + .col-md-12{margin-top: 14px;} .head-detail{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; margin-bottom: 12px; color: #111827; font-size: 14px; font-weight: 700;} .product-detail-panel dl{margin-bottom: 0;} .free-product-tags{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 10px;} .free-product-tag{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); background: #e1e1e1; color: #374151; font-size: 13px; font-weight: 600; line-height: 1;} .product-detail-panel dt{margin-bottom: 8px; color: #4b5563; font-size: 14px; font-weight: 500;} .product-detail-panel .l-radio{border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px; padding: 5px 14px; margin-right: 8px; margin-bottom: 10px; transition: all .2s ease; background: #fff;} .product-detail-panel .l-radio:hover{border-color: #f97316; background: #fff7ed;} .product-detail-panel .l-radio input{display: none;} .product-detail-panel .l-radio span{font-size: 14px; font-weight: 600; color: #374151;} .product-detail-panel .product-details .btn{border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px !important; background: #fff; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center; justify-content: center;} .product-detail-panel .input-number{height: 42px; border-radius: 999px !important; border: 1px solid rgba(0, 0, 0, 0.1); text-align: center; font-weight: 700;} .product-detail-panel .container > .btn.btn-primary, .product-detail-panel .container > button.btn.btn-primary{min-height: 44px; border-radius: 14px !important; border: none; background: #111827; box-shadow: none;} .product-detail-panel .collapse{margin-top: 14px; padding: 16px; border-radius: 16px; background: #f9fafb; border: 1px solid rgba(0, 0, 0, 0.06);} .product-detail-panel .distri{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; font-weight: 700; align-items: center; gap: 12px; margin-bottom: 8px;} .product-detail-panel .distri span:first-child{color: #4b5563; font-size: 14px;} .product-detail-panel .distri span:last-child{color: #111827; font-size: 14px; font-weight: 700;} .text-rekomendasi{color: #4b5563; font-size: 14px; line-height: 1.6;} .product-cta-wrap{margin-top: 18px;} .btn-rekomendasi-distri{height: 40px;} .product-cta-btn{width: 100%; min-height: 54px; border-radius: 16px !important; background: #111827 !important; border: none !important; font-size: 16px; font-weight: 700; box-shadow: 0 14px 28px rgba(17, 24, 39, 0.16);} .product-cta-btn:hover{background: var(--orange-toffin) !important;} @media (max-width: 991.98px){.product-detail-panel{padding-left: 15px; margin-top: 26px;}.product-detail-panel h5{font-size: 28px;}.product-price-main{font-size: 30px;}} @media (max-width: 767.98px){.product-detail-panel{padding-left: 15px; padding-right: 15px;}.product-detail-panel h5{font-size: 24px;}.product-price-card, .product-description-card, .product-detail-card{padding: 16px; border-radius: 18px;}.product-price-main{font-size: 26px;}.product-detail-panel .product-details{max-width: 100%;}.product-detail-panel .container{padding-left: 0; padding-right: 0;}} 

/* /tdg_website_sale/static/src/css/coupon.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 .coupon .kanan{border-left: 1px dashed #ddd; width: 40% !important; position: relative;} .coupon .kanan .info::after, .coupon .kanan .info::before{content: ''; position: absolute; width: 20px; height: 20px; background: #f8f9fa; border-radius: 100%;} .coupon .kanan .info::before{top: -10px; left: -10px;} .coupon .kanan .info::after{bottom: -10px; left: -10px;} .coupon .time{font-size: 1.6rem;} .text-muted{font-size: 13px;} .card-coupon{background-color: white; border: none; font-size: 13px;} @media (max-width: 768px){.img-voucher-sm{width: 80px !important;}}