@font-face { font-family: IRANYekanX; font-style: normal; font-weight: 100; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-Thin.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-Thin.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 200; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-UltraLight.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-UltraLight.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 300; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-Light.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-Light.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 500; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-Medium.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-Medium.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 600; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-DemiBold.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-DemiBold.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 800; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-ExtraBold.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-ExtraBold.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 900; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-Black.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-Black.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 950; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-ExtraBlack.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-ExtraBlack.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 1000; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-Heavy.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-Heavy.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 700; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-Bold.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-Bold.woff2) format("woff2") } @font-face { font-family: IRANYekanX; font-style: normal; font-weight: 400; src: url(../fonts/woff/IRANYEKANX/IRANYekanX-Regular.woff) format("woff"), url(/fonts/woff2/IRANYEKANX/IRANYekanX-Regular.woff2) format("woff2") } html { overflow-x: hidden } ::-webkit-scrollbar-track { background: var(--primary); border-radius: 6px; } body { background-color: var(--background) !important; font-family: 'IRANYekanX' !important; } .br-0 { border-radius: 0 !important } .mt-0 { margin-top: 0 !important } .pt-0 { padding-top: 0 !important } button, input, optgroup, select, textarea, a, span, h1, h2, h3, h4, h5, h6, p { font-family: IRANYekanX !important; } .mt-15 { margin-top: 15px } .main-menu { padding-top: 5px; border-bottom: none; box-shadow: 0 15px 20px -20px rgba(0, 0, 0, .1); } .main-menu ul.list-menu { padding: 0 !important; } .main-menu, .main-menu ul.list-menu li.item-list-menu:hover a.list-category::before { background: var(--menu-bg); color: var(--menu-color) } .main-menu ul.list-menu li.item-list-menu:hover a.list-category, .main-menu ul.list-menu li.item-list-menu a.list-category { color: var(--menu-color) !important; align-items: center; } .more-menu-main { position: relative; } .more-megamenu { position: absolute; left: 0; top: 100%; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); width: 400px; min-height: 300px; padding: 0; z-index: 1000; display: none; overflow: hidden; } .more-menu-main:hover .more-megamenu { display: block; } .more-level-1-container { padding: 20px; display: grid; grid-template-columns: 1fr; gap: 5px; } .more-level-1-item { position: relative; } .more-level-1-link { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; color: #555; text-decoration: none; border-radius: 6px; transition: all 0.3s ease; font-size: 14px; font-weight: 500; } .more-level-1-link:hover { background: #f8f9fa; color: #007bff; } .more-level-1-item.has-children .more-level-1-link:hover { cursor: pointer; } .more-level-1-link .fa { font-size: 12px; color: #999; } .more-level-2 { padding: 0; height: 100%; } .more-level-2-header { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f0f0f0; background: #f8f9fa; } .more-back-btn { display: flex; align-items: center; gap: 5px; background: none; border: none; color: #007bff; cursor: pointer; font-size: 13px; padding: 5px 10px; border-radius: 4px; transition: all 0.3s ease; } .more-back-btn:hover { background: #e9ecef; } .more-level-2-title { margin-right: 10px; font-weight: bold; color: #333; font-size: 14px; } .more-level-2-container { padding: 15px 20px; display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 350px; overflow-y: auto; } .more-level-2-item { position: relative; } .more-level-2-link { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; font-size: 13px; } .more-level-2-link:hover { background: #f8f9fa; color: #007bff; } .more-level-3 { position: absolute; right: 100%; top: 0; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: 200px; padding: 10px; display: none; z-index: 1001; } .more-level-3-container { display: grid; grid-template-columns: 1fr; gap: 5px; } .more-level-3-item { margin-bottom: 2px; } .more-level-3-link { display: block; padding: 6px 10px; color: #666; text-decoration: none; border-radius: 3px; transition: all 0.3s ease; font-size: 12px; } .more-level-3-link:hover { background: #f8f9fa; color: #007bff; } @media (max-width: 768px) { .margin-70-50{ margin: 0px ; } .flex-direction-column-sm{ flex-direction: column; } .more-megamenu { position: static; width: 100%; box-shadow: none; border: none; } .more-level-3 { position: static; width: 100%; box-shadow: none; border: none; margin-top: 5px; } } .more-menu-main { position: relative; } .more-megamenu { position: absolute; left: 0; top: 100%; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); width: 100%; min-width: 800px; padding: 20px; z-index: 1000; display: none; } .more-menu-main:hover .more-megamenu { display: block; } .more-megamenu-container { width: 100%; } .more-megamenu-row { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; } .more-megamenu-col { flex: 1; min-width: 200px; max-width: 250px; } .more-level-three-menu { margin-bottom: 15px; } .more-mega-menu-sublist-title { display: block; font-weight: bold; color: #333; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid #f0f0f0; text-decoration: none; font-size: 14px; transition: all 0.3s ease; } .more-third-level-menu { list-style: none; padding: 0; margin: 0; } .more-megamenu-list-item { margin-bottom: 8px; position: relative; } .more-megamenu-category { display: block; padding: 6px 10px; color: var(--primary); text-decoration: none; border-radius: 4px; transition: all 0.3s ease; font-size: 14px; position: relative; } .more-fourth-level-menu { list-style: none; padding: 5px 0 5px 15px; margin: 5px 0 0 0; border-right: 2px solid #f0f0f0; } .more-fourth-level-menu .more-megamenu-list-item { margin-bottom: 4px; } .more-fourth-level-menu .more-megamenu-category { font-size: 13px; padding: 4px 8px; color: #666; } .search-panel-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; } .search-panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 450px; height: 100%; background: white; z-index: 9999; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .search-panel.active { transform: translateX(0); } .search-panel-header { display: flex; align-items: center; padding: 20px; border-bottom: 1px solid #eee; background: #fff; flex-shrink: 0; } .search-panel-header h3 { margin: 0; margin-right: 15px; font-size: 18px; color: #333; font-weight: 600; } .close-btn { background: none; border: none; font-size: 18px; color: #666; cursor: pointer; padding: 5px; margin-right: auto; transition: color 0.3s ease; } .close-btn:hover { color: #333; } .search-panel-body { padding: 20px; flex: 1; display: flex; flex-direction: column; overflow: hidden; } .search-input-wrapper { position: relative; margin-bottom: 20px; flex-shrink: 0; } .search-input-wrapper input { width: 100%; padding: 15px 45px 15px 15px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px; transition: all 0.3s ease; background: #f8f9fa; } .search-input-wrapper input:focus { border-color: #007bff; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } .searchicon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #666; font-size: 18px; } .search-results { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .search-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-shrink: 0; } .search-results-header h5 { margin: 0; font-size: 16px; color: #333; font-weight: 600; } .search-count { font-size: 12px; color: #666; background: #f8f9fa; padding: 4px 8px; border-radius: 12px; } .search-results-list { flex: 1; overflow-y: auto; margin-bottom: 15px; } .search-input-container { position: relative; display: block; width: 100%; } .search-inline-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 10000; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); display: none !important; border-top: 2px solid var(--primary); margin-top: 4px; } .search-inline-panel.open, [data-header-search-wrapper][data-search-open="1"] .search-inline-panel, [data-header-search-wrapper]:focus-within .search-inline-panel { display: block !important; } .search-inline-panel .search-panel-body { padding: 12px; height: auto; max-height: min(420px, 62vh); overflow-y: auto; } .search-ready { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: start; color: var(--text, #374151); } .search-ready__icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); } .search-ready strong { display: block; font-size: 12px; line-height: 1.5; } .search-ready small { display: block; margin-top: 1px; font-size: 10.5px; color: color-mix(in srgb, var(--text, #374151) 58%, transparent); } .search-min-chars p { display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: 13px; } .search-min-chars small { display: block; margin-top: 6px; font-size: 12px; color: #4d4d4d; } .search-result-item { display: flex; align-items: center; padding: 15px; border: 1px solid #f0f0f0; border-radius: 12px; margin-bottom: 10px; text-decoration: none; color: #333; transition: all 0.3s ease; background: #fff; } .search-result-item:hover { border-color: var(--primary-dark); box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15); transform: translateY(-1px); } .search-result-image { width: 60px; height: 60px; margin-left: 15px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #f8f9fa; } .search-result-image img { width: 100%; height: 100%; object-fit: cover; } .search-result-content { flex: 1; min-width: 0; } .search-result-title { margin: 0 0 5px 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #333; } .search-result-description { margin: 0; font-size: 12px; color: #666; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .search-result-arrow { color: #999; font-size: 14px; margin-right: 10px; flex-shrink: 0; } .search-all-results { flex-shrink: 0; padding-top: 15px; border-top: 1px solid #eee; } .btn-view-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--primary); color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; width: 100%; } .btn-view-all:hover { background: var(--primary-dark); color: #222; } .search-no-results, .search-min-chars { text-align: center; padding: 40px 20px; color: #666; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .search-no-results i { font-size: 48px; margin-bottom: 15px; color: #ccc; } .search-suggestions { flex: 1; display: flex; flex-direction: column; } .search-suggestions h5 { margin: 0 0 15px 0; font-size: 16px; color: #333; font-weight: 600; } .suggestion-tags { display: flex; flex-wrap: wrap; gap: 10px; } .suggestion-tag { padding: 10px 16px; background: #f8f9fa; color: #333; text-decoration: none; border-radius: 20px; font-size: 13px; transition: all 0.3s ease; cursor: pointer; border: 1px solid #e0e0e0; } .suggestion-tag:hover { background: #007bff; color: white; border-color: #007bff; } .search-results-list::-webkit-scrollbar { width: 4px; } .search-results-list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .search-results-list::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; } .search-results-list::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } @media (max-width: 576px) { .search-panel { max-width: 100%; } .search-result-item { padding: 12px; } .search-result-image { width: 50px; height: 50px; margin-left: 12px; } } .more-category-img { flex: 0 0 200px; min-width: 200px; } .more-category-img img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; transition: transform 0.3s ease; } .more-category-img:hover img { transform: scale(1.05); } .more-megamenu .level-three-container { height: auto; overflow-y: auto; } .more-megamenu .scrollbar { position: relative; } .product { border: none; border-radius: 0; } .product-vertical { padding-bottom: 30px } .tabs .tabs-product { border-radius: 0; } .section-slider-product .widget-product .product-carousel .item .post-title a { font-weight: 600; } .tab-content .compare-quick-list li.params-list-item { margin: 0 !important; float: none; width: 100%; display: block; padding: 0 !important } .active-breadcrumb { color: var(--primary) !important; } .tab-content .compare-quick-list .compare-list-desc .block { padding: 5px } .product .product-attributes .product-seller-info .product-seller-row a { float: none; } .font-weight-900 { font-weight: 900 !important } .product .product-attributes .product-config .product-config-wrapper .product-params ul li { margin: 10px 0; width: 100%; font-size: 12px; position: relative; background: #ddd; padding: 10px; border-radius: 5px; margin-top: 0; } .product .product-attributes .product-config .product-config-wrapper .product-params ul li:before { display: none } .product-vertical .card-vertical-product-content .product-actions-secondary .product-introduction-cart { border: 1px solid var(--primary-light) !important; background: var(--primary-light); } .owl-nav { position: relative; } .section-slider-product .widget-product .owl-carousel .owl-nav .owl-prev, .brand-slider .owl-carousel .owl-nav .owl-prev, .widget-product .owl-carousel .owl-nav .owl-next, .brand-slider .owl-carousel .owl-nav .owl-next { width: 60px; height: 60px; background: var(--primary-light); } .section-slider-product .widget-product .owl-carousel .owl-nav .owl-next { left: -6px !important; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; top: -160px; } .section-slider-product .widget-product .owl-carousel .owl-nav .owl-prev { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 40px; border-bottom-left-radius: 40px; right: -6px !important; left: none !important; top: -160px; } .adplacement-container-column .adplacement-item .adplacement-sponsored-box img { object-fit: cover; } .section-slider-product .product-carousel .owl-item img { width: 100% !important; margin-bottom: 25px; max-width: 150px; aspect-ratio: 1 / 1; } .fa-angle-right:before, .fa-angle-left:before { color: #c8a700; font-size: 25px } .logo { margin-top: -9px; } .logo img { } .adplacement-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 5px } .section-slider-product .widget-product .product-carousel .item .post-title, .brand-slider .product-carousel .item .post-title { text-align: right } .price-div { text-align: right !important; background: linear-gradient(90deg, #f3f3f3, hsla(0, 0%, 100%, 0)); border-radius: 8px; line-height: 1.7; flex: 2; padding: 7px } .price-div .font-size-12 { font-size: 10px !important; color: #333 !important; display: inherit !important; line-height: 0.3 !important; } .item-add-basket { width: 40px; height: 40px; background: var(--primary-light); border-radius: 8px; margin-right: 10px; color: #333 !important; margin-left: 10px } .promo-single { padding: 2px 1rem; } .fs-16 { font-size: 16px !important } .price-div .font-size-14 { font-size: 14px !important } .posts-module .section-slider-product .product-carousel .owl-item img { height: 70px; max-width: 100px; margin-top: 0 !important } .section-slider-product { padding: 0 !important } .section-slider-product { border-radius: 8px } .section-slider-product .widget .card-header:before { content: ""; width: 86px; height: 3px; background: var(--primary-dark); position: absolute; right: 10px; top: 37px; border-radius: 5px; } .section-slider-product { padding: 15px 2.5rem 0; } .section-slider-product .product-carousel .owl-item img { border-radius: 10px; margin-bottom: 17px } .blog-module-item a { color: #333 !important } .section-slider-product .widget .card-header:after { content: ''; width: 6px; height: 5px; border-radius: 50%; background-color: var(--main-color-two); position: absolute; top: 36px; right: 0; background: var(--primary-dark); } li.nav-item-account a span.count { background-color: red } .mobile-nav-tab .count { width: 20px; height: 20px; border-radius: 50%; position: absolute; bottom: 28px; right: -4px; background-color: red; color: #fff; font-size: 14px !important; line-height: 22px; display: inline-block; text-align: center; color: #fff !important } #carousel-brand .owl-item img { height: 70px; max-width: 100px; margin-top: 0 !important } .section-slider-product { padding: 10px 2.1rem 0; } .mobile-nav-tab.active { color: var(--primary-dark) !important; } .mobile-nav-tab.active span { color: var(--primary-dark) !important; } .nav-btn { line-height: inherit !important; } .white-bg { background: #fff; } .adplacement-top-header a.adplacement-item { border-radius: 8px; } .search-header .search-input { height: 40px; border-radius: 8PX; padding-right: 40px; min-width: 450px } .header-left { padding-top: 0; } .logo { margin-top: 15px } .search-header .search-input { background: #eff1f5; border: none; border-radius: 6px; height: 40px; width: 100%; font-weight: 300; font-size: 11px; display: inline-block; padding: 0 39px 0 15px; } .adplacement-container-column .adplacement-item { float: none !important; } .search-header .button-search { height: 40px; } .search-header .button-search img { width: 25px; height: 25px; margin: 7px 19PX; border-radius: 8PX; } li.nav-item-account button { display: block; position: relative; text-align: center; color: #555; border-radius: 5px; box-shadow: 0 0 0 0 rgba(0, 0, 0, .5); width: auto; padding: 0 12px; background-color: #eff1f5; line-height: 38px; box-sizing: border-box; font-size: 12px; font-weight: 600; cursor: pointer !important; border: none; } .shopping-card { display: block; position: relative; text-align: center; border-radius: 5px; box-shadow: 0 0 0 0 rgba(0, 0, 0, .5); width: auto; padding: 0 12px; background-color: var(--primary); line-height: 38px; box-sizing: border-box; cursor: pointer; border: none; margin-top: 12px; margin-right: 9px; width: 38px !important; height: 38px; border-radius: 8px; color: #333 !important; } .shopping-card i { color: #333 !important; } li.nav-item-account a span { vertical-align: middle; font-size: 14px; font-feature-settings: "ss02"; } .header-call-number { font-size: 14px; font-weight: 500; } .header-call-info { line-height: 15.5px; } .header-call-text { color: #888; font-size: 11px !important; font-weight: 700; } .header-call-number { font-size: 14px !important; font-weight: 600; direction: ltr; color: var(--menu-color) !important; margin-top: 4px; } .menu-bar-number i { line-height: 35px; font-size: 20px !important; margin-right: 14px; margin-top: 6px; transform: rotate(1deg); } .megamenu-banner-column { flex: 1; min-height: 300px; } .main-menu ul.list-menu li.item-list-menu .sub-menu { top: 32px; height: auto; background: #fff; } .header-call-number span { color: var(--primary); float: left; padding-right: 5px; } .header-right .search-header { max-width: 500px; } .header-right .search-header .button-search { background-color: transparent; } .main-menu ul.list-menu li.item-list-menu a.list-category>i { font-size: 13px } .mid-menu { max-height: 80px } .nav-item-cart { margin-top: -9px !important; } .footer-phone-list i { display: flex; width: 20px; height: 20px; color: #000; background-color: var(--primary-light); border-radius: 50%; justify-content: center; align-items: center; margin-left: 10px; } .footer-phone-list li { margin-bottom: 10px; } .footer-links-ul i { display: flex; width: 20px; height: 20px; color: #000; background-color: var(--primary-light); border-radius: 50%; justify-content: center; align-items: center; margin-left: 10px; } .footer-links-ul li { margin-bottom: 10px; } .footer-phone-list span { line-height: 25px; font-size: 12px; } .footer-phone-list { margin-top: 5px; } .footer-links-ul { margin-top: 5px; } .social_icons { margin-bottom: 20px; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; } .social_icons li { display: inline-block; padding: 0; margin: 0; } .sc_facebook, .sc_gplus, .sc_google, .sc_linkedin, .sc_twitter, .sc_telegram, .sc_youtube, .sc_yahoo, .sc_instagram { display: flex; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; padding: 0 !important; border-radius: 50% !important; color: #fff !important; text-decoration: none; transition: all 0.3s ease; box-sizing: border-box; } .sc_facebook i, .sc_gplus i, .sc_google i, .sc_linkedin i, .sc_twitter i, .sc_telegram i, .sc_youtube i, .sc_yahoo i, .sc_instagram i { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .sc_facebook { background-color: #3b5998 !important; } .sc_gplus, .sc_google { background-color: #dd4b39 !important; } .sc_linkedin { background-color: #0e76a8 !important; } .sc_twitter { background-color: #00acee !important; } .sc_telegram { background-color: #0088cc !important; } .sc_youtube { background-color: #c4302b !important; } .sc_yahoo { background-color: #720e9e !important; } .sc_instagram { background-color: #E4405F !important; } .sc_facebook:hover, .sc_gplus:hover, .sc_google:hover, .sc_linkedin:hover, .sc_twitter:hover, .sc_telegram:hover, .sc_youtube:hover, .sc_yahoo:hover, .sc_instagram:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0.9; } .ss02 { font-feature-settings: "ss02"; } .fs-12 { font-size: 12px; } .text-black { color: #222; } .adplacement-top-header a.adplacement-item { height: 45px !important; } .main-menu ul.list-menu li.item-list-menu a.list-category { font-size: 13px; } .category-container { max-height: 120px; scrollbar-width: thin; scrollbar-color: var(--primary) #e9ecef; } .header-call-text { color: #888 !important; font-size: 11px; } @media (max-width: 767.98px) { .product-info { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; } .promotion-category { width: 100px; } .product .dk-btn { font-size: 14px; padding: 10px 60px; width: auto; max-width: 100%; } .promotion-category img { width: 70px; height: 70px; } .mt-sm-10 { margin-top: 10px } .breadcrumb-container { overflow-x: scroll } .breadcrumb-container ul.js-breadcrumb { width: 1000px; overflow-x: scroll } .header-left { position: absolute; top: -70px; left: -1px; width: 100% !important; } .logo img { width: 100px !important; object-fit: contain; } .adplacement-top-header a.adplacement-item { height: 35px !important; } } .mobile-navbar { display: none; position: fixed; background-color: #fff; left: 0; right: 0; bottom: 0; height: 70px; width: 100%; box-shadow: 0 -15px 20px -20px rgba(0, 0, 0, .1); z-index: 10 } .block-md { display: none; } @media (max-width: 1230.98px) { .main-menu ul.list-menu { padding: 0 !important; } .logo { margin-top: 0; } .mobile-navbar { display: flex } .header-left { display: none; } .nav-item-cart { margin-top: -9px !important; } .hide-md { display: none; } .block-md { display: block; } } .product .product-attributes .product-config { margin-top: -10px } .product .gallery-item { margin-bottom: 0 } .product .product-attributes .product-config .product-config-wrapper .product-params ul li { padding: 1.5rem .75rem !important; margin-bottom: 0; } .border-bottom { border-bottom: 1px solid #eee; } .product .product-headline h1 { font-size: 19px !important; font-weight: 900 !important; } .gap-10 { gap: 10px } .tabs .tabs-product .tab-wrapper ul.box-tabs li.box-tabs-tab a.box-tab-item { font-size: 14px; font-weight: 500; padding: 10px 17px; background: #eaeaea; border-radius: 8px; margin-left: 20px; cursor: pointer; } .dk-btn-info, .dk-btn-danger { background: linear-gradient(0deg, var(--primary), var(--primary-dark)); } .checkout-actions a.checkout-actions-back { color: #7e898a; } .shipment-page-container .address-section .checkout-contact, .checkout-aside .checkout-bill, .payment .payment-payment-types, .shipment-page-container form#shipping-data-form .js-normal-delivery .checkout-pack { border: none; } .payment-serial-input-container input { height: 40px; margin-left: 10px; } .dk-btn { box-shadow: 0 2px 6px 0 var(--primary); font-size: 13px; } .tabs .tabs-product .tab-wrapper ul.box-tabs li.box-tabs-tab.tabs-active a { border-top: none !important; color: #fff !important; background-color: var(--primary); margin-top: 5px } .tabs .tabs-product .tab-wrapper ul.box-tabs li.box-tabs-tab a.box-tab-item:hover { border-top: none !important; color: #595959 !important; background-color: #b8b8b8; margin-top: 5px } .product-params ul li span { font-size: 13px; font-weight: 500; height: 23px; color: #94a3b8; } .product-params ul li span strong { color: #222; } .attr-list { list-style: circle; margin-right: 25px; margin-top: 15px; } .product .product-gallery .product-thumbnails { border-top: none !important; width: 100%; float: right; overflow-x: scroll; height: 150px; display: inline-flex; scrollbar-width: thin; scrollbar-color: var(--primary) #e9ecef; margin-top: 10px; } @media (max-width: 979px) { .product .product-headline h1 { font-size: 16px } .product .product-attributes .product-config .product-config-wrapper .product-params { margin-top: 20px } .logo { margin-top: -10px } .menu-bar-number i { margin-right: 5px; margin-left: 0 !important; } .header-call-info { margin-left: 10px } } .header-call-text { color: #888; font-size: 11px; } .mobile-nav-tab { width: 20%; color: grey; cursor: pointer; gap: 10px } .mobile-nav-tab .detailed-icon { margin: 0 } .mobile-nav-tab .detailed-icon i { font-size: 17px } .mobile-nav-tab .detailed-icon .cart-count { font-size: 12px; font-weight: 600; padding: 3px 8px; background-color: #e1e1e1; border-radius: 6px; margin-right: 5px } .mobile-nav-tab { width: 20%; color: grey !important; cursor: pointer; } .nav-tab-text { font-size: 10px; text-align: center; } .nav-btn { position: relative !important; } .nav-tab-text { color: gray; } .main-menu ul.list-menu li.item-list-menu .sub-menu .megamenu-level-3 { top: 0 !important; position: relative; } .main-menu ul.list-menu li.item-list-menu a.list-category { font-size: 12px; display: flex; } .main-menu ul.list-menu li.item-list-menu a.list-category { padding: 2px 10px } .main-menu ul.list-menu li.item-list-menu .sub-menu .megamenu-level-3 .mega-menu-sublist-title::before { display: none !important } .main-menu ul.list-menu li.item-list-menu .sub-menu .megamenu-level-3 .level-three-menu .megamenu-list-item a.megamenu-category { margin-right: 20px !important; font-size: 13px; font-weight: 500; padding-right: 10px; } li.nav-item-account a span { font-size: 20px } .nav-item-account i { margin-left: 10px; vertical-align: middle; font-size: 16px; } .main-menu ul.list-menu li.item-list-menu .sub-menu { border-top: 1px solid var(--primary) !important; border-radius: 0 !important; right: 0 } .btn-warning { color: #fff !important; background-color: #47452c; border-color: var(--primary); } .footer-info { border-radius: 15px; box-shadow: 0 5px 25px rgba(0, 0, 0, .07); margin-bottom: 50px; padding: 0 48px; } .footer-helper { padding: 20px 48px; } .footer-info img { width: 40px; height: 40px } .footer-info span { margin-top: 10px; color: #333; font-size: 12px; font-weight: 600; } .footer-feature-innerbox { text-align: unset } .footer-icon { width: 20px; height: 10px; border-radius: 10px; background-color: var(--primary); border: 4px solid var(--primary-light); display: block; margin-left: 10px; margin-top: 2px; } .footer-aboutus-title { font-size: 14px; font-weight: 600; margin-left: 10px; } .footer-links-ul li a { color: #333; font-size: 12px; } footer p { font-size: 12px } .footer-rights { font-size: 12px } .footer-menu-shortcut { padding: 20px 0; border-top: 1px solid #efefef; overflow-x: visible; border-bottom: 1px solid #efefef; } footer.footer { width: 100%; height: auto; padding: 48px 10px 0; position: relative; background: #fff; float: left; } footer.footer .footer-jumpup:before { display: none; } footer.footer .footer-jumpup { border-bottom: none; box-shadow: 0 -15px 20px -20px rgba(0, 0, 0, .1); } .product-vertical:before { display: none } .product-vertical .card-vertical-product-content .card-vertical-product-title a { white-space: normal; min-height: 50px; font-feature-settings: "ss02"; } .product-vertical .vertical-product-thumb img { max-height: 188px } .outofstock { text-align: center !important; border-radius: 8px; line-height: 1.7; flex: 2; padding: 7px; background: linear-gradient(90deg, #ff9c9c, hsla(0, 0%, 100%, 0)); } .outofstock span { color: #b21c1c; font-size: 15px; font-weight: 800; } .bundle-specification { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-bottom: 10px; } .specification-item { display: flex; gap: 8px } .specification-key { background-color: #ececed; line-height: 20px; padding: 5px 7px; border-radius: 4px; overflow: hidden; background-color: #f3f4f6; line-height: 20px; padding: 5px 7px; border-radius: 4px; width: 80px; font-weight: 500; font-size: 11px; text-align: right; font-family: 'IRANYekanX'; } .specification-value { background-color: #ececed; line-height: 20px; padding: 5px 7px; border-radius: 4px; flex-grow: 1; overflow: hidden; font-size: 11px; text-align: right; font-family: 'IRANYekanX'; } .product-vertical { padding-bottom: 16px; margin-bottom: 0 !important } .product-vertical:before { display: none } .product-vertical .card-vertical-product-content .card-vertical-product-title a { white-space: normal; font-size: 14px; line-height: 23px; font-weight: 600; color: #4d4d4d; height: 50px; text-align: right } .product-vertical .vertical-product-thumb img { max-height: 188px } .bundle-specification { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-bottom: 10px; } .specification-item { display: flex; gap: 8px } .product-vertical { padding-bottom: 16px; } .section-slider-product .product-carousel .owl-item img { max-height: 150px; margin-top: 10px } .item-add-basket { margin-left: 0 } .toman { color: green; font-size: 15px; font-weight: 900 !important; } .promotion-category .promotion-category-name { color: #3a3939; font-size: 13px; font-weight: 600; font-family: 'IRANYekanX'; } .price-value { color: green; font-size: 15px; font-weight: 900 !important; font-feature-settings: "ss02"; } .mainshadow { box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .1); } .mainborder { border-radius: 10px !important; } .widget-suggestion { position: relative; direction: rtl; overflow: visible; } .widget-suggestion .owl-nav .owl-prev, .widget-suggestion .owl-nav .owl-next { position: absolute !important; bottom: 475px !important; width: 36px !important; height: 36px !important; color: #333 !important; display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0.8; transition: all 0.3s ease; z-index: 999 !important; border: none !important; outline: none !important; cursor: pointer; background-color: #fff !important; border-radius: 4px !important; padding: 6px 12px !important; border: 1px solid var(--primary) !important; top: auto !important } .widget-suggestion .card-header { z-index: 0; } .widget-suggestion .owl-nav .owl-prev { left: 10px !important; } .widget-suggestion .section-slider-product .widget-product .owl-carousel .owl-nav .owl-next { left: 50px !important; } .widget-suggestion .section-slider-product { position: relative; overflow: visible !important; } .titleicon { width: 20px; height: 10px; border-radius: 10px; background-color: var(--primary); border: 4px solid var(--primary-light); display: block; margin-left: 10px; margin-top: 2px; } .title-one { font-size: 13px; font-weight: 600; } .card-header { z-index: 0; } .gap-8 { gap: 8px } .owl-prev-custom, .owl-next-custom { border: 1px solid var(--primary); } .owl-prev-custom .fa-angle-right:before, .owl-next-custom .fa-angle-left:before { color: #333; font-size: 16px } .promotion-category img { width: 80px; height: 80px; } .section-slider-product .widget .card-header:before, .section-slider-product .widget .card-header:after { display: none } .section-slider-product .widget-product span.title-one { margin-top: 5px } .card-header>div { align-items: center } .footer-info { text-align: center } .listing { width: auto; } @media(max-width:767px) { .mainborder { border-radius: 5px !important; } .footer-info { padding: 0 15px } .listing .listing-header ul.sort-options { display: flex; margin: 0; } .listing .listing-header ul.sort-options li { width: auto; } .listing .listing-header ul.sort-options li a.listing-tab-item { font-size: 10px } .listing-sort-option-header span { width: 100%; margin-top: 18px; text-align: center; font-size: 10px; line-height: 1.4; } .filter-btn { font-size: 11px; line-height: 1.5; padding: 5px; background: var(--primary); border-radius: 5px; margin-top: 7px; color: #fff; color: #211818; margin-left: 10px; } } .breadcrumb-container { background-color: #fff; box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .1); border-radius: 6px; margin-top: 2px !important; line-height: 50px; padding: 0 20px; margin-bottom: 8px; border: none } .breadcrumb-container::-webkit-scrollbar { display: none; } .listing .listing-header { position: relative; background-color: #fff; box-shadow: 0 5px 8px -3px rgba #0000001a (0, 0, 0, .1) !important; border-radius: 10px; margin-top: 0; top: 0; padding: 0 15px !important } .listing { margin-top: 10px !important; padding: 0; border: none; background: transparent } .product-vertical { border: none !important } .listing .listing-header ul.sort-options li { padding-top: 19px } #listicon { top: 25px } .listing-active a { background-color: var(--primary-light); border-radius: 4px !important; color: #333 !important } .listing .listing-header ul.sort-options li a.listing-tab-item:hover { background-color: var(--primary-light); border-radius: 4px !important; color: #333 !important } .p-10 { padding: 10px } .product-vertical .vertical-product-thumb img { max-width: 100% } .title-product:before { width: 20px; height: 10px; border-radius: 10px; background-color: var(--primary); border: 4px solid var(--primary-light); display: inline-block; margin-left: 10px; margin-top: 2px; content: ""; } .listing-sidebar { border: none } .listing-sidebar .box-header-product-feature { background: #fff !important; margin-top: 5px; box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .1); border-radius: 10px; padding: 0 20px; border: none; border-bottom: .5px solid #dadada; text-align: right; padding-right: 10px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .listing-sidebar .box .box-content { padding: 10px } .listing-sidebar .box .box-content .ui-input-quick-search input.input-field-cleanable { background: transparent } .brand-label .inner .brand-image { background-color: #fff; border-radius: 3px; } .brand-label .inner { background-color: #eee; border-radius: 5px; } .brand-label .inner .brand-image img { aspect-ratio: 1 / .5; -webkit-user-drag: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; width: 100% } .brand-item span { font-size: 12px } .checked-label { border: 2px solid var(--primary); border-radius: 4px } .btn-warning { color: #fff !important; background-color: #caac56; border-color: var(--primary); } #mobileFiltersModal .modal-body { padding: 0 } .listing .listing-header { overflow: visible } .pagination { gap: 8px } .pagination .page-item button { font-feature-settings: "ss02"; } .page-item.active .page-link { color: #fff !important; background-color: var(--primary-light) !important; color: #000 !important; border: none !important } .page-link { border-radius: 4px; background: #eee; border: none; color: #707070 !important; } .product { padding: 10px; } .product .product-attributes .product-config .product-config-wrapper .product-params ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .product .product-attributes .product-config .product-config-wrapper .product-params ul li { background-color: #f8fafc !important; border-radius: 10px; padding: .75rem; } .product .product-attributes .product-seller-info { background-color: transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); border-radius: 11px; border-top: none; } .product .product-attributes .product-seller-info button.as-c { min-width: 200px; height: 44px; line-height: 44px; margin-right: 10px; background: linear-gradient(0deg, var(--primary), var(--primary-dark)); padding: 0; border: none; box-shadow: none } .product .product-gallery .product-thumbnails { width: 100%; overflow-x: scroll; } .section-slider-product .widget .card-header, .brand-slider .card-header { margin-right: 1.5rem !important; } .card-header-custom { padding: 20px 15px; } .checkout-summary .amount-of-payable .setlement-account { background: linear-gradient(0deg, var(--primary), var(--primary-dark)); } .container-main { max-width: 2200px; } .container-fluid{ max-width: 2200px !important; } .container { max-width: 1200px; } .section-slider-product .widget-product .product-carousel .item, .brand-slider .owl-carousel .item { padding: 15px; } li.nav-item-account a span { vertical-align: middle; font-size: 15px; color: #212529; } .shopping-card { display: block; position: relative; text-align: center; color: #212529; border-radius: 5px; box-shadow: 0 0 0 0 rgba(0, 0, 0, .5); width: auto; padding: 0 12px; background-color: var(--primary); line-height: 38px; box-sizing: border-box; cursor: pointer; border: none } .searchicon { position: absolute; line-height: 40px !important; font-size: 15px; margin: 0 12px; left: 0; top: 20px } .account-box-content .form-account-title i { position: absolute; left: 0; font-size: 18px; color: #acacac; } .nav-btn { width: 100%; height: auto; } .product .product-headline h1 span { margin: auto; position: relative !important; margin-top: 10px; } .product .product-attributes .product-seller-info button.as-c { line-height: normal } .tabs .tabs-product .tabs-content .content-expert .tab-content-wrapper .content-expert-articles .content-expert-article .content-expert-button { background-color: var(--primary-light); color: var(--primary); } .tabs .tabs-product .tabs-content .content-expert .tab-content-wrapper .content-expert-articles .content-expert-article:before { background: var(--primary-light); } footer.footer .footer-jumpup .footer-jumpup-container i { background: var(--primary-light); color: var(--primary); } .tabs .tabs-product .tabs-content .content-expert .tab-content-wrapper .content-short-review { font-size: 14px; } .tabs .tabs-product .tabs-content .content-expert .tab-content-wrapper .content-expert-articles .content-expert-article h3.content-expert-title { font-size: 15px; } .fs-13 { font-size: 13px; } .tabs .tabs-product .tabs-content .content-expert .tab-content-wrapper .mask a.mask-handler { color: var(--primary); } .tabs .tabs-product .tabs-content { padding-top: 10px !important; } .product .product-gallery .product-thumbnails li a { width: 100px; height: 100px; padding: 10px; } .product .product-gallery .product-thumbnails li.active a { border: 2px solid var(--primary); border-radius: 10px; } .product .product-gallery .product-thumbnails li a img { display: block; max-width: 80px; margin: 0; max-height: 80px; } .product .product-gallery-carousel .owl-nav button.owl-next, .product .product-gallery-carousel .owl-nav button.owl-prev { bottom: -120px !important; } .product .product-gallery-carousel .owl-nav button.owl-next i, .product .product-gallery-carousel .owl-nav button.owl-prev i { text-align: center; align-items: center; padding: 2px 4px; } .fa-angle-right:before, .fa-angle-left:before { color: var(--primary) !important; } .product .product-seller-row span.amount span { font-size: 20px; } .product-summary .top-details { min-height: 44px; margin-bottom: 12px; } .flex-grow-1 { flex-grow: 1 !important; } .buy-button span { font-size: 12px; } @media (min-width: 1200px) { .flex-xl-row { flex-direction: row !important; } } .product .product-variants { margin: 20px 0 10px; color: #6f6f6f; font-size: 13px; line-height: 1.692; } .product-summary .price-area-detail { background: linear-gradient(90deg, #f3f3f3, hsla(0, 0%, 100%, 0)); border-radius: 8px; position: relative; flex-grow: 1; padding-right: 20px; height: 44px; } .product-summary .price { font-size: 20px; font-weight: 800; color: green; text-align: right; } .product-summary .price-information { position: absolute; left: 8px; top: 12px; font-size: 18px; color: #d3d3d3; } @media (min-width: 1200px) { .product-summary .buy-button { margin-top: 0; } } .product-summary .buy-button { min-width: 200px; height: 44px; line-height: 44px; margin-right: 10px; background: linear-gradient(0deg, var(--primary), var(--primary-dark)); padding: 0; margin-top: 10px; border-radius: 10px; cursor: pointer; } .product-summary .buy-button:hover{ background: var(--primary-light); } ul.js-product-variants { margin-bottom: 0; } ul.js-product-variants li { margin: 0 8px 8px 0; display: inline-block; } .ui-variant-color { display: inline-block; position: relative; } .ui-variant-color .ui-variant-shape { width: 17px; height: 17px; position: absolute; right: 8px; top: 8px; border-radius: 5px; background: #ccc; border: 1px solid #ccc; content: ""; } .ui-variant-color .ui-variant-check { cursor: pointer; border: 1px solid #dedede; border-radius: 5px; color: #6f6f6f; padding: 5px 16px; font-size: 13px; font-size: .929rem; line-height: 1.692; display: block; padding-right: 37px; } .quantity-button.quantity-up:hover { background: green; } .tabs .tabs-product .tabs-content .content-expert .tab-content-wrapper { min-height: 100px; } .page-content .cart-main { margin-top: 0; } .page-content .title-content, .page-content-cart { margin: 0 0 10px; border: none } .checkout-summary { border: none } .title-ul { margin: 0; } .m-70-20 { margin: 70px 20px } .checkout-body { display: flex; align-items: center; } .sidebar>ul li i { background: var(--primary-light); color: var(--primary); } .owl-carousel .owl-item img { max-height: 500px; } .listing-sidebar .box .box-header button i { background: var(--primary-light); color: var(--primary); font-size: 14px; font-weight: 600; } .prl-0 { padding-right: 0 !important; padding-left: 0 !important; } .search-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; padding: 20px; padding-top: 0; box-sizing: border-box; display: flex; flex-direction: column; } .search-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; direction: ltr; } .search-panel-header h3 { font-size: 18px; color: var(--primary); margin: 0; } .close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #333; } .search-input-wrapper { position: relative; display: flex; align-items: center; margin-bottom: 20px; } .search-input-wrapper input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; outline: none; padding-right: 50px; } .search-input-wrapper i { position: absolute; right: 15px; cursor: pointer; color: #666; font-size: 18px; } .search-history h5 { font-size: 14px; color: #666; margin-bottom: 10px; } .history-list { display: flex; flex-wrap: wrap; gap: 8px; } .history-item { background: #f5f5f5; padding: 8px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; transition: background 0.2s; } .history-item:hover { background: #e0e0e0; } .flex-direction-column { flex-direction: column; } header:before { background: transparent !important; } .breadcrumb-container ul.js-breadcrumb li.breadcrumb-item a.breadcrumb-link { font-size: 0.75rem !important; color: #505054; font-weight: 500; margin-left: 5px; } .breadcrumb-container ul.js-breadcrumb li.breadcrumb-item:before { font-family: Font Awesome\ 6 Pro; padding-left: .5rem; float: left; padding-right: var(--bs-breadcrumb-item-padding-x); color: #5d6267; content: "\f104"; } .breadcrumb-container ul.js-breadcrumb li.breadcrumb-item:last-child:before { display: none; } .selected-categories { background-color: #fff; } .spacer { margin-top: 15px; } .selected-categories .categories-items { overflow-x: auto; white-space: nowrap; padding-bottom: 15px; scrollbar-width: thin !important; } .selected-categories .categories-items .item { padding: 0 15px; } .selected-categories .categories-items .item .thumbnailarea { width: 70px; height: 70px; } .selected-categories .categories-items .item span { font-weight: 600; font-size: 13px; margin-top: 10px; color: #212529; } .search-header .search-panel { height: 300px; width: 500px !important; } .search-header .search-panel.active { top: 60px !important; height: 300px; width: 500px !important; border-top: 1px solid var(--primary) } .text-alert-success-dark { --tw-text-opacity: 1; color: rgb(5 150 105 / var(--tw-text-opacity)); } .profile-menu-items i { margin-left: 5px; } .m-8{ margin: 8px; } .margin-70-50{ margin: 70px 50px; } @media (min-width: 610px) { .page-content-cart .checkout-col-desc h1{ font-size: 14px; color: #272525; line-height: 25px; font-weight: 600; } .page-content-cart .checkout-col-desc{ text-align: center; align-items: center; } } @media (max-width: 610px) { .margin-70-50{ margin: 20px ; } .flex-direction-column-sm{ flex-direction: column; } .listing-items .col-xs-12 { padding-right: 0 !important; padding-left: 0 !important; } .breadcrumb-container { overflow-x: scroll; margin-top: 10px !important; } .m-70-20 { margin: 0 !important } .checkout-body { display: flex; flex-direction: column; } .checkout-body .total { display: block !important; } .checkout-body .unit-price { margin-top: -90px !important; float: left; text-align: end; margin-left: 15px; padding-left: 20px; } .checkout-body .total .product-price { float: left; text-align: end; margin-left: 15px; padding-left: 20px; } } @media (max-width: 400px) { .fa-angle-right:before, .fa-angle-left:before { font-size: 12px !important; } .checkout-body .unit-price { margin-top: -150px !important; float: left; text-align: end; margin-left: 15px; padding-left: 20px; } .checkout-body .total .product-price { float: left; text-align: end; margin-left: 15px; padding-left: 20px; } } @media (max-width: 991px) { .listing .listing-header .listing-sort-option-header { align-items: center; } } .badge { padding: 0.4em !important } .row.g-2 { margin: -0.25rem; } .row.g-2 > [class*="col"] { padding: 0.25rem; } .row.g-3 { margin: -0.5rem; } .row.g-3 > [class*="col"] { padding: 0.5rem; } .row.g-4 { margin: -0.75rem; } .row.g-4 > [class*="col"] { padding: 0.75rem; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .me-3 { margin-right: 1rem !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 1rem !important; } .fs-4 { font-size: 1.5rem !important; } .fs-5 { font-size: 1.25rem !important; } .fw-bold { font-weight: 700 !important; } .fw-semibold { font-weight: 600 !important; } .product-card { padding: calc(6px * var(--w-density, var(--density, 1))); height: 100%; font-family: var(--w-font, var(--font-body)); font-size: calc(1em * var(--w-font-scale, var(--font-scale, 1))); } .product-card-inner { background: #fff; border-radius: var(--w-radius, var(--border-radius, 14px)); overflow: hidden; border: 1px solid #f0f0f0; box-shadow: var(--w-shadow, none); transition: border-color .25s, box-shadow .25s; height: 100%; display: flex; flex-direction: column; } .product-card-inner:hover { border-color: #e0e0e0; box-shadow: var(--w-shadow, 0 4px 20px rgba(0,0,0,.06)); } .product-card-image { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #f8f9fa; } .product-card-image img { width: 100%; height: 100%; object-fit: contain; } .product-card-body { padding: calc(12px * var(--w-density, var(--density, 1))); flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .product-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; font-weight: 600; color: #333; text-decoration: none; line-height: 1.6; margin-bottom: 8px; } .product-card-title:hover { color: var(--primary, #007bff); } .product-card-rating { margin-bottom: 6px; } .product-card-rating .fa-star { font-size: 0.72rem; color: #ffc107; margin-left: 1px; } .product-card-rating .far.fa-star { color: #ddd; } .product-card-price { margin-top: auto; } .product-card-price .price-old { text-decoration: line-through; color: #999; font-size: 0.78rem; margin-left: 6px; } .product-card-price .price-current { font-weight: 800; font-size: 1rem; color: #333; } .product-card-price .price-current small { font-weight: 400; font-size: 0.7rem; color: #888; } .product-card-price .price-unavailable { color: #e74c3c; font-weight: 600; font-size: 0.85rem; } .product-discount-badge { position: absolute; top: 8px; right: 8px; background: #ef4056; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; z-index: 2; } .product-unavailable-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.72rem; font-weight: 500; padding: 3px 10px; border-radius: 20px; z-index: 2; } .owl-carousel { position: relative; } .owl-carousel .owl-stage { display: flex; } .owl-carousel .owl-item { display: flex; height: auto !important; } .owl-carousel .item { display: flex; width: 100%; } .owl-carousel .owl-nav { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; z-index: 5; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50% !important; background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.12); display: flex !important; align-items: center; justify-content: center; font-size: 14px !important; color: #333 !important; pointer-events: auto; transition: box-shadow .2s; } .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .owl-carousel .owl-nav button.owl-prev { right: -10px; left: auto; } .owl-carousel .owl-nav button.owl-next { left: -10px; right: auto; } .pcm-section { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.06); } .pcm-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; border-bottom: 2px solid #f0f0f0; } .pcm-tabs { display: flex; gap: 0; } .pcm-tab { padding: 10px 18px; font-size: 0.92rem; font-weight: 700; color: #333; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; } .pcm-tab.active, .pcm-tab:hover { color: #ef4056; border-bottom-color: #ef4056; } .pcm-viewall { font-size: 0.82rem; font-weight: 600; color: #0fabc5; text-decoration: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; padding-bottom: 12px; } .pcm-viewall:hover { color: #0d8fa5; } .pcm-viewall i { font-size: 9px; } .pcm-body { padding: 16px 16px; position: relative; overflow: hidden; } .pcs-section { --pcs-color: #ef4056; } .pcs-wrapper { display: flex; border: 3px solid var(--pcs-color); border-radius: 14px; overflow: hidden; background: #fff; } .pcs-promo { flex: 0 0 180px; background: var(--pcs-color); display: flex; align-items: center; justify-content: center; padding: 24px 16px; text-align: center; } .pcs-promo-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pcs-promo-icon { font-size: 40px; color: #fff; opacity: 0.9; } .pcs-promo-title { font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1.7; margin: 0; } .pcs-countdown { direction: ltr; } .pcs-countdown .d-flex > div { background: rgba(255,255,255,0.2) !important; border-radius: 6px !important; min-width: 50px !important; padding: 4px 6px !important; } .pcs-countdown .d-flex > div div:first-child { font-size: 1.2rem !important; color: #fff !important; } .pcs-countdown .d-flex > div .small { color: rgba(255,255,255,0.8) !important; font-size: 0.6rem !important; } .pcs-promo-btn { display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--pcs-color); font-size: 0.82rem; font-weight: 700; padding: 8px 18px; border-radius: 20px; text-decoration: none; transition: background .2s; } .pcs-promo-btn:hover { background: #f8f8f8; color: var(--pcs-color); } .pcs-promo-btn i { font-size: 9px; } .pcs-carousel-wrap { flex: 1; min-width: 0; padding: 12px 16px; position: relative; overflow: hidden; } .pcs-card { position: relative; } .pcs-badge { display: block; text-align: center; background: var(--pcs-color); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 0; border-radius: 8px 8px 0 0; margin: 0 2px; position: relative; z-index: 3; } .pcs-card { position: relative; flex: 1; display: flex; flex-direction: column; } .pcs-card .product-card { padding: 0; flex: 1; } .pcs-card .product-card-inner, .pcs-card .pc { border-radius: 0 0 10px 10px; border: 1px solid #fdd; border-top: none; box-shadow: none; height: 100%; overflow: hidden; } .pcs-card .product-card-inner:hover { border-color: #e0e0e0; box-shadow: 0 4px 20px rgba(0,0,0,.06); } .owl-is-dragging a, .owl-is-dragging a * { pointer-events: none !important; } .pcm-viewall-card { display: flex; flex-direction: column; padding: 6px; } .pcm-viewall-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-decoration: none; background: #f8f9fa; border-radius: 12px; transition: background .2s; } .pcm-viewall-inner:hover { background: #eef1f5; } .pcm-viewall-circle { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #0fabc5; display: flex; align-items: center; justify-content: center; color: #0fabc5; font-size: 18px; transition: background .2s, color .2s; } .pcm-viewall-inner:hover .pcm-viewall-circle { background: #0fabc5; color: #fff; } .pcm-viewall-text { font-size: 0.85rem; font-weight: 700; color: #0fabc5; } .pcs-viewall-card { display: flex; flex-direction: column; } .pcs-viewall-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-decoration: none; background: #fff5f6; border: 1px dashed var(--pcs-color); border-radius: 12px; transition: background .2s; } .pcs-viewall-inner:hover { background: #ffebee; } .pcs-viewall-circle { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--pcs-color); display: flex; align-items: center; justify-content: center; color: var(--pcs-color); font-size: 18px; transition: background .2s, color .2s; } .pcs-viewall-inner:hover .pcs-viewall-circle { background: var(--pcs-color); color: #fff; } .pcs-viewall-text { font-size: 0.85rem; font-weight: 700; color: var(--pcs-color); } @media (max-width: 767.98px) { .pcs-wrapper { flex-direction: column; } .pcs-promo { flex: 0 0 auto; padding: 16px; flex-direction: row; } .pcs-promo-inner { flex-direction: row; flex-wrap: wrap; justify-content: center; } .pcs-promo-icon { font-size: 28px; } .pcs-promo-title { font-size: 0.95rem; } } .cst-card { background: #f8f9fa; border-radius: 14px; padding: 40px 24px; text-align: center; } .cst-dark { color: #fff; } .cst-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 28px; color: #222; } .cst-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .cst-item { min-width: 140px; padding: 20px 16px; border-radius: 12px; transition: transform .2s; } .cst-item:hover { transform: translateY(-3px); } .cst-icon { font-size: 1.8rem; margin-bottom: 10px; color: var(--primary, #007bff); } .cst-dark .cst-icon { color: rgba(255,255,255,0.7); } .cst-number { font-size: 2.4rem; font-weight: 900; line-height: 1.1; color: var(--primary, #007bff); } .cst-dark .cst-number { color: #fff; } .cst-label { font-size: 0.88rem; color: #777; margin-top: 6px; font-weight: 600; } .cst-dark .cst-label { color: rgba(255,255,255,0.7); } .pgt-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; } .pgt-header { padding: 18px 24px 0; border-bottom: 2px solid #f0f0f0; } .pgt-title { font-size: 1.2rem; font-weight: 800; color: #222; margin: 0 0 14px; } .pgt-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: none !important; } .pgt-tabs .nav-item { margin-bottom: -2px; } .pgt-tab.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 0.88rem; font-weight: 600; color: #666 !important; text-decoration: none; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: none !important; white-space: nowrap; transition: color .2s, border-color .2s; } .pgt-tab.nav-link i { font-size: 0.8rem; } .pgt-tab.nav-link:hover, .pgt-tab.nav-link.active { color: #ef4056 !important; border-bottom-color: #ef4056 !important; } .pgt-content { padding: 20px 20px; } .tst-heading { text-align: center; font-size: 1.25rem; font-weight: 800; color: #222; margin-bottom: 20px; } .tst-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 24px; display: flex; flex-direction: column; height: 100%; } .tst-quote { font-size: 1.4rem; color: var(--primary, #007bff); opacity: 0.25; margin-bottom: 12px; } .tst-text { font-style: italic; line-height: 1.9; color: #555; font-size: 0.9rem; flex: 1; margin: 0 0 14px; } .tst-stars { margin-bottom: 16px; } .tst-stars .fa-star { font-size: 0.82rem; color: #e0e0e0; margin-left: 1px; } .tst-stars .fa-star.active { color: #ffc107; } .tst-author { display: flex; align-items: center; gap: 10px; margin-top: auto; } .tst-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .tst-avatar-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 0.9rem; } .tst-name { font-weight: 700; font-size: 0.88rem; color: #333; } .cf-section { } .cf-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 32px; } .cf-header { text-align: center; margin-bottom: 28px; } .cf-header-right { text-align: right; } .cf-header i { font-size: 2rem; color: var(--primary, #007bff); margin-bottom: 10px; display: inline-block; } .cf-header h3 { font-size: 1.3rem; font-weight: 800; color: #222; margin: 0 0 6px; } .cf-header p { font-size: 0.88rem; color: #888; margin: 0; } .cf-label { display: block; font-size: 0.82rem; font-weight: 600; color: #444; margin-bottom: 6px; } .cf-input { display: block; width: 100%; padding: 11px 14px; font-size: 0.88rem; font-family: inherit; color: #333; background: #f8f9fa; border: 1.5px solid #e8e8e8; border-radius: 10px; transition: border-color .2s, box-shadow .2s; outline: none; } .cf-input:focus { border-color: var(--primary, #007bff); box-shadow: 0 0 0 3px rgba(0,123,255,0.08); background: #fff; } .cf-input::placeholder { color: #bbb; } .cf-textarea { resize: vertical; min-height: 120px; } .cf-error { display: block; color: #ef4056; font-size: 0.75rem; margin-top: 4px; } .cf-submit { display: inline-flex; align-items: center; gap: 6px; background: var(--primary, #007bff); color: #fff; border: none; padding: 12px 32px; font-size: 0.9rem; font-weight: 700; font-family: inherit; border-radius: 10px; cursor: pointer; transition: background .2s, transform .15s; } .cf-submit:hover { filter: brightness(1.1); transform: translateY(-1px); } .cf-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } .cf-info { display: flex; flex-direction: column; gap: 16px; height: 100%; justify-content: center; } .cf-info-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: #f8f9fb; border-radius: 12px; transition: background .2s; } .cf-info-item:hover { background: #f0f2f5; } .cf-info-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--primary, #007bff); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .cf-info-label { font-size: 0.78rem; font-weight: 700; color: #888; margin-bottom: 2px; } .cf-info-value { font-size: 0.88rem; font-weight: 600; color: #333; text-decoration: none; } a.cf-info-value:hover { color: var(--primary, #007bff); } .cf-map { border-radius: 12px; overflow: hidden; margin-top: 4px; } .cf-map iframe { width: 100%; height: 200px; border: none; } @media (max-width: 767.98px) { .cf-card { padding: 20px 16px; } .cf-info { margin-top: 24px; } } .prt-section { } .prt-header { text-align: center; margin-bottom: 28px; } .prt-heading { font-size: 1.3rem; font-weight: 800; color: #222; margin: 0 0 8px; } .prt-subtitle { font-size: 0.9rem; color: #888; margin: 0; } .prt-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .prt-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 32px 24px; text-align: center; flex: 1 1 240px; max-width: 300px; border: 2px solid transparent; position: relative; transition: transform .2s, box-shadow .2s; } .prt-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); border-color: #e0e0e0; } .prt-featured { transform: scale(1.04); z-index: 1; } .prt-featured:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); } .prt-badge { position: absolute; top: -1px; inset-inline-start: 50%; transform: translateX(-50%); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 4px 16px; border-radius: 0 0 8px 8px; } [dir="rtl"] .prt-badge { transform: translateX(50%); } .prt-tier-name { font-size: 1.05rem; font-weight: 700; color: #333; margin-bottom: 14px; } .prt-price-wrap { margin-bottom: 20px; } .prt-price { font-size: 2.2rem; font-weight: 900; color: #222; line-height: 1.1; } .prt-period { font-size: 0.85rem; color: #999; font-weight: 500; } .prt-features { list-style: none; padding: 0; margin: 0 0 24px; text-align: start; } .prt-features li { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 0.88rem; color: #555; border-bottom: 1px solid #f3f3f3; } .prt-features li:last-child { border-bottom: none; } .prt-feature-included i { color: #27ae60; font-size: 0.75rem; } .prt-feature-excluded i { color: #e74c3c; font-size: 0.75rem; } .prt-feature-excluded span { text-decoration: line-through; color: #bbb; } .prt-btn { display: inline-block; padding: 10px 28px; font-size: 0.9rem; font-weight: 700; border-radius: 10px; background: #f0f0f0; color: #333; text-decoration: none; transition: background .2s, transform .15s; } .prt-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .prt-btn-featured { color: #fff; } .prt-rows { display: flex; flex-direction: column; gap: 12px; } .prt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 20px 24px; border: 2px solid transparent; transition: transform .2s; } .prt-row:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); } .prt-row-featured { box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .prt-row-name { display: flex; align-items: center; gap: 8px; min-width: 140px; } .prt-row-tier { font-size: 1rem; font-weight: 700; color: #333; } .prt-row-badge { font-size: 0.7rem; font-weight: 700; color: #fff; padding: 2px 10px; border-radius: 6px; } .prt-row-price { min-width: 120px; } .prt-row-features { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; } .prt-row-feat { font-size: 0.82rem; color: #555; display: inline-flex; align-items: center; gap: 4px; } .prt-feat-included i { color: #27ae60; font-size: 0.7rem; } .prt-feat-excluded i { color: #e74c3c; font-size: 0.7rem; } .prt-feat-excluded { text-decoration: line-through; color: #bbb; } .prt-row-action { flex-shrink: 0; } @media (max-width: 767.98px) { .prt-grid { flex-direction: column; align-items: center; } .prt-card { max-width: 100%; } .prt-featured { transform: none; } .prt-featured:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); } .prt-row { flex-direction: column; text-align: center; } .prt-row-features { justify-content: center; } } .pfo-section { } .pfo-heading { text-align: center; font-size: 1.3rem; font-weight: 800; color: #222; margin-bottom: 20px; } .pfo-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; } .pfo-filter-btn { display: inline-block; padding: 7px 20px; font-size: 0.85rem; font-weight: 600; font-family: inherit; color: #666; background: #f0f0f0; border: none; border-radius: 50px; cursor: pointer; transition: background .2s, color .2s; } .pfo-filter-btn:hover { background: #e0e0e0; } .pfo-filter-active { background: var(--primary, #007bff); color: #fff; } .pfo-filter-active:hover { background: var(--primary, #007bff); color: #fff; } .pfo-item { transition: opacity .3s, transform .3s; } .pfo-item.pfo-hidden { display: none; } .pfo-card { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .pfo-image-wrap { position: relative; overflow: hidden; } .pfo-image { width: 100%; display: block; object-fit: cover; min-height: 200px; transition: transform .3s; } .pfo-image-wrap:hover .pfo-image { transform: scale(1.05); } .pfo-placeholder { display: flex; align-items: center; justify-content: center; min-height: 200px; background: #f5f5f5; color: #ddd; font-size: 48px; } .pfo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .3s; } .pfo-image-wrap:hover .pfo-overlay { opacity: 1; } .pfo-title { color: #fff; font-size: 1rem; font-weight: 700; margin: 0; } .pfo-category-badge { font-size: 0.75rem; font-weight: 600; color: #fff; background: rgba(255,255,255,0.2); padding: 3px 12px; border-radius: 50px; } .pfo-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #333; font-size: 0.85rem; text-decoration: none; transition: background .2s; } .pfo-link:hover { background: var(--primary, #007bff); color: #fff; } .pfo-masonry { column-gap: 16px; } .pfo-masonry-item { break-inside: avoid; margin-bottom: 16px; } @media (max-width: 767.98px) { .pfo-masonry { column-count: 1 !important; } } @media (min-width: 768px) and (max-width: 991px) { .pfo-masonry { column-count: 2 !important; } } .tml-section { } .tml-heading { text-align: center; font-size: 1.3rem; font-weight: 800; color: #222; margin-bottom: 28px; } .tml-timeline { position: relative; padding: 20px 0; } .tml-line { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 3px; transform: translateX(-50%); border-radius: 3px; } [dir="rtl"] .tml-line { transform: translateX(50%); } .tml-entry { position: relative; width: 50%; padding: 0 40px 32px; opacity: 1; } .tml-right { inset-inline-start: 50%; } .tml-left { inset-inline-start: 0; text-align: end; } .tml-dot { position: absolute; top: 6px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.1); } .tml-right .tml-dot { inset-inline-start: -7px; } .tml-left .tml-dot { inset-inline-end: -7px; } .tml-content { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 20px; } .tml-date { display: inline-block; color: #fff; font-size: 0.78rem; font-weight: 700; padding: 3px 14px; border-radius: 50px; margin-bottom: 10px; } .tml-title { font-size: 1rem; font-weight: 700; color: #222; margin: 0 0 4px; } .tml-org { display: block; font-size: 0.82rem; font-weight: 600; color: #999; margin-bottom: 8px; } .tml-desc { font-size: 0.88rem; color: #666; line-height: 1.8; margin: 0; } .tml-entry[data-scroll-animate] { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; } .tml-entry[data-scroll-animate].scroll-animated { opacity: 1; transform: translateY(0); } @media (max-width: 767.98px) { .tml-line { inset-inline-start: 20px; transform: none; } [dir="rtl"] .tml-line { transform: none; } .tml-entry { width: 100%; inset-inline-start: 0 !important; text-align: start !important; padding: 0 20px 24px 48px; } [dir="rtl"] .tml-entry { padding: 0 48px 24px 20px; } .tml-dot { inset-inline-start: 14px !important; inset-inline-end: auto !important; } } .tml-compact { position: relative; padding: 0 0 0 32px; } [dir="rtl"] .tml-compact { padding: 0 32px 0 0; } .tml-compact-line { position: absolute; top: 0; bottom: 0; inset-inline-start: 8px; width: 3px; border-radius: 3px; } .tml-compact-entry { position: relative; padding-bottom: 20px; } .tml-compact-entry[data-scroll-animate] { opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .4s; } .tml-compact-entry[data-scroll-animate].scroll-animated { opacity: 1; transform: translateY(0); } .tml-compact-dot { position: absolute; inset-inline-start: -28px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.1); } .tml-compact-content { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 16px; } .tml-compact-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; } .tml-compact-date { display: inline-block; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 10px; border-radius: 50px; } .tml-compact-org { font-size: 0.78rem; font-weight: 600; color: #999; } .tml-compact-title { font-size: 0.92rem; font-weight: 700; color: #222; margin: 0 0 4px; } .tml-compact-desc { font-size: 0.84rem; color: #666; line-height: 1.7; margin: 0; } .tmp-section { } .tmp-heading { text-align: center; font-size: 1.3rem; font-weight: 800; color: #222; margin-bottom: 24px; } .tmp-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 28px 20px; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; transition: transform .2s, box-shadow .2s; } .tmp-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.1); } .tmp-photo-wrap { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; flex-shrink: 0; } .tmp-photo { width: 100%; height: 100%; object-fit: cover; } .tmp-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f0f0f0; color: #ccc; font-size: 2.2rem; } .tmp-name { font-size: 1rem; font-weight: 700; color: #222; margin: 0 0 4px; } .tmp-role { display: block; font-size: 0.82rem; font-weight: 600; color: var(--primary, #007bff); margin-bottom: 10px; } .tmp-bio { font-size: 0.84rem; color: #777; line-height: 1.7; margin: 0 0 14px; flex: 1; } .tmp-socials { display: flex; justify-content: center; gap: 10px; margin-top: auto; } .tmp-social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #f5f5f5; color: #666; font-size: 0.9rem; text-decoration: none; transition: background .2s, color .2s; } .tmp-social:hover { background: var(--primary, #007bff); color: #fff; } .faq-section { } .faq-heading { font-size: 1.25rem; font-weight: 800; color: #222; text-align: center; margin-bottom: 24px; } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { background: #fff; border: 1.5px solid #eee; border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color .2s; } .faq-item:has(.faq-question[aria-expanded="true"]) { border-color: var(--primary, #007bff); } .faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; font-weight: 600; font-size: 0.95rem; color: #333; background: none; border: none; text-align: right; cursor: pointer; gap: 12px; } .faq-question:hover { color: var(--primary, #007bff); } .faq-question:focus { outline: none; } .faq-arrow { font-size: 0.75rem; color: #999; transition: transform .3s; flex-shrink: 0; } .faq-question[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); color: var(--primary, #007bff); } .faq-answer { padding: 0 20px 18px; font-size: 0.9rem; line-height: 2; color: #555; text-align: right; direction: rtl; } .prc-section { text-align: center; } .prc-title { font-size: 1.25rem; font-weight: 800; color: #222; margin: 0 0 6px; } .prc-subtitle { font-size: 0.9rem; color: #888; margin: 0 0 32px; } .prc-vertical { max-width: 600px; margin: 0 auto; position: relative; padding-right: 40px; } .prc-vertical::before { content: ''; position: absolute; top: 0; bottom: 0; right: 23px; width: 2px; background: linear-gradient(to bottom, var(--primary, #007bff), #eee); } .prc-step { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; position: relative; } .prc-num { width: 48px; height: 48px; border-radius: 50%; background: var(--primary, #007bff); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; flex-shrink: 0; z-index: 2; box-shadow: 0 3px 12px rgba(0,0,0,0.1); } .prc-body { text-align: right; flex: 1; padding-top: 8px; } .prc-step-icon { font-size: 1.1rem; color: var(--primary, #007bff); margin-bottom: 6px; } .prc-step-title { font-weight: 700; font-size: 1.05rem; color: #222; margin: 0 0 6px; } .prc-step-desc { font-size: 0.88rem; color: #666; line-height: 1.8; margin: 0; } .prc-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0; } .prc-row-item { flex: 1; min-width: 150px; max-width: 220px; text-align: center; padding: 0 12px; } .prc-row-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--primary, #007bff); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.1); } .prc-row-num { font-size: 0.72rem; font-weight: 800; color: var(--primary, #007bff); background: #f0f4ff; display: inline-block; padding: 2px 10px; border-radius: 20px; margin-bottom: 8px; } .prc-row-title { font-weight: 700; font-size: 0.95rem; color: #222; margin: 0 0 6px; } .prc-row-desc { font-size: 0.82rem; color: #777; line-height: 1.7; margin: 0; } .prc-row-arrow { display: flex; align-items: center; color: #ccc; font-size: 1.3rem; padding-top: 20px; } @media (max-width: 767.98px) { .prc-vertical { padding-right: 36px; } .prc-vertical::before { right: 19px; } .prc-row { flex-direction: column; align-items: center; gap: 16px; } .prc-row-arrow { transform: rotate(90deg); padding-top: 0; } } .skl-section { } .skl-title { font-size: 1.25rem; font-weight: 800; color: #222; text-align: center; margin-bottom: 28px; } .skl-list { max-width: 700px; margin: 0 auto; } .skl-item { margin-bottom: 22px; } .skl-header { display: flex; justify-content: space-between; margin-bottom: 8px; } .skl-name { font-weight: 700; font-size: 0.92rem; color: #333; } .skl-pct { font-weight: 800; font-size: 0.88rem; color: var(--primary, #007bff); transition: color .3s; } .skl-track { height: 12px; background: #f0f0f0; border-radius: 12px; overflow: hidden; position: relative; } .skl-fill { height: 100%; border-radius: 12px; width: 0; background: var(--primary, #007bff); transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; } .skl-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); animation: skl-shimmer 2s infinite; } @keyframes skl-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .glr-section { } .glr-heading { font-size: 1.25rem; font-weight: 800; color: #222; text-align: center; margin-bottom: 24px; } .glr-item { display: block; position: relative; overflow: hidden; border-radius: 12px; text-decoration: none; } .glr-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s ease; display: block; } .glr-item:hover .glr-img { transform: scale(1.08); } .glr-hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; color: #fff; font-size: 1.5rem; } .glr-item:hover .glr-hover { opacity: 1; } .glr-placeholder { aspect-ratio: 1 / 1; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #ccc; font-size: 2rem; } .tpp-section { } .tpp-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; } .tpp-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 2px solid #f0f0f0; } .tpp-title { font-size: 1.1rem; font-weight: 800; color: #222; margin: 0; display: flex; align-items: center; gap: 8px; } .tpp-title i { color: #ef4056; } .tpp-viewall { font-size: 0.82rem; font-weight: 600; color: #0fabc5; text-decoration: none; display: flex; align-items: center; gap: 4px; } .tpp-viewall:hover { color: #0d8fa5; } .tpp-viewall i { font-size: 9px; } .tpp-grid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px; } .tpp-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; padding: 16px 10px; border-left: 1px solid #f0f0f0; transition: background .15s; } .tpp-item:first-child { border-left: none; } .tpp-item:hover { background: #f8fafb; } .tpp-img { width: 80px; height: 80px; margin-bottom: 12px; flex-shrink: 0; } .tpp-img img { width: 100%; height: 100%; object-fit: contain; } .tpp-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ddd; font-size: 1.5rem; background: #f8f9fa; border-radius: 8px; } .tpp-info { display: flex; align-items: flex-start; gap: 6px; width: 100%; } .tpp-rank { font-weight: 900; font-size: 1rem; color: #ef4056; flex-shrink: 0; line-height: 1.5; } .tpp-name { font-size: 0.8rem; font-weight: 500; color: #555; line-height: 1.6; text-align: right; } .tpp-item:hover .tpp-name { color: #222; } @media (max-width: 991px) { .tpp-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767.98px) { .tpp-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .tpp-grid { grid-template-columns: repeat(2, 1fr); } .tpp-item { border-left: none; border-bottom: 1px solid #f0f0f0; } } .ext-section { } .ext-title { font-size: 1.15rem; font-weight: 800; color: #222; margin-bottom: 14px; } .ext-card { position: relative; } .ext-body { overflow: hidden; transition: max-height .5s ease; } .ext-body.ext-expanded { max-height: none !important; } .ext-content { font-size: 0.92rem; line-height: 2; color: #555; text-align: right; direction: rtl; } .ext-fade { position: absolute; bottom: 40px; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; transition: opacity .3s; } .ext-fade.ext-hidden { opacity: 0; } .ext-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: none; border: none; color: var(--primary, #007bff); font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: color .2s; } .ext-toggle:hover { color: #0056b3; } .ext-toggle-icon { font-size: 0.7rem; transition: transform .3s; } .ext-toggle.ext-open .ext-toggle-icon { transform: rotate(180deg); } .stx-section { } .stx-text { line-height: 1.9; margin: 0; } .skl-radials { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; } .skl-radial-item { text-align: center; } .skl-radial-wrap { position: relative; width: 120px; height: 120px; } .skl-radial-wrap svg { transform: rotate(-90deg); } .skl-radial-bg { fill: none; stroke: #eee; stroke-width: 8; } .skl-radial-bar { fill: none; stroke: var(--primary, #007bff); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease-out; } .skl-radial-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.2rem; color: #333; } .skl-radial-label { margin-top: 8px; font-weight: 600; font-size: 0.88rem; color: #555; } .pgm-section { } .pgm-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; } .pgm-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 2px solid #f0f0f0; } .pgm-title { font-size: 1.15rem; font-weight: 800; color: #222; margin: 0; } .pgm-viewall { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: #0fabc5; text-decoration: none; padding: 6px 16px; border: 1.5px solid #0fabc5; border-radius: 8px; transition: background .2s, color .2s; white-space: nowrap; } .pgm-viewall i { font-size: 9px; } .pgm-viewall:hover { background: #0fabc5; color: #fff; } .pgm-body { padding: 20px; } .cmp-section { } .cmp-title { font-size: 1.25rem; font-weight: 800; color: #222; text-align: center; margin-bottom: 24px; } .cmp-wrap { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow-x: auto; -webkit-overflow-scrolling: touch; } .cmp-table { width: 100%; border-collapse: collapse; min-width: 500px; } .cmp-table thead th { background: #f8f9fa; padding: 16px 18px; font-weight: 700; font-size: 0.9rem; color: #333; text-align: center; border-bottom: 2px solid #eee; white-space: nowrap; } .cmp-table thead th:first-child { text-align: right; background: #f0f2f5; } .cmp-table tbody td { padding: 14px 18px; border-bottom: 1px solid #f0f0f0; text-align: center; font-size: 0.88rem; color: #555; vertical-align: middle; } .cmp-feature { font-weight: 600; color: #333 !important; text-align: right !important; } .cmp-table tbody tr:last-child td { border-bottom: none; } .cmp-table tbody tr:hover { background: #fafbfc; } .cmp-check { color: #27ae60; font-size: 1.15rem; } .cmp-cross { color: #e0e0e0; font-size: 1.15rem; } .cmp-val { font-weight: 600; color: #333; } .scl-section { text-align: center; } .scl-title { font-size: 1.25rem; font-weight: 800; color: #222; margin-bottom: 24px; } .scl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .scl-btn { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; text-decoration: none; transition: transform .25s, box-shadow .25s; box-shadow: 0 3px 10px rgba(0,0,0,0.15); } .scl-btn:hover { transform: scale(1.15) translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); color: #fff; } .scl-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .scl-card { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 16px 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); text-decoration: none; color: #333; transition: box-shadow .25s, transform .25s; min-width: 200px; border: 1.5px solid #f0f0f0; } .scl-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-3px); color: #333; border-color: transparent; } .scl-card-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; flex-shrink: 0; } .scl-card-body { display: flex; flex-direction: column; } .scl-card-platform { font-weight: 700; font-size: 0.92rem; color: #222; } .scl-card-label { font-size: 0.78rem; color: #888; margin-top: 2px; } @media (max-width: 575px) { .scl-cards { gap: 10px; } .scl-card { min-width: 160px; padding: 12px 16px; } } .ctab-section { position: relative; border-radius: 14px; overflow: hidden; } .ctab-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; } .ctab-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ctab-content { position: relative; z-index: 2; text-align: center; padding: 60px 30px; } .ctab-title { font-size: 1.6rem; font-weight: 900; margin: 0 0 12px; } .ctab-text { font-size: 1rem; margin: 0 0 28px; opacity: 0.9; line-height: 1.7; } .ctab-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .ctab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 28px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: transform .2s, box-shadow .2s; } .ctab-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .ctab-btn-primary { background: #fff; color: #333; } .ctab-btn-secondary { background: transparent; border: 2px solid rgba(255,255,255,0.6); color: #fff; } .ctab-btn-secondary:hover { border-color: #fff; color: #fff; } .bls-section { text-align: center; } .bls-title { font-size: 0.95rem; font-weight: 600; color: #999; margin-bottom: 16px; letter-spacing: 0.5px; } .bls-grayscale .owl-item img { filter: grayscale(1); opacity: 0.5; transition: filter .3s, opacity .3s; } .bls-grayscale .owl-item:hover img { filter: grayscale(0); opacity: 1; } .map-section { } .map-title { font-size: 1.25rem; font-weight: 800; color: #222; margin-bottom: 16px; } .map-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .map-frame iframe { width: 100% !important; border: none; display: block; } [data-scroll-animate] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; } [data-scroll-animate].scroll-animated { opacity: 1; transform: translateY(0); } .hbn-section { position: relative; display: flex; align-items: center; border-radius: 14px; overflow: hidden; } .hbn-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; } .hbn-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .hbn-section .container { position: relative; z-index: 2; } .hbn-split { display: flex; align-items: center; gap: 40px; padding: 60px 0; } .hbn-text { flex: 1; } .hbn-title { font-size: 2.6rem; font-weight: 900; line-height: 1.4; margin: 0 0 16px; } .hbn-subtitle { font-size: 1.1rem; line-height: 1.8; margin: 0 0 28px; opacity: 0.9; } .hbn-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .hbn-btn { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 50px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: transform .2s, box-shadow .2s; } .hbn-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); } .hbn-btn-primary { background: #fff; color: #333; } .hbn-btn-primary:hover { color: #333; } .hbn-btn-secondary { background: transparent; border: 2px solid; } .hbn-image { flex: 0 0 40%; max-width: 40%; } .hbn-image img { width: 100%; height: auto; border-radius: 12px; } .hbn-centered .container { display: flex; justify-content: center; } .hbn-center-content { text-align: center; padding: 80px 20px; max-width: 700px; } .hbn-center-content .hbn-buttons { justify-content: center; } @media (max-width: 767.98px) { .hbn-split { flex-direction: column; text-align: center; padding: 40px 0; } .hbn-buttons { justify-content: center; } .hbn-image { flex: 0 0 100%; max-width: 80%; } .hbn-title { font-size: 1.8rem; } .hbn-center-content { padding: 50px 16px; } } .svc-header { text-align: center; margin-bottom: 28px; } .svc-title { font-size: 1.3rem; font-weight: 800; color: #222; margin: 0 0 6px; } .svc-subtitle { font-size: 0.9rem; color: #888; margin: 0; } .svc-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 28px 24px; text-align: center; height: 100%; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; } .svc-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1); transform: translateY(-4px); } .svc-icon { width: 64px; height: 64px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 18px; } .svc-card-title { font-size: 1.05rem; font-weight: 700; color: #222; margin: 0 0 10px; } .svc-card-desc { font-size: 0.88rem; color: #666; line-height: 1.7; flex: 1; margin: 0 0 14px; } .svc-price { font-weight: 800; font-size: 0.95rem; color: #333; margin-bottom: 14px; } .svc-btn { display: inline-block; padding: 10px 24px; border-radius: 8px; color: #fff; font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: filter .2s; margin-top: auto; } .svc-btn:hover { filter: brightness(1.1); color: #fff; } .cll-section { text-align: center; } .cll-title { font-size: 0.95rem; font-weight: 600; color: #999; margin-bottom: 18px; letter-spacing: 0.5px; } .cll-logo { display: flex; align-items: center; justify-content: center; height: 70px; padding: 8px; } .cll-logo img { max-height: 100%; max-width: 100%; object-fit: contain; transition: filter .3s, opacity .3s; } .cll-grayscale .cll-logo img { filter: grayscale(1); opacity: 0.45; } .cll-grayscale .cll-logo:hover img { filter: grayscale(0); opacity: 1; } .cll-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .cll-grid .cll-logo { width: 120px; } .cll-placeholder { width: 60px; height: 60px; border-radius: 12px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 1.2rem; } .tbc-heading { font-size: 1.25rem; font-weight: 800; color: #222; text-align: center; margin-bottom: 24px; } .tbc-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .tbc-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0 16px; margin: 0; border: none !important; border-bottom: 2px solid #f0f0f0 !important; list-style: none; -webkit-overflow-scrolling: touch; } .tbc-tabs::-webkit-scrollbar { display: none; } .tbc-tab.nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 16px 20px; font-size: 0.9rem; font-weight: 600; color: #888 !important; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: none !important; margin-bottom: -2px; transition: all .2s; white-space: nowrap; } .tbc-tab.nav-link i { font-size: 0.9rem; opacity: 0.7; transition: opacity .2s; } .tbc-tab.nav-link:hover { color: #555 !important; background: #f8f9fa !important; } .tbc-tab.nav-link:hover i { opacity: 1; } .tbc-tab.nav-link.active { color: var(--primary, #007bff) !important; border-bottom-color: var(--primary, #007bff) !important; } .tbc-tab.nav-link.active i { opacity: 1; } .tbc-content { padding: 28px 24px; } .tbc-pane-split { display: flex; gap: 28px; align-items: flex-start; } .tbc-text { flex: 1; font-size: 0.92rem; line-height: 2; color: #555; } .tbc-image { flex: 0 0 38%; } .tbc-image img { width: 100%; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .tbc-vertical { display: flex; min-height: 280px; } .tbc-tabs-vertical { display: flex; flex-direction: column; flex: 0 0 200px; padding: 16px 0; margin: 0; list-style: none; background: transparent; } .tbc-tabs-vertical .tbc-tab.nav-link { display: flex; align-items: center; gap: 8px; padding: 14px 20px; margin: 0; text-align: right; font-size: 0.9rem; font-weight: 600; color: #888 !important; background: none !important; border: none !important; border-right: 3px solid transparent !important; border-radius: 0 !important; transition: all .2s; } .tbc-tabs-vertical .tbc-tab.nav-link i { font-size: 0.9rem; opacity: 0.6; } .tbc-tabs-vertical .tbc-tab.nav-link:hover { color: #555 !important; } .tbc-tabs-vertical .tbc-tab.nav-link:hover i { opacity: 0.8; } .tbc-tabs-vertical .tbc-tab.nav-link.active { color: var(--primary, #007bff) !important; border-right-color: var(--primary, #007bff) !important; font-weight: 700; } .tbc-tabs-vertical .tbc-tab.nav-link.active i { opacity: 1; } .tbc-content-vertical { flex: 1; padding: 28px 28px; background: #f8f9fb; border-radius: 0 12px 12px 0; } @media (max-width: 767.98px) { .tbc-tabs { padding: 0; } .tbc-content { padding: 20px 16px; } .tbc-vertical { flex-direction: column; } .tbc-tabs-vertical { flex-direction: row; flex: none; overflow-x: auto; padding: 0; } .tbc-tabs-vertical .tbc-tab.nav-link { border-right: none !important; border-bottom: 3px solid transparent !important; white-space: nowrap; padding: 12px 16px; } .tbc-tabs-vertical .tbc-tab.nav-link.active { border-bottom-color: var(--primary, #007bff) !important; border-right-color: transparent !important; } .tbc-content-vertical { padding: 20px 16px; border-radius: 0 0 12px 12px; } .tbc-pane-split { flex-direction: column; } .tbc-image { flex: none; } } .btt-btn { position: fixed; bottom: 24px; left: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--primary, #007bff); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.2); z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .3s, visibility .3s, transform .3s, background .2s; } .btt-btn.btt-visible { opacity: 1; visibility: visible; transform: translateY(0); } .btt-btn:hover { background: var(--primary-dark, #0056b3); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .admin-edit-btn { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: #333; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 998; transition: background .2s, transform .2s; } .admin-edit-btn:hover { background: #7367f0; color: #fff; transform: scale(1.1); } .subcategories-row { padding: 12px 0; overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .subcategories-row::-webkit-scrollbar { display: none; } .subcategory-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff; border: 1.5px solid #eee; border-radius: 20px; text-decoration: none; color: #555; font-size: 0.82rem; font-weight: 600; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; flex-shrink: 0; } .subcategory-badge:hover { border-color: var(--primary, #007bff); color: var(--primary, #007bff); background: #f8fbff; } .subcategory-badge img { border-radius: 50%; } .pd-crumb { display:flex; align-items:center; flex-wrap:wrap; gap:0; padding:8px 0; font-size:12px; color:#999; } .pd-crumb a { color:#888; transition:color .2s; } .pd-crumb a:hover { color:var(--primary); } .pd-crumb__sep, .cp-crumb__sep { display: inline-block !important; width: 10px; height: 10px; margin: 0 8px; color: transparent !important; font-size: 0 !important; text-indent: -9999px; overflow: hidden; vertical-align: middle; opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 3l-3 3 3 3' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .pd-crumb__sep::before, .cp-crumb__sep::before { content: '' !important; display: none !important; } .pd-crumb__current { color:#444; font-weight:500; } .pd-skeleton { padding:30px 0; } .pd-skeleton__img { width:100%; padding-top:100%; border-radius:16px; background:#f0f0f0; animation:pd-pulse 1.5s infinite; } .pd-skeleton__line { border-radius:8px; background:#f0f0f0; animation:pd-pulse 1.5s infinite; } @keyframes pd-pulse { 0%,100%{opacity:1} 50%{opacity:.5} } .pd-main { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:20px 0 40px; align-items:start; } .pd-gallery { position:relative; background:#fff; border-radius:16px; padding:16px; border:1px solid #f0f0f0; overflow:hidden; min-width:0; } .pd-gallery__main { border-radius:12px; overflow:hidden; background:#fafbfc; display:flex; align-items:center; justify-content:center; min-height:400px; } .pd-gallery__main img { width:100%; height:auto; max-height:520px; max-width:100%; object-fit:contain; display:block; cursor:zoom-in; transition:transform .3s; } .pd-gallery__trigger { display:flex; align-items:center; justify-content:center; width:100%; background:none; border:none; padding:0; cursor:zoom-in; } .pd-gallery__empty { display:flex; align-items:center; justify-content:center; min-height:400px; color:#ddd; font-size:4rem; } .pd-badge { position:absolute; z-index:10; padding:4px 10px; border-radius:8px; font-size:12px; font-weight:700; line-height:1.4; } .pd-badge--discount { top:24px; right:24px; background:#ef4444; color:#fff; } .pd-badge--discount small { display:block; font-size:9px; font-weight:400; } .pd-badge--out { top:24px; right:24px; background:#6b7280; color:#fff; } .pd-thumbs { display:flex; gap:8px; margin-top:14px; overflow-x:auto; overflow-y:hidden; padding:4px 0; max-width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .pd-thumb { width:72px; height:72px; border-radius:10px; overflow:hidden; border:2px solid transparent; cursor:pointer; flex-shrink:0; padding:2px; background:#f9f9f9; transition:all .2s; } .pd-thumb.active { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); } .pd-thumb:hover { border-color:var(--primary-light); } .pd-thumb img { width:100%; height:100%; object-fit:cover; border-radius:8px; } .pd-gallery__actions { position:absolute; top:24px; left:24px; display:flex; flex-direction:column; gap:8px; z-index:10; } .pd-icon-btn { width:38px; height:38px; border-radius:10px; border:none; background:rgba(255,255,255,.85); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; font-size:16px; color:#555; cursor:pointer; transition:all .2s; } .pd-icon-btn:hover { background:var(--primary-light); color:var(--primary); } .pd-icon-btn--liked { color:#ef4056 !important; background:rgba(239,64,86,.08) !important; } .pd-icon-btn--liked:hover { background:rgba(239,64,86,.15) !important; } .pd-info { display:flex; flex-direction:column; gap:0; } .pd-title { font-size:20px; font-weight:700; color:#111; line-height:1.6; margin:0; } .pd-title-en { font-size:13px; color:#999; margin:4px 0 0; direction:ltr; text-align:right; } .pd-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .pd-meta__tag { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:6px; background:#f5f5f5; font-size:12px; color:#666; transition:all .2s; } .pd-meta__tag:hover { background:var(--primary-light); color:var(--primary); } .pd-meta__tag i { font-size:11px; color:#aaa; } .pd-specs-quick { margin-top:20px; background:#fafbfc; border-radius:12px; padding:16px 18px; border:1px solid #f0f0f0; } .pd-spec-row { display:flex; align-items:baseline; gap:8px; padding:6px 0; font-size:13px; } .pd-spec-row + .pd-spec-row { border-top:1px dashed #eee; } .pd-spec-row__key { color:#888; min-width:100px; flex-shrink:0; } .pd-spec-row__val { color:#333; font-weight:500; } .pd-specs-quick__more { display:inline-flex; align-items:center; gap:4px; margin-top:8px; border:none; background:none; color:var(--primary); font-size:12px; font-weight:600; cursor:pointer; padding:0; } .pd-specs-quick__more:hover { gap:8px; } .pd-options { margin-top:20px; } .pd-opt-group { margin-bottom:16px; } .pd-opt-group__label { display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:8px; } .pd-opt-group__values { display:flex; flex-wrap:wrap; gap:8px; } .pd-opt { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1.5px solid #e5e5e5; border-radius:10px; font-size:13px; color:#444; cursor:pointer; transition:all .2s; background:#fff; } .pd-opt:hover { border-color:var(--primary-light); } .pd-opt--active { border-color:var(--primary) !important; background:var(--primary-light); color:var(--primary); font-weight:600; } .pd-opt--disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; } .pd-opt__swatch { width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #ddd; flex-shrink:0; } .pd-opt--active .pd-opt__swatch { box-shadow:0 0 0 2px var(--primary); } .pd-opt__price { color:#888; font-size:11px; } .pd-opt-radio-list { display:flex; flex-direction:column; gap:8px; } .pd-opt-radio { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px solid #e5e5e5; border-radius:10px; cursor:pointer; transition:all .15s; background:#fff; } .pd-opt-radio:hover { border-color:#cbd5e1; background:#f9fafb; } .pd-opt-radio input[type="radio"] { display:none; } .pd-opt-radio__dot { width:18px; height:18px; border:2px solid #cbd5e1; border-radius:50%; flex-shrink:0; position:relative; transition:all .15s; } .pd-opt-radio__dot::after { content:''; position:absolute; inset:3px; border-radius:50%; background:transparent; transition:background .15s; } .pd-opt-radio--active { border-color:var(--primary); background:#f8f9ff; } .pd-opt-radio--active .pd-opt-radio__dot { border-color:var(--primary); } .pd-opt-radio--active .pd-opt-radio__dot::after { background:var(--primary); } .pd-opt-radio__label { font-size:13.5px; color:#333; flex:1; } .pd-opt-radio__price { font-size:11.5px; color:#16a34a; font-weight:600; background:#dcfce7; padding:2px 8px; border-radius:6px; } .pd-opt-radio--disabled { opacity:.5; cursor:not-allowed; background:#f5f5f5; } .pd-opt-radio--disabled:hover { border-color:#e5e5e5; background:#f5f5f5; } .pd-opt-select { width:100%; padding:10px 14px; border:1.5px solid #e5e5e5; border-radius:10px; font-size:13.5px; color:#333; background:#fff; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:left 14px center; padding-left:40px; cursor:pointer; transition:border-color .15s; } .pd-opt-select:focus { outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.15); } .pd-opt-select:hover { border-color:#cbd5e1; } .pd-buy { margin-top:24px; background:#fff; border:1px solid #f0f0f0; border-radius:16px; padding:20px; position:relative; transition:opacity .2s; } .pd-buy--loading { opacity:.5; pointer-events:none; } .pd-buy--loading::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; border:3px solid var(--primary-light); border-top-color:var(--primary); border-radius:50%; animation:pd-spin .6s linear infinite; z-index:5; } @keyframes pd-spin { to { transform:translate(-50%,-50%) rotate(360deg); } } .pd-buy__top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; } .pd-price { display:flex; flex-direction:column; gap:2px; } .pd-price__old { font-size:13px; color:#999; } .pd-price__now { font-size:22px; font-weight:800; color:#111; } .pd-price__now small { font-size:12px; font-weight:400; color:#888; margin-right:4px; } .pd-price__call { font-size:15px; font-weight:600; color:var(--primary); } .pd-price__diff { font-size:11px; color:#f59e0b; font-weight:500; background:#fffbeb; padding:2px 8px; border-radius:6px; } .pd-price-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .pd-price-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; } .pd-price-badge--free-ship { background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; } .pd-price-badge--box { background:#fff7ed; color:#ea580c; border:1px solid #fed7aa; } .pd-qty { display:inline-flex; align-items:center; gap:0; border:1px solid #e0e0e0; border-radius:10px; overflow:hidden; background:#fff; } .pd-qty__btn { width:38px; height:38px; border:none; background:#f9f9f9; display:flex; align-items:center; justify-content:center; font-size:13px; color:#555; cursor:pointer; transition:all .2s; flex-shrink:0; } .pd-qty__btn:hover:not(:disabled) { background:var(--primary-light,#eff6ff); color:var(--primary,#3b82f6); } .pd-qty__btn:disabled { opacity:.35; cursor:not-allowed; } .pd-qty__num { min-width:44px; text-align:center; font-size:15px; font-weight:700; color:#111; border-right:1px solid #eee; border-left:1px solid #eee; line-height:38px; padding:0 4px; } .pd-qty-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pd-qty__hint { font-size:11px; color:#999; } .pd-buy__btn { width:100%; padding:14px; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .3s; box-sizing:border-box; } .pd-buy__btn { background:var(--primary); color:#fff; } .pd-buy__btn:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.12); } .pd-buy__btn--outline { background:none; border:2px solid var(--primary); color:var(--primary); } .pd-buy__btn--outline:hover { background:var(--primary); color:#fff; } .pd-buy__btn--notify { background:#f59e0b; color:#fff; } .pd-buy__btn--notify:hover { background:#d97706; } .pd-purchase-dock { display:flex; flex-direction:column; gap:12px; } .pd-purchase-dock__action { position:relative; isolation:isolate; } .pd-purchase-add { position:relative; width:100%; min-height:66px; padding:9px 13px; display:grid; grid-template-columns:46px minmax(0,1fr) 34px; align-items:center; gap:11px; overflow:hidden; border:0; border-radius:16px; color:var(--on-primary,#fff); background: radial-gradient(circle at 12% 0%,rgba(255,255,255,.20),transparent 31%), linear-gradient(135deg,var(--primary),var(--primary-dark,var(--primary))); box-shadow:0 14px 30px color-mix(in srgb,var(--primary) 28%,transparent); cursor:pointer; font-family:inherit; text-align:right; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; } .pd-purchase-add::after { content:""; position:absolute; inset:-80% -30%; z-index:-1; background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.20) 50%,transparent 58%); transform:translateX(55%) rotate(8deg); transition:transform .55s ease; } .pd-purchase-add:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 18px 38px color-mix(in srgb,var(--primary) 36%,transparent); filter:saturate(1.06); } .pd-purchase-add:hover:not(:disabled)::after { transform:translateX(-48%) rotate(8deg); } .pd-purchase-add:active:not(:disabled) { transform:translateY(0) scale(.994); } .pd-purchase-add:disabled { opacity:.72; cursor:wait; } .pd-purchase-add__icon { width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.24); border-radius:13px; background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); font-size:20px; } .pd-purchase-add__copy { display:flex; flex-direction:column; gap:3px; min-width:0; } .pd-purchase-add__copy strong { font-size:16px; font-weight:850; letter-spacing:-.18px; } .pd-purchase-add__copy small { font-size:10.5px; font-weight:550; color:inherit; opacity:.78; } .pd-purchase-add__mark { width:30px; height:30px; display:flex; align-items:center; justify-content:center; justify-self:end; border-radius:50%; background:rgba(255,255,255,.94); color:var(--primary); font-size:22px; font-weight:800; line-height:1; } .pd-purchase-add__loading { grid-column:2 / 4; display:flex; align-items:center; gap:8px; font-weight:750; font-size:13px; } .pd-purchase-active { position:relative; min-height:68px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:14px; overflow:hidden; border:1px solid color-mix(in srgb,var(--primary) 36%,#dbe4ea); border-radius:16px; background: linear-gradient(100deg,color-mix(in srgb,var(--primary) 8%,#fff),#fff 58%); box-shadow:0 12px 30px rgba(15,23,42,.075); animation:pdPurchaseIn .28s ease-out both; } .pd-purchase-active::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:linear-gradient(180deg,var(--primary),var(--primary-dark,var(--primary))); } @keyframes pdPurchaseIn { from { opacity:0; transform:translateY(5px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } } .pd-purchase-active__context { display:flex; align-items:center; gap:10px; min-width:0; } .pd-purchase-active__icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:12px; color:var(--primary); background:color-mix(in srgb,var(--primary) 11%,#fff); font-size:18px; } .pd-purchase-active__copy { display:flex; flex-direction:column; gap:3px; min-width:0; } .pd-purchase-active__copy small { color:#64748b; font-size:10px; font-weight:650; } .pd-purchase-active__copy strong { color:#172033; font-size:13.5px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pd-purchase-stepper { height:44px; display:grid; grid-template-columns:42px 44px 42px; align-items:stretch; flex-shrink:0; overflow:hidden; border:1px solid #dce4ea; border-radius:13px; background:#fff; box-shadow:0 4px 12px rgba(15,23,42,.055); } .pd-purchase-stepper__btn, .pd-product-basket__stepper button { border:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; transition:background .16s ease,color .16s ease,transform .16s ease; } .pd-purchase-stepper__btn span, .pd-product-basket__stepper button span { display:block; font-size:24px; font-weight:800; line-height:1; transform:translateY(-1px); } .pd-purchase-stepper__btn:hover:not(:disabled), .pd-product-basket__stepper button:hover:not(:disabled) { transform:scale(1.04); } .pd-purchase-stepper__btn:disabled, .pd-product-basket__stepper button:disabled { opacity:.42; cursor:wait; } .pd-purchase-stepper__btn--minus { color:#dc2626; border-inline-end:1px solid #edf1f4; } .pd-purchase-stepper__btn--minus:hover:not(:disabled) { background:#fef2f2; } .pd-purchase-stepper__btn--plus { color:var(--primary); border-inline-start:1px solid #edf1f4; } .pd-purchase-stepper__btn--plus:hover:not(:disabled) { background:var(--primary-light,#eff6ff); } .pd-purchase-stepper__count { display:flex; align-items:center; justify-content:center; color:#111827; font-size:17px; font-weight:900; } .pd-product-basket { overflow:hidden; border:1px solid #e1e8ed; border-radius:16px; background:linear-gradient(180deg,#fbfcfd,#f7f9fa); box-shadow:0 8px 24px rgba(15,23,42,.045); animation:pdPurchaseIn .3s .04s ease-out both; } .pd-product-basket__head { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #e9eef1; background:rgba(255,255,255,.72); } .pd-product-basket__head > div:first-child { display:flex; flex-direction:column; gap:1px; } .pd-product-basket__eyebrow { color:#8491a3; font-size:9.5px; font-weight:650; } .pd-product-basket__head strong { color:#172033; font-size:12.5px; font-weight:850; } .pd-product-basket__head-end { display:flex; align-items:center; gap:9px; } .pd-product-basket__total { padding:3px 8px; border-radius:20px; color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,#fff); font-size:10.5px; font-weight:800; } .pd-product-basket__head a { color:var(--primary); font-size:10.5px; font-weight:800; text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--primary) 32%,transparent); } .pd-product-basket__head a:hover { color:var(--primary-dark,var(--primary)); } .pd-product-basket__items { display:flex; flex-direction:column; } .pd-product-basket__item { position:relative; padding:11px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #e9eef1; transition:background .16s ease; } .pd-product-basket__item:last-child { border-bottom:0; } .pd-product-basket__item:hover { background:rgba(255,255,255,.82); } .pd-product-basket__item--current { background:color-mix(in srgb,var(--primary) 5%,#fff); } .pd-product-basket__item--current::before { content:""; position:absolute; inset-block:9px; inset-inline-start:0; width:3px; border-radius:0 3px 3px 0; background:var(--primary); } .pd-product-basket__info { display:flex; flex-direction:column; gap:5px; min-width:0; } .pd-product-basket__title { display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .pd-product-basket__title strong { color:#1f2937; font-size:12.5px; font-weight:850; } .pd-product-basket__title > span { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:20px; color:#15803d; background:#dcfce7; font-size:8.5px; font-weight:750; } .pd-product-basket__title > span i { font-size:4px; } .pd-product-basket__chips { display:flex; flex-wrap:wrap; gap:4px; } .pd-product-basket__chips span { padding:2px 7px; border:1px solid #e3e8ec; border-radius:6px; background:#fff; color:#536174; font-size:9.5px; font-weight:650; } .pd-product-basket__price { color:#7b8798; font-size:10px; font-weight:650; } .pd-product-basket__stepper { height:36px; display:grid; grid-template-columns:34px 36px 34px; align-items:stretch; flex-shrink:0; overflow:hidden; border:1px solid #dce4ea; border-radius:10px; background:#fff; } .pd-product-basket__stepper button:first-child { color:#dc2626; border-inline-end:1px solid #edf1f4; } .pd-product-basket__stepper button:first-child:hover:not(:disabled) { background:#fef2f2; } .pd-product-basket__stepper button:last-child { color:var(--primary); border-inline-start:1px solid #edf1f4; } .pd-product-basket__stepper button:last-child:hover:not(:disabled) { background:var(--primary-light,#eff6ff); } .pd-product-basket__stepper button span { font-size:19px; } .pd-product-basket__stepper strong { display:flex; align-items:center; justify-content:center; color:#172033; font-size:13px; font-weight:900; } @media (max-width:575.98px) { .pd-purchase-add { min-height:62px; grid-template-columns:42px minmax(0,1fr) 30px; border-radius:14px; } .pd-purchase-add__icon { width:42px; height:42px; border-radius:11px; } .pd-purchase-active { align-items:stretch; flex-direction:column; gap:9px; } .pd-purchase-stepper { width:100%; grid-template-columns:1fr 58px 1fr; } .pd-product-basket__head { align-items:flex-start; } .pd-product-basket__head-end { align-items:flex-end; flex-direction:column; gap:4px; } .pd-product-basket__item { align-items:flex-end; } } .pd-buy__unavailable { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#fef2f2; border:1px solid #fecaca; border-radius:10px; margin-bottom:12px; font-size:13px; color:#991b1b; } .pd-buy__unavailable i { font-size:16px; color:#ef4444; flex-shrink:0; } .pd-cart-lines { margin-top:12px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:14px; overflow:hidden; } .pd-cart-lines__head { display:flex; align-items:center; gap:7px; padding:10px 14px; font-size:12px; color:#16a34a; font-weight:700; border-bottom:1px solid #dcfce7; } .pd-cart-lines__head i { font-size:15px; } .pd-cart-lines__go { margin-inline-start:auto; font-size:11px; color:var(--primary); font-weight:700; display:flex; align-items:center; gap:3px; text-decoration:none; white-space:nowrap; } .pd-cart-lines__go:hover { color:var(--primary-dark); } .pd-cart-line { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid #ecfdf5; } .pd-cart-line:last-child { border-bottom:none; } .pd-cart-line__info { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; } .pd-cart-line__top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .pd-cart-line__qty { font-size:12px; font-weight:700; color:#fff; background:#16a34a; padding:1px 7px; border-radius:20px; white-space:nowrap; } .pd-cart-line__price { font-size:13px; font-weight:800; color:#111; } .pd-cart-line__price small { font-size:10px; font-weight:500; color:#777; margin-right:2px; } .pd-cart-line__opts { display:flex; flex-wrap:wrap; gap:4px; } .pd-cart-line__opt { font-size:11px; color:#15803d; background:#dcfce7; padding:2px 8px; border-radius:4px; white-space:nowrap; } .pd-cart-line__del { width:28px; height:28px; border-radius:6px; border:none; flex-shrink:0; background:transparent; color:#ef4444; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition:all .15s; margin-top:2px; } .pd-cart-line__del:hover { background:#fef2f2; } .pd-social-proof { display:flex; align-items:center; gap:8px; padding:8px 14px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; font-size:13px; color:#166534; margin-bottom:12px; } .pd-social-proof i { font-size:14px; } .pd-rental-terms { background:#fffbeb; border:1px solid #fde68a; border-radius:12px; padding:14px; margin-bottom:14px; } .pd-rental-terms__body { font-size:12px; color:#78350f; line-height:1.7; max-height:120px; overflow-y:auto; margin-bottom:10px; white-space:pre-line; } .pd-rental-terms__accept { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#92400e; cursor:pointer; } .pd-rental-terms__accept input[type="checkbox"], .pd-rental-terms__accept input[type='checkbox'] { display:inline-block !important; width:18px; height:18px; accent-color:#d97706; flex-shrink:0; cursor:pointer; margin:0; } .pd-buy__toggle { display:flex; align-items:center; gap:8px; font-size:13px; color:#555; cursor:pointer; } .pd-buy__toggle input[type="checkbox"] { accent-color:var(--primary,#3b82f6); } .pd-trust { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid #f5f5f5; } .pd-trust__item { display:flex; align-items:center; gap:6px; font-size:12px; color:#666; } .pd-trust__item i { font-size:14px; color:#aaa; } .pd-trust__item--warn { color:#ef4444; } .pd-trust__item--warn i { color:#ef4444; } .pd-trust__item--ok { color:#10b981; } .pd-trust__item--ok i { color:#10b981; } .pd-short-desc { margin-top:20px; font-size:13px; color:#666; line-height:1.9; padding:16px; background:#fafbfc; border-radius:12px; border:1px solid #f0f0f0; } .pd-sections { margin-top:40px; margin-bottom:48px; } .pd-snav { display:flex; gap:6px; padding:10px 0; background:#fff; border-bottom:1px solid #f0f0f0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; z-index:100; transition:box-shadow .2s; } .pd-snav::-webkit-scrollbar { display:none; } .pd-snav__link { display:flex; align-items:center; gap:7px; padding:10px 20px; border:1.5px solid #e8e8e8; border-radius:12px; background:#fff; font-size:13px; font-weight:600; color:#666; white-space:nowrap; transition:all .25s; text-decoration:none; } .pd-snav__link:hover { border-color:var(--primary-light); color:var(--primary); background:var(--primary-light); } .pd-snav__link--active { border-color:var(--primary); color:var(--primary); background:var(--primary-light); box-shadow:0 2px 8px rgba(0,0,0,.04); } .pd-snav__link i { font-size:15px; } .pd-snav__count { min-width:20px; height:20px; border-radius:10px; background:var(--primary); color:#fff; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; } .pd-section { background:#fff; border:1px solid #f0f0f0; border-radius:16px; padding:28px; margin-top:20px; } .pd-section-heading { font-size:16px; font-weight:700; color:#111; display:flex; align-items:center; gap:8px; margin:0 0 20px; padding-bottom:12px; border-bottom:2px solid var(--primary-light); } .pd-section-heading i { color:var(--primary); font-size:18px; } .pd-section-title { font-size:15px; font-weight:700; color:#111; display:flex; align-items:center; gap:8px; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid #f0f0f0; } .pd-section-title i { color:var(--primary); font-size:17px; } .pd-desc-section { margin-top:28px; } .pd-key-features { margin-bottom:28px; } .pd-key-features__grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; } .pd-key-feature { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fafbfc; border:1px solid #f0f0f0; border-radius:10px; font-size:13px; transition:border-color .2s; } .pd-key-feature:hover { border-color:var(--primary-light); } .pd-key-feature__label { color:#888; min-width:80px; flex-shrink:0; font-weight:500; } .pd-key-feature__value { color:#222; font-weight:600; } .pd-desc { font-size:14px; line-height:2.1; color:#444; } .pd-desc img { max-width:100%; height:auto; border-radius:12px; margin:16px 0; } .pd-desc h2,.pd-desc h3,.pd-desc h4 { margin-top:24px; margin-bottom:12px; color:#111; font-weight:700; } .pd-desc p { margin-bottom:12px; } .pd-desc ul,.pd-desc ol { padding-right:20px; margin-bottom:12px; } .pd-desc li { margin-bottom:6px; } .pd-pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; } .pd-pros,.pd-cons { padding:20px; border-radius:14px; } .pd-pros { background:linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border:1px solid #bbf7d0; } .pd-cons { background:linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border:1px solid #fecaca; } .pd-pros h5,.pd-cons h5 { font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; } .pd-pros h5 { color:#15803d; } .pd-cons h5 { color:#b91c1c; } .pd-pros h5 i { font-size:18px; } .pd-cons h5 i { font-size:18px; } .pd-pros ul,.pd-cons ul { list-style:none; padding:0; margin:0; } .pd-pros li,.pd-cons li { padding:7px 0; font-size:13px; color:#555; padding-right:20px; position:relative; } .pd-pros li + li,.pd-cons li + li { border-top:1px dashed rgba(0,0,0,.06); } .pd-pros li::before { content:'✓'; position:absolute; right:0; color:#16a34a; font-weight:800; font-size:14px; } .pd-cons li::before { content:'✗'; position:absolute; right:0; color:#dc2626; font-weight:800; font-size:14px; } .pd-spec-group { margin-bottom:28px; } .pd-spec-group__title { font-size:15px; font-weight:700; color:#111; padding:10px 16px; background:var(--primary-light); border-radius:10px; margin-bottom:4px; display:flex; align-items:center; gap:8px; border-right:3px solid var(--primary); } .pd-spec-table { width:100%; border-collapse:separate; border-spacing:0; margin-top:0; } .pd-spec-table tr:nth-child(even) { background:#fafbfc; } .pd-spec-table tr:hover { background:#f5f5f7; } .pd-spec-table th { width:200px; padding:12px 16px; font-size:13px; font-weight:600; color:#666; text-align:right; vertical-align:top; border-bottom:1px solid #f0f0f0; } .pd-spec-table td { padding:12px 16px; font-size:13px; color:#222; font-weight:500; border-bottom:1px solid #f0f0f0; } .pd-spec-table tr:last-child th, .pd-spec-table tr:last-child td { border-bottom:none; } .pd-reviews-list { margin-bottom:24px; } .pd-review { padding:20px; margin-bottom:12px; background:#fafbfc; border-radius:14px; border:1px solid #f0f0f0; transition:border-color .2s; } .pd-review:hover { border-color:#e0e0e0; } .pd-review__head { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .pd-review__avatar { width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, var(--primary-light), var(--primary)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:700; flex-shrink:0; } .pd-review__info { flex:1; } .pd-review__info strong { display:block; font-size:13px; color:#222; } .pd-review__date { font-size:11px; color:#999; } .pd-review__rating { display:flex; align-items:center; gap:8px; flex-shrink:0; } .pd-review__score { font-size:18px; font-weight:800; color:#f59e0b; } .pd-review__stars { display:flex; gap:1px; font-size:10px; } .pd-review__title { font-size:14px; font-weight:700; color:#111; margin:0 0 6px; } .pd-review__body { font-size:13px; color:#555; line-height:1.9; margin:0 0 8px; } .pd-review__feedback { display:flex; flex-direction:column; gap:6px; margin-top:10px; } .pd-review__tags { display:flex; flex-wrap:wrap; gap:6px; } .pd-review__tags span { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:8px; font-size:11px; font-weight:500; } .pd-review__tags--pro span { background:#dcfce7; color:#15803d; } .pd-review__tags--con span { background:#fee2e2; color:#b91c1c; } .pd-review__tags i { font-size:12px; } .pd-review__rec { color:#10b981; font-size:12px; display:flex; align-items:center; gap:5px; margin-top:10px; font-weight:600; padding:8px 14px; background:#f0fdf4; border-radius:8px; } .pd-review-form { border:1px solid #e8e8e8; border-radius:16px; overflow:hidden; } .pd-review-form__header { display:flex; align-items:center; gap:12px; padding:18px 24px; background:linear-gradient(135deg, #fafbfc, #f0f0f2); border-bottom:1px solid #e8e8e8; } .pd-review-form__header i { font-size:22px; color:var(--primary); } .pd-review-form__header h6 { font-size:14px; font-weight:700; color:#222; margin:0; } .pd-review-form__header p { font-size:11px; color:#999; margin:2px 0 0; } .pd-review-form__rating { display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid #f0f0f0; background:#fff; } .pd-review-form__rating-label { font-size:13px; font-weight:600; color:#555; white-space:nowrap; } .pd-stars { display:flex; gap:4px; direction:ltr; } .pd-stars label { cursor:pointer; font-size:26px; color:#e5e7eb; transition:color .15s, transform .15s; } .pd-stars label.active { color:#f59e0b; } .pd-stars:hover label, .pd-stars:hover label.active { color:#e5e7eb; } .pd-stars label:hover, .pd-stars label:hover ~ label { color:#fbbf24 !important; transform:scale(1.1); } .pd-review-form__rating-text { font-size:13px; color:var(--primary); font-weight:600; min-width:40px; } .pd-review-form__fields { display:grid; grid-template-columns:1fr; gap:0; } .pd-review-form__field { padding:14px 24px; border-bottom:1px solid #f5f5f5; } .pd-review-form__field label { display:block; font-size:12px; font-weight:600; color:#666; margin-bottom:6px; } .pd-review-form__field input, .pd-review-form__field textarea { width:100%; border:1px solid #e8e8e8; border-radius:10px; padding:10px 14px; font-size:13px; font-family:inherit; transition:border-color .2s; background:#fafbfc; resize:vertical; } .pd-review-form__field input:focus, .pd-review-form__field textarea:focus { border-color:var(--primary); outline:none; background:#fff; } .pd-field-error { display:block; color:#ef4444; font-size:11px; margin-top:4px; } .pd-review-form__proscons { display:grid; grid-template-columns:1fr 1fr; gap:0; } .pd-review-form__pc-col { padding:14px 24px; border-bottom:1px solid #f5f5f5; } .pd-review-form__pc-col:first-child { border-left:1px solid #f5f5f5; } [dir="rtl"] .pd-review-form__pc-col:first-child { border-left:none; border-right:1px solid #f5f5f5; } .pd-review-form__pc-col label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; margin-bottom:6px; } .pd-review-form__pc-col--pro label { color:#16a34a; } .pd-review-form__pc-col--con label { color:#dc2626; } .pd-review-form__pc-col input { width:100%; border:1px solid #e8e8e8; border-radius:10px; padding:10px 14px; font-size:13px; font-family:inherit; background:#fafbfc; transition:border-color .2s; } .pd-review-form__pc-col input:focus { border-color:var(--primary); outline:none; background:#fff; } .pd-review-form__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; background:#fafbfc; flex-wrap:wrap; } .pd-review-form__recommend { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:#555; } .pd-review-form__recommend input { accent-color:var(--primary); width:16px; height:16px; } .pd-review-form__recommend i { color:#10b981; font-size:16px; } .pd-review-form__submit { padding:10px 28px; border:none; border-radius:10px; background:var(--primary); color:#fff; font-size:13px; font-weight:700; cursor:pointer; transition:all .25s; display:flex; align-items:center; gap:6px; } .pd-review-form__submit:hover { background:var(--primary-dark); transform:translateY(-1px); } .pd-review-form__submit:disabled { opacity:.6; cursor:not-allowed; } .pd-review-form__login { padding:32px 24px; text-align:center; } .pd-review-form__login p { font-size:13px; color:#888; margin-bottom:12px; } .pd-review-form__login-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:10px; background:var(--primary); color:#fff; font-size:13px; font-weight:600; transition:all .25s; } .pd-review-form__login-btn:hover { background:var(--primary-dark); color:#fff; } .pd-empty--sm { padding:28px 20px; } .pd-empty--sm i { font-size:2rem; } .pd-qa-form { margin-bottom:24px; } .pd-qa-form__input { width:100%; border:1px solid #e5e5e5; border-radius:10px; padding:10px 14px; font-size:13px; font-family:inherit; background:#fafbfc; resize:vertical; transition:border-color .2s; } .pd-qa-form__input:focus { border-color:var(--primary); outline:none; background:#fff; } .pd-qa-form__btn { padding:10px 20px; border:none; border-radius:10px; background:var(--primary); color:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; white-space:nowrap; display:flex; align-items:center; gap:6px; } .pd-qa-form__btn:hover { background:var(--primary-dark); } .pd-qa { padding:20px; margin-bottom:12px; background:#fafbfc; border-radius:14px; border:1px solid #f0f0f0; } .pd-qa__q,.pd-qa__a { display:flex; gap:14px; align-items:flex-start; } .pd-qa__a { margin-top:16px; padding:14px; background:#fff; border-radius:10px; border:1px solid #e8f5e9; } .pd-qa__icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex-shrink:0; } .pd-qa__icon--q { background:linear-gradient(135deg, #dbeafe, #bfdbfe); color:#2563eb; } .pd-qa__icon--a { background:linear-gradient(135deg, #dcfce7, #bbf7d0); color:#16a34a; } .pd-qa p { margin:0; font-size:13px; color:#444; line-height:1.8; } .pd-qa small { font-size:11px; } .pd-login-msg { padding:20px; background:linear-gradient(135deg, #fafbfc, #f0f0f2); border-radius:14px; font-size:13px; color:#666; text-align:center; border:1px solid #e8e8e8; margin-bottom:20px; } .pd-login-msg a { color:var(--primary); font-weight:700; text-decoration:underline; } .pd-login-msg a:hover { color:var(--primary-dark); } .pd-empty { text-align:center; padding:48px 20px; color:#ccc; } .pd-empty i { font-size:3rem; opacity:.5; } .pd-empty p { margin-top:12px; font-size:13px; color:#999; } .pd-related { margin:32px 0; } .pd-related__title { font-size:16px; font-weight:700; color:#222; display:flex; align-items:center; gap:8px; margin-bottom:16px; } .pd-related__title i { color:var(--primary); } .pd-page { --pd-bg: var(--background, #fff); --pd-surface: var(--surface, #fff); --pd-surface-soft: var(--surface-alt, var(--surface-2, #f8fafc)); --pd-text: var(--text, #111827); --pd-muted: var(--text-muted, #6b7280); --pd-border: var(--border-color, #e5e7eb); } .pd-page--dark { color: var(--pd-text); background: radial-gradient(circle at 12% 8%, rgba(var(--primary-rgb, 79,70,229), .18), transparent 28%), var(--pd-bg); padding-bottom: 48px; } .pd-page--dark .pd-crumb, .pd-page--dark .pd-crumb a, .pd-page--dark .pd-crumb__current, .pd-page--dark .pd-title, .pd-page--dark .pd-title-en, .pd-page--dark .pd-opt-group__label, .pd-page--dark .pd-buy__label, .pd-page--dark .pd-section-heading, .pd-page--dark .pd-section-title, .pd-page--dark .pd-related__title, .pd-page--dark .pd-price__now, .pd-page--dark .pd-price__now small, .pd-page--dark .pd-spec-row__val, .pd-page--dark .pd-key-feature__value, .pd-page--dark .pd-desc, .pd-page--dark .pd-desc h2, .pd-page--dark .pd-desc h3, .pd-page--dark .pd-desc h4, .pd-page--dark .pd-review__info strong, .pd-page--dark .pd-review__title, .pd-page--dark .pd-review__body, .pd-page--dark .pd-qa p, .pd-page--dark .pd-date-chip__num, .pd-page--dark .pd-date-chips__month, .pd-page--dark .pc__title, .pd-page--dark .pc__price, .pd-page--dark .pc__price small, .pd-page--dark .pc__brand, .pd-page--dark .pc__meta, .pd-page--dark .pc__label { color: var(--pd-text) !important; } .pd-page--dark .text-muted, .pd-page--dark .pd-meta__tag, .pd-page--dark .pd-spec-row__key, .pd-page--dark .pd-opt__price, .pd-page--dark .pd-opt-radio__price, .pd-page--dark .pd-buy__info-row, .pd-page--dark .pd-trust__item, .pd-page--dark .pd-short-desc, .pd-page--dark .pd-key-feature__label, .pd-page--dark .pd-review__date, .pd-page--dark .pd-review-form__header p, .pd-page--dark .pd-review-form__field label, .pd-page--dark .pd-review-form__rating-label, .pd-page--dark .pd-review-form__recommend, .pd-page--dark .pd-empty p, .pd-page--dark .pd-date-chip__day { color: var(--pd-muted) !important; } .pd-page--dark :is(.pd-gallery, .pd-buy, .pd-section, .pd-review-form, .pd-curriculum-chapter, .pc) { background: color-mix(in srgb, var(--pd-surface) 86%, transparent) !important; border-color: color-mix(in srgb, var(--pd-border) 72%, rgba(255,255,255,.18)) !important; box-shadow: 0 22px 70px rgba(0,0,0,.24) !important; } .pd-page--dark :is(.pd-gallery__main, .pd-specs-quick, .pd-short-desc, .pd-key-feature, .pd-review, .pd-qa, .pd-qa__a, .pd-login-msg, .pd-review-form__header, .pd-review-form__rating, .pd-review-form__field, .pd-review-form__pc-col, .pd-review-form__footer, .pd-snav, .pd-snav__link, .pd-meta__tag, .pd-opt, .pd-opt-radio, .pd-opt-select, .pd-buy__select, .pd-buy__input, .pd-buy__locked-value, .pd-date-chip, .pd-date-chips__arrow, .pd-thumb, .pc__body) { background: color-mix(in srgb, var(--pd-surface-soft) 72%, transparent) !important; border-color: color-mix(in srgb, var(--pd-border) 68%, rgba(255,255,255,.16)) !important; color: var(--pd-text) !important; } .pd-page--dark :is(.pd-review-form__field input, .pd-review-form__field textarea, .pd-review-form__pc-col input, .pd-qa-form__input, .pd-buy__select, .pd-buy__input, .pd-opt-select) { background: color-mix(in srgb, var(--pd-bg) 78%, transparent) !important; border-color: color-mix(in srgb, var(--pd-border) 70%, rgba(255,255,255,.18)) !important; color: var(--pd-text) !important; } .pd-page--dark :is(.pd-review-form__field input, .pd-review-form__field textarea, .pd-review-form__pc-col input, .pd-qa-form__input, .pd-buy__select, .pd-buy__input, .pd-opt-select)::placeholder { color: color-mix(in srgb, var(--pd-muted) 76%, transparent) !important; } .pd-page--dark option { background: var(--pd-bg); color: var(--pd-text); } .pd-page--dark .pd-icon-btn { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; color: var(--pd-text) !important; } .pd-page--dark .pd-icon-btn:hover, .pd-page--dark .pd-snav__link:hover, .pd-page--dark .pd-snav__link--active, .pd-page--dark .pd-opt--active, .pd-page--dark .pd-opt-radio--active { background: color-mix(in srgb, var(--primary) 24%, transparent) !important; border-color: color-mix(in srgb, var(--primary) 72%, white) !important; color: var(--pd-text) !important; } .pd-page--dark .pd-buy__btn, .pd-page--dark .pd-review-form__submit, .pd-page--dark .pd-qa-form__btn, .pd-page--dark .pc__cta { background: var(--accent, var(--primary)) !important; color: var(--on-primary, #fff) !important; border: 0 !important; } .pd-page--dark :is(.pd-purchase-active,.pd-product-basket,.pd-product-basket__head,.pd-product-basket__item,.pd-purchase-stepper,.pd-product-basket__stepper,.pd-product-basket__chips span) { background:color-mix(in srgb,var(--pd-surface-soft) 78%,transparent); border-color:rgba(255,255,255,.13); } .pd-page--dark :is(.pd-purchase-active__copy strong,.pd-purchase-stepper__count,.pd-product-basket__head strong,.pd-product-basket__title strong,.pd-product-basket__stepper strong) { color:var(--pd-text); } .pd-page--dark :is(.pd-purchase-active__copy small,.pd-product-basket__eyebrow,.pd-product-basket__price) { color:var(--pd-muted); } .pd-page--dark .pd-product-basket__item--current { background:color-mix(in srgb,var(--primary) 14%,transparent); } .pd-page--dark .pd-gallery__main img, .pd-page--dark .pc__img img { background: transparent; } .pd-page--dark .pd-spec-table tr:nth-child(even), .pd-page--dark .pd-spec-table tr:hover { background: rgba(255,255,255,.04) !important; } .pd-page--dark .pd-spec-table th, .pd-page--dark .pd-spec-table td, .pd-page--dark .pd-section-heading, .pd-page--dark .pd-section-title, .pd-page--dark .pd-review-form__field, .pd-page--dark .pd-review-form__pc-col, .pd-page--dark .pd-review-form__rating, .pd-page--dark .pd-review-form__footer, .pd-page--dark .pd-trust, .pd-page--dark .pd-cart-lines__item { border-color: rgba(255,255,255,.12) !important; } .pd-page--dark .pd-date-chip--off, .pd-page--dark .pd-slot-chip--booked, .pd-page--dark .pd-opt--disabled, .pd-page--dark .pd-opt-radio--disabled { opacity: .48; } .pd-page--dark .pd-slot-chip:not(.pd-slot-chip--selected) { background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.28) !important; color: #bbf7d0 !important; } .pd-page--dark .pd-slot-chip--booked { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.26) !important; color: #fecaca !important; } .pd-page--dark .pd-cart-lines, .pd-page--dark .pd-social-proof, .pd-page--dark .pd-review__rec { background: rgba(34,197,94,.10) !important; border-color: rgba(34,197,94,.24) !important; color: #bbf7d0 !important; } .pd-page--dark .pd-pros { background: rgba(34,197,94,.10) !important; border-color: rgba(34,197,94,.24) !important; } .pd-page--dark .pd-cons { background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.24) !important; } .pd-page--dark .pd-pros li, .pd-page--dark .pd-cons li { color: var(--pd-text) !important; } @media (max-width: 991px) { .pd-main { grid-template-columns:1fr; gap:24px; } .pd-gallery__main { min-height:280px; } .pd-gallery__main img { max-height:360px; } .pd-snav { gap:6px; } .pd-snav__link { padding:8px 14px; font-size:12px; } .pd-section { padding:20px; } } @media (max-width: 575px) { .pd-main { gap:16px; } .pd-title { font-size:17px; } .pd-gallery { padding:10px; } .pd-thumb { width:56px; height:56px; } .pd-gallery__main { min-height:220px; } .pd-gallery__main img { max-height:300px; } .pd-buy { padding:16px; } .pd-buy__top { flex-direction:column; align-items:stretch; } .pd-price__now { font-size:19px; } .pd-pros-cons { grid-template-columns:1fr; gap:12px; } .pd-spec-table th { width:120px; font-size:12px; } .pd-spec-table td { font-size:12px; } .pd-snav__link { padding:7px 12px; font-size:11px; border-radius:10px; } .pd-snav__link i { display:none; } .pd-section { padding:16px; margin-top:12px; } .pd-key-features__grid { grid-template-columns:1fr; } .pd-review { padding:14px; margin-bottom:8px; } .pd-review__rating { flex-direction:column; gap:2px; } .pd-qa { padding:14px; margin-bottom:8px; } .pd-review-form__proscons { grid-template-columns:1fr; } .pd-review-form__pc-col:first-child { border-left:none; border-right:none; } .pd-review-form__footer { flex-direction:column; align-items:stretch; } .pd-review-form__submit { justify-content:center; } .pd-review-form__header { padding:14px 16px; } .pd-review-form__rating { padding:12px 16px; } .pd-review-form__field { padding:12px 16px; } .pd-review-form__pc-col { padding:12px 16px; } .pd-review-form__footer { padding:14px 16px; } } .checkout-progress { display: flex; align-items: center; justify-content: center; gap: 0; padding: 20px 0; } .cp-step { display: flex; align-items: center; gap: 8px; } .cp-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; background: #eee; color: #999; flex-shrink: 0; } .cp-label { font-size: 0.85rem; font-weight: 600; color: #999; } .cp-active .cp-num { background: var(--primary, #007bff); color: #fff; } .cp-active .cp-label { color: #333; } .cp-done .cp-num { background: #27ae60; color: #fff; } .cp-done .cp-label { color: #27ae60; } .cp-line { width: 60px; height: 2px; background: #eee; margin: 0 12px; flex-shrink: 0; } .cp-line-done { background: #27ae60; } @media (max-width: 575px) { .cp-label { display: none; } .cp-line { width: 30px; } } .cart-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; } .cart-card-header { padding: 16px 20px; border-bottom: 1.5px solid #f0f0f0; display: flex; align-items: center; gap: 8px; } .cart-card-header h5 { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; } .cart-card-header i { color: var(--primary, #007bff); } .cart-badge { background: var(--primary, #007bff); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .cart-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; } .cart-item-border { border-bottom: 1.5px solid #f5f5f5; } .cart-item-img { width: 90px; height: 90px; border-radius: 10px; overflow: hidden; flex-shrink: 0; } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-img-placeholder { width: 100%; height: 100%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #ddd; font-size: 1.5rem; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-title { font-weight: 600; font-size: 0.92rem; color: #333; text-decoration: none; display: block; line-height: 1.5; margin-bottom: 4px; } .cart-item-title:hover { color: var(--primary, #007bff); } .cart-item-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .cart-item-options span { font-size: 0.78rem; color: #888; background: #f5f5f5; padding: 2px 8px; border-radius: 4px; } .cart-item-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .cart-qty { display: flex; align-items: center; border: 1.5px solid #e0e0e0; border-radius: 8px; overflow: hidden; } .cart-qty-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #555; cursor: pointer; font-size: 0.75rem; transition: background .15s; } .cart-qty-btn:hover { background: #f0f0f0; } .cart-qty-num { min-width: 36px; text-align: center; font-weight: 700; font-size: 0.9rem; border-right: 1px solid #eee; border-left: 1px solid #eee; } .cart-delete-btn { background: none; border: none; color: #ccc; font-size: 0.85rem; cursor: pointer; transition: color .2s; padding: 4px 8px; } .cart-delete-btn:hover { color: #e74c3c; } .cart-item-price { text-align: left; min-width: 110px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .cart-price-old { text-decoration: line-through; color: #bbb; font-size: 0.78rem; } .cart-discount-badge { background: #ef4056; color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; } .cart-price-current { font-weight: 800; font-size: 0.95rem; color: #333; } .cart-price-current small { font-weight: 400; font-size: 0.72rem; color: #888; } .cart-summary { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; } .cart-summary-header { padding: 16px 20px; border-bottom: 1.5px solid #f0f0f0; font-weight: 700; font-size: 0.95rem; } .cart-summary-body { padding: 20px; } .cart-summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.88rem; color: #555; } .cart-summary-discount { color: #ef4056; } .cart-summary-divider { height: 1.5px; background: #f0f0f0; margin: 14px 0; } .cart-summary-total { font-weight: 800; font-size: 1.05rem; color: #222; } .cart-summary-total span:last-child { color: var(--primary, #007bff); font-size: 1.15rem; } .cart-checkout-btn { width: 100%; padding: 14px; background: var(--primary, #007bff); color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: filter .2s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-family: inherit; } .cart-checkout-btn:hover { filter: brightness(1.1); } .cart-checkout-btn:disabled { opacity: 0.6; cursor: not-allowed; } .cart-empty { text-align: center; padding: 60px 20px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .cart-empty i { font-size: 4rem; color: #ddd; display: block; margin-bottom: 16px; } .cart-empty h4 { font-weight: 700; color: #555; margin-bottom: 8px; } .cart-empty p { color: #999; margin-bottom: 20px; } .cart-pending-header { background: #fff8e1 !important; } .cart-pending-header i { color: #f5a623 !important; } .cart-pending-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; } @media (max-width: 767.98px) { .cart-item { flex-wrap: wrap; } .cart-item-price { min-width: auto; flex-direction: row; align-items: center; gap: 8px; width: 100%; margin-top: 8px; } } .co-section { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; } .co-section-header { padding: 16px 20px; border-bottom: 1.5px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; } .co-section-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: #333; } .co-section-title i { color: var(--primary, #007bff); } .co-section-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary, #007bff); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; } .co-section-body { padding: 20px; } .co-address { border: 1.5px solid #e8e8e8; border-radius: 12px; padding: 16px; cursor: pointer; position: relative; transition: border-color .2s, box-shadow .2s; height: 100%; } .co-address:hover { border-color: #ccc; } .co-address-selected { border-color: var(--primary, #007bff) !important; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); background: #f8fbff; } .co-address-check { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary, #007bff); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; } .co-address-name { font-weight: 700; font-size: 0.92rem; color: #222; margin-bottom: 6px; } .co-address-text { font-size: 0.82rem; color: #666; line-height: 1.6; margin: 0 0 8px; } .co-address-meta { display: flex; gap: 16px; font-size: 0.78rem; color: #888; margin-bottom: 8px; } .co-address-meta i { margin-left: 4px; } .co-address-edit { background: none; border: none; color: var(--primary, #007bff); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; } .co-shipping, .co-payment { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid #e8e8e8; border-radius: 10px; cursor: pointer; margin-bottom: 10px; transition: border-color .2s, background .2s; } .co-shipping:hover, .co-payment:hover { border-color: #ccc; } .co-shipping-selected, .co-payment-selected { border-color: var(--primary, #007bff) !important; background: #f8fbff; } .co-radio { width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 50%; flex-shrink: 0; position: relative; } .co-radio-checked { border-color: var(--primary, #007bff); } .co-radio-checked::after { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border-radius: 50%; background: var(--primary, #007bff); } .co-shipping-info { flex: 1; } .co-shipping-price { font-weight: 700; font-size: 0.9rem; color: #333; white-space: nowrap; } .co-gateways { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px 40px; } .co-gateway { padding: 10px 16px; border: 1.5px solid #e8e8e8; border-radius: 8px; cursor: pointer; text-align: center; transition: border-color .2s; display: flex; align-items: center; gap: 6px; } .co-gateway:hover { border-color: #ccc; } .co-gateway-selected { border-color: var(--primary, #007bff); background: #f8fbff; } .co-gateway i { color: var(--primary, #007bff); } .co-coupon-applied { display: flex; align-items: center; justify-content: space-between; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 14px; } .co-summary-items { max-height: 200px; overflow-y: auto; margin-bottom: 12px; } .co-summary-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f5f5f5; } .co-summary-item:last-child { border-bottom: none; } .co-summary-img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .co-summary-img-placeholder { background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #ddd; } .co-trust-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: #27ae60; font-size: 0.78rem; } .fancybox-container, .fancybox-bg, .fancybox-outer, .fancybox-inner, .fancybox-slide, .fancybox-slide--image { z-index: 99999999 !important; } html { overflow-y: scroll; } button:focus, a:focus, [data-bs-toggle]:focus, .nav-link:focus { outline: none; box-shadow: none; } body { display: flex; flex-direction: column; min-height: 100vh; } #main-content { flex: 1 0 auto; } .site-footer { flex-shrink: 0; } .page-content { margin-top: 0 !important; } .product-card-inner:hover, .pc:hover, .prt-card:hover, .prt-featured:hover, .prt-row:hover, .pcs-card .product-card-inner:hover { transform: none !important; } .product-card-image img, .pc__img img, .vertical-product-thumb:hover, .vertical-product-thumb:hover img, .widget-product a:hover img, .product-thumbnails a:hover img, .profile-wishlist-list-item-img:hover img, .profile-user-history-list-item-img:hover img, .more-category-img:hover img, .pcs-card img, .owl-carousel .item img { transform: none !important; } .site-header { position: relative; z-index: 9999; background: #fff; } .site-header header { float: none !important; margin: 0; padding: 0; } .site-header header::before { display: none !important; } .site-header .hd-logo { float: none; margin-top: 0; } .site-footer { float: none; } .hd-ads { overflow: hidden; } .hd-ads--full .hd-ads__img { border-radius: 0; } .hd-ads__link { display: block; line-height: 0; } .hd-ads__img { width: 100%; height: 45px; object-fit: cover; border-radius: var(--border-radius, 8px); } .hd-desktop { display: block; } .hd-bar { display: flex !important; align-items: center; gap: 16px; padding: 14px 0; position: relative; min-height: 60px; float: none !important; flex-wrap: nowrap; overflow: visible; } .hd-bar > * { float: none !important; } .hd-logo { flex: 0 0 auto; display: flex; align-items: center; } .hd-logo img { height: 44px; width: auto; display: block; } .hd-search { flex: 1 1 auto; max-width: 520px; min-width: 200px; position: relative; z-index: 1100; } .site-header :is(.hd-search, .hd-mobile-search):focus-within, .site-header :is(.hd-search, .hd-mobile-search):has([data-search-open="1"]), .site-header :is(.hd-search, .hd-mobile-search):has(.search-inline-panel.open) { z-index: 12000; } .hd-search > div, .hd-search .mt-15, .hd-search .search-header, .hd-search [data-header-search-wrapper], .hd-search form, .hd-search .search-input-container { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; } .hd-search .mt-15 { margin-top: 0 !important; } .hd-search .section-style { float: none !important; display: block !important; } .hd-search .search-header { height: auto; margin: 0; } .hd-search .search-input { height: 44px; border-radius: 12px; border: 1px solid #e5e5e5; padding: 0 16px 0 48px; font-size: 13px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; background: #f9f9f9; transition: border-color .2s, background .2s; } [dir="rtl"] .hd-search .search-input { padding: 0 16px 0 48px; } .hd-search .search-input:focus { border-color: var(--primary); background: #fff; outline: none; } .hd-search .button-search { position: absolute; top: 0; left: 0; width: 44px; height: 44px; background: none; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .hd-search .searchicon { font-size: 16px; color: #888; } .hd-search .search-input-container { position: relative; } .site-header :is(.hd-search, .hd-mobile-search) .search-inline-panel { left: 0 !important; right: 0 !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; overflow: hidden; } .site-header :is(.hd-search, .hd-mobile-search) :is(.search-panel-body, .search-results, .search-results-list, .search-result-item) { min-width: 0; max-width: 100%; box-sizing: border-box; } .site-header :is(.hd-search, .hd-mobile-search) .search-result-item { width: 100%; } .hd-mobile-search { display: none; } @media (max-width: 991px) { .hd-mobile-search { display: block; width: 100%; max-width: 100%; padding: 0 12px 12px; position: relative; z-index: 901; background: var(--menu-bg, var(--surface, #fff)); box-sizing: border-box; } .hd-mobile-search > div, .hd-mobile-search .mt-15, .hd-mobile-search .search-header, .hd-mobile-search [data-header-search-wrapper], .hd-mobile-search form, .hd-mobile-search .search-input-container { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; } .hd-mobile-search .mt-15, .hd-mobile-search .search-header { margin: 0 !important; } .hd-mobile-search .section-style { float: none !important; display: block !important; } .hd-mobile-search .search-input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 42px; padding: 0 16px 0 46px; box-sizing: border-box; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; background: var(--surface, #fff); color: var(--text, #1f2937); font: inherit; font-size: 13px; outline: none; } .hd-mobile-search .search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); } .hd-mobile-search .button-search { position: absolute; inset-block: 0; inset-inline-end: 0; width: 44px; border: 0; background: transparent; color: var(--primary); } .hd-mobile-search .search-inline-panel { inset-inline: 0; width: 100%; min-width: 0; max-width: 100%; max-height: min(62vh, 520px); overflow-y: auto; z-index: 100; } } .hd-nav-inline { display: flex; align-items: center; gap: 28px; flex: 1 1 auto; justify-content: center; } .hd-nav-inline a { color: #555; font-size: 14px; font-weight: 500; position: relative; padding: 4px 0; transition: color .25s; } .hd-nav-inline a::after { content: ''; position: absolute; bottom: -2px; right: 0; width: 0; height: 2px; background: var(--primary); transition: width .3s; border-radius: 2px; } .hd-nav-inline a:hover, .hd-nav-inline a.active { color: var(--primary); } .hd-nav-inline a:hover::after, .hd-nav-inline a.active::after { width: 100%; } .hd-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-inline-start: auto; } .hd-action { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; color: #444; font-size: 18px; transition: all .25s; background: #f5f5f7; } .hd-action:hover { background: var(--primary-light); color: var(--primary); } .hd-cart { position: relative; } .hd-cart__badge { position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; } .hd-account { position: relative; cursor: pointer; z-index: 1100; } .hd-account::after { content: ''; position: absolute; top: 100%; inset-inline: 0; height: 10px; } .hd-account:hover, .hd-account:focus-within { z-index: 12000; } .hd-account__btn { background: none; border: none; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: inherit; font-size: inherit; cursor: pointer; } .hd-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.12); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .25s; z-index: 10000; } .hd-account:hover .hd-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .hd-dropdown__item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; color: #444; transition: background .2s; width: 100%; background: none; border: none; cursor: pointer; text-align: right; } .hd-dropdown__item:hover { background: #f5f5f7; } .hd-dropdown__item i { font-size: 15px; width: 20px; text-align: center; } .hd-dropdown__item--danger { color: #e74c3c; } .hd-dropdown__item--danger:hover { background: #fef2f2; } .hd-login-btn { width: auto !important; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; } .hd-hamburger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 12px; background: #f5f5f7; border: 1px solid rgba(0,0,0,.06); color: #333; cursor: pointer; } .hd-hamburger .ui-navigation-icon { width: 22px; height: 22px; display: block; } .hd-custom-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--primary); color: #fff; white-space: nowrap; transition: all .3s; flex-shrink: 0; } .hd-custom-btn:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); } .header4 .hd-custom-btn { background: var(--primary); color: #0f172a; } .header4 .hd-custom-btn:hover { background: #fff; color: #0f172a; } .site-header--sticky .hd-desktop { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: inherit; transition: transform .32s cubic-bezier(.22,1,.36,1); } .site-header--sticky .hd-desktop.hd-bar--up { transform: translateY(var(--hd-bar-h, -70px)); } .site-header--sticky .hd-menu { box-shadow: 0 2px 12px rgba(0,0,0,.06); } .site-header .main-menu { display: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; border: none !important; } .hd-menu { border-top: 1px solid #f0f0f0; background: var(--menu-bg, #fff); } .hd-menu > div { display: flex; align-items: center; justify-content: space-between; } .hd-menu__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex: 1; } .hd-menu__item { position: relative; } .hd-menu__link { display: flex; align-items: center; gap: 4px; padding: 14px 12px; font-size: 13px; font-weight: 600; color: var(--menu-color, #333); white-space: nowrap; transition: color .2s; } .hd-menu__link:hover, .hd-menu__link--active { color: var(--primary); } .hd-menu__arrow { font-size: 10px; transition: transform .2s; } .hd-menu__item:hover .hd-menu__arrow { transform: rotate(180deg); } .hd-menu__phone { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--menu-color, #666); white-space: nowrap; margin-right: auto; padding: 10px 0; } [dir="rtl"] .hd-menu__phone { margin-right: 0; margin-left: auto; } .hd-menu__phone i { color: var(--primary); } .hd-menu__phone:hover { color: var(--primary); } .hd-submenu { position: absolute; top: 100%; right: 0; min-width: 600px; background: #fff; border-radius: 0 0 16px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.1); padding: 24px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .25s; z-index: 999; } .hd-menu__item:hover > .hd-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .hd-submenu__inner { display: flex; flex-wrap: wrap; gap: 24px; } .hd-submenu__col { min-width: 160px; } .hd-submenu__title { display: block; font-size: 13px; font-weight: 700; color: #222; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--primary-light); } .hd-submenu__title:hover { color: var(--primary); } .hd-submenu__list { list-style: none; padding: 0; margin: 0; } .hd-submenu__list li a { display: block; padding: 5px 0; font-size: 12px; color: #666; transition: all .2s; } .hd-submenu__list li a:hover { color: var(--primary); padding-right: 6px; } .hd-submenu__img { max-width: 180px; margin-right: auto; border-radius: 12px; overflow: hidden; } .hd-submenu__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .menu2 .hd-submenu { min-width: auto; padding: 8px; border-radius: 12px; } .menu2 .hd-submenu__inner { flex-direction: column; gap: 0; } .menu2 .hd-submenu__col { min-width: 200px; padding: 4px 8px; } .menu2 .hd-submenu__title { border-bottom: none; padding-bottom: 4px; margin-bottom: 4px; font-size: 13px; } .menu2 .hd-submenu__list li a { padding: 4px 8px; border-radius: 6px; } .menu2 .hd-submenu__list li a:hover { background: var(--primary-light); padding-right: 8px; } .menu2 .hd-submenu__img { display: none; } .hd-menu.menu3 > div { display: flex !important; align-items: center; gap: 0; } .hd-menu.menu3 .hd-menu__list { flex: 1; } .hd-menu.menu3 .hd-menu__phone { margin: 0; } .hd-catmenu { position: relative; flex-shrink: 0; } .hd-catmenu__trigger { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: none; border-radius: 10px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .25s; } .hd-catmenu__trigger:hover { background: var(--primary-dark); } .hd-catmenu__trigger i:first-child { font-size: 16px; } .hd-catmenu__arrow { font-size: 10px; transition: transform .25s; } .hd-catmenu:hover .hd-catmenu__arrow { transform: rotate(180deg); } .hd-catmenu__panel { position: absolute; top: 100%; right: 0; width: 260px; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 10px 40px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(4px); transition: all .2s ease; z-index: 1000; padding: 8px 0; } .hd-catmenu:hover .hd-catmenu__panel { opacity: 1; visibility: visible; transform: translateY(0); } .hd-catmenu__list { list-style: none; margin: 0; padding: 0; } .hd-catmenu__item { position: relative; } .hd-catmenu__link { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; font-size: 13px; color: #444; transition: all .15s; gap: 8px; } .hd-catmenu__link:hover { background: #f7f7f9; color: var(--primary); } .hd-catmenu__sub-arrow { font-size: 10px; color: #bbb; transition: color .15s; } .hd-catmenu__link:hover .hd-catmenu__sub-arrow { color: var(--primary); } .hd-catmenu__sub { position: absolute; top: 0; left: 100%; min-width: 500px; background: #fff; border-radius: 0 12px 12px 0; box-shadow: 8px 8px 30px rgba(0,0,0,.1); padding: 20px 24px; opacity: 0; visibility: hidden; transform: translateX(-8px); transition: all .2s; z-index: 1001; display: flex; flex-wrap: wrap; gap: 20px; } [dir="rtl"] .hd-catmenu__sub { left: auto; right: 100%; border-radius: 12px 0 0 12px; transform: translateX(8px); } .hd-catmenu__item:hover > .hd-catmenu__sub { opacity: 1; visibility: visible; transform: translateX(0); } .hd-catmenu__sub-col { min-width: 140px; } .hd-catmenu__sub-title { display: block; font-size: 13px; font-weight: 700; color: #222; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 2px solid var(--primary-light); } .hd-catmenu__sub-title:hover { color: var(--primary); } .hd-catmenu__sub-list { list-style: none; padding: 0; margin: 0; } .hd-catmenu__sub-list li a { display: block; padding: 4px 0; font-size: 12px; color: #666; transition: all .15s; } .hd-catmenu__sub-list li a:hover { color: var(--primary); padding-right: 4px; } [dir="rtl"] .hd-catmenu__sub-list li a:hover { padding-right: 0; padding-left: 4px; } .hd-catmenu__sub-img { max-width: 160px; border-radius: 10px; overflow: hidden; margin-right: auto; } [dir="rtl"] .hd-catmenu__sub-img { margin-right: 0; margin-left: auto; } .hd-catmenu__sub-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } @media (max-width: 991px) { .hd-catmenu { display: none; } } .menu4 .hd-menu__list { justify-content: center; } .menu4 .hd-menu__link { padding: 14px 16px; font-size: 14px; letter-spacing: .3px; } .menu4 { background: transparent; border-top: none; } .menu4 .hd-submenu { border-radius: 12px; } .menu4 .hd-menu__phone { display: none; } .header1 .hd-desktop { background: #fff; border-bottom: 1px solid #eee; } .header1 .hd-bar { padding: 16px 0; gap: 20px; } .header1 .hd-logo img { height: 46px; } .header1 .hd-search { min-width: 240px; } .header1 .hd-action { background: #f8f8f8; border-radius: 12px; } .header1 .hd-action:hover { background: var(--primary-light); color: var(--primary); } .header1 .hd-login-btn { width: auto !important; padding: 0 16px; gap: 6px; font-size: 13px; font-weight: 600; background: var(--primary-light); color: var(--primary); border-radius: 12px; } .header1 .hd-login-btn:hover { background: var(--primary); color: #fff; } .header1 .hd-menu { border-top: none; background: var(--menu-bg, #fff); } .header1 .hd-menu__link { font-size: 13px; font-weight: 600; padding: 14px 14px; } .header1 .hd-menu__link--active { color: var(--primary); } .header1 .hd-menu__link--active::after { content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 2.5px; background: var(--primary); border-radius: 2px; } .header1 .hd-menu__item { position: relative; } .header2 .hd-desktop { background: #fafafa; } .header2 .hd-bar { padding: 14px 0; gap: 24px; } .header2 .hd-logo img { height: 42px; } .header2 .hd-search { min-width: 240px; } .header2 .hd-search .search-input { border-radius: 50px; background: #fff; border-color: #ddd; padding: 0 20px 0 50px; } .header2 .hd-search .button-search { width: 46px; } .header2 .hd-search .searchicon { color: var(--primary); } .header2 .hd-action { border-radius: 50%; background: #fff; border: 1px solid #e5e5e5; width: 42px; height: 42px; font-size: 17px; } .header2 .hd-action:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); } .header2 .hd-cart__badge { background: var(--primary-dark); top: -3px; left: -3px; } .header2 .hd-login-btn { width: auto !important; border-radius: 50px; background: var(--primary); color: #fff; border: none; padding: 0 20px; height: 42px; font-size: 13px; font-weight: 600; gap: 6px; } .header2 .hd-login-btn:hover { background: var(--primary-dark); } .header2 .hd-login-btn i { font-size: 14px; } .header2 .hd-custom-btn { border-radius: 50px; } .header2 .hd-menu { border-top: none; background: var(--menu-bg, #fff); box-shadow: 0 2px 10px rgba(0,0,0,.05); } .header2 .hd-menu::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-dark), var(--primary)); } .header2 .hd-menu__link { font-weight: 500; font-size: 13px; padding: 13px 14px; } .header2 .hd-menu__link:hover { color: var(--primary); } .header2 .hd-menu__phone { background: var(--primary-light); padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; color: var(--primary); } .header2 .hd-menu__phone:hover { background: var(--primary); color: #fff; } .header4 { background: #0f172a; } .header4 .hd-desktop { background: #0f172a; } .header4 .hd-nav-inline a { color: #94a3b8; } .header4 .hd-nav-inline a:hover, .header4 .hd-nav-inline a.active { color: #fff; } .header4 .hd-nav-inline a::after { background: var(--primary); } .header4 .hd-custom-btn { background: var(--primary); color: #0f172a; font-weight: 700; } .header4 .hd-custom-btn:hover { background: #fff; color: #0f172a; } .header4 .hd-hamburger { color: #cbd5e1; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); } .header4 .hd-menu { background: #1e293b; border-top: 1px solid #334155; } .header4 .hd-menu__link { color: #cbd5e1; } .header4 .hd-menu__link:hover { color: var(--primary); } .header4 .hd-menu__phone { color: #94a3b8; } .header5 .hd-desktop { background: #fff; } .header5 .hd-bar { padding: 16px 0; gap: 20px; } .header5 .hd-logo img { height: 46px; } .header5 .hd-search { max-width: 580px; min-width: 240px; } .header5 .hd-action { width: 42px; height: 42px; border-radius: 50%; background: none; color: #333; font-size: 20px; } .header5 .hd-action:hover { color: var(--primary); background: var(--primary-light); } .header5 .hd-login-btn { width: auto !important; border-radius: 50px; padding: 0 18px; height: 42px; background: none; color: #333; border: 1px solid #ddd; font-size: 13px; font-weight: 600; gap: 6px; } .header5 .hd-login-btn:hover { border-color: var(--primary); color: var(--primary); } .header5 .hd-cart__badge { top: -2px; left: -2px; } .header5 .hd-custom-btn { border-radius: 10px; background: var(--primary); color: #fff; } .header5 .hd-menu { background: var(--menu-bg, #fff); border-top: 1px solid #eee; } .header5 .hd-catmenu__trigger { border-radius: 8px; padding: 9px 16px; font-size: 13px; } .header5 .hd-menu__link { font-size: 13px; font-weight: 500; padding: 12px 14px; } .header5 .hd-menu__phone { background: var(--primary-light); padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--primary); } .header5 .hd-menu__phone:hover { background: var(--primary); color: #fff; } .sb { position: fixed; top: 0; width: min(320px, 88vw); max-width: 88vw; height: 100vh; height: 100dvh; background: var(--surface, #fff); color: var(--text, #333); z-index: 100101; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility .3s; box-shadow: -4px 0 24px rgba(0,0,0,.08); display: flex; flex-direction: column; visibility: hidden; pointer-events: none; overscroll-behavior: contain; } .sb--start { inset-inline-start: 0; transform: translateX(-100%); } [dir="rtl"] .sb--start { transform: translateX(100%); } .sb--end { inset-inline-end: 0; transform: translateX(100%); } [dir="rtl"] .sb--end { transform: translateX(-100%); } .sb.open { transform: translateX(0) !important; visibility: visible; pointer-events: auto; } body.sidebar-open { overflow: hidden; } .sb__head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--border-color, #f0f0f0); flex-shrink: 0; background: color-mix(in srgb, var(--surface, #fff) 94%, var(--primary)); } .sb__logo img { height: 34px; width: auto; } .sb__close { width: 34px; height: 34px; border-radius: 8px; border: none; background: color-mix(in srgb, var(--surface, #fff) 90%, var(--text, #333)); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text, #666); cursor: pointer; transition: background-color .2s, color .2s; } .sb__close .ui-navigation-icon { width: 18px; height: 18px; } .sb__close:hover { background: color-mix(in srgb, var(--danger, #e74c3c) 12%, var(--surface, #fff)); color: var(--danger, #e74c3c); } .sb__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .sb__search { padding: 12px 16px; border-bottom: 1px solid var(--border-color, #f5f5f5); } .sb__search form { position: relative; } .sb__search i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 14px; pointer-events: none; } [dir="ltr"] .sb__search i { right: auto; left: 12px; } .sb__search input { width: 100%; border: 1px solid #e8e8e8; border-radius: 10px; padding: 10px 36px 10px 12px; font-size: 13px; background: color-mix(in srgb, var(--surface, #fff) 94%, var(--text, #333)); color: var(--text, #333); outline: none; transition: border-color .2s; font-family: inherit; } [dir="ltr"] .sb__search input { padding: 10px 12px 10px 36px; } .sb__search input:focus { border-color: var(--primary); background: var(--surface, #fff); } .sb__section { border-bottom: 1px solid var(--border-color, #f5f5f5); padding: 8px 0; } .sb__section-title { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--text, #333) 55%, transparent); text-transform: uppercase; letter-spacing: .5px; } .sb__link { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--text, #333); transition: background-color .15s, color .15s; text-decoration: none; border: none; background: none; width: 100%; text-align: right; cursor: pointer; } [dir="ltr"] .sb__link { text-align: left; } .sb__link:hover, .sb__link:active { background: color-mix(in srgb, var(--primary) 7%, var(--surface, #fff)); color: var(--primary); } .sb__link--home { color: var(--primary); font-weight: 600; } .sb__link--home i { font-size: 15px; } .sb__link--parent { justify-content: space-between; } .sb__link--parent span { flex: 1; } .sb__link--child { padding-right: 32px; font-size: 12px; color: #666; } [dir="ltr"] .sb__link--child { padding-right: 16px; padding-left: 32px; } .sb__link--child::before { content: '—'; color: #ccc; font-size: 10px; margin-left: 4px; } .sb__chevron { font-size: 11px; color: #bbb; transition: transform .25s; } .sb__group--open > .sb__link--parent .sb__chevron { transform: rotate(180deg); color: var(--primary); } .sb__children { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: color-mix(in srgb, var(--surface, #fff) 95%, var(--text, #333)); } .sb__group--open > .sb__children { max-height: 800px; } .sb__child { display: block; padding: 9px 16px 9px 16px; padding-right: 32px; font-size: 12px; color: color-mix(in srgb, var(--text, #333) 78%, transparent); transition: background-color .15s, color .15s; text-decoration: none; border-bottom: 1px solid var(--border-color, #f0f0f0); } [dir="ltr"] .sb__child { padding-left: 32px; padding-right: 16px; } .sb__child:last-child { border-bottom: none; } .sb__child:hover { color: var(--primary); background: #f0f4ff; } .sb__child--all { font-weight: 600; color: var(--primary); } .sb__child--deep { padding-right: 48px; font-size: 11px; color: #888; } [dir="ltr"] .sb__child--deep { padding-left: 48px; padding-right: 16px; } .sb__foot { flex-shrink: 0; max-height: 42dvh; overflow-y: auto; border-top: 1px solid var(--border-color, #f0f0f0); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface, #fff) 95%, var(--text, #333)); } .sb__foot-link { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13px; color: var(--text, #444); transition: background-color .15s, color .15s; background: none; border: none; width: 100%; text-align: right; cursor: pointer; text-decoration: none; } [dir="ltr"] .sb__foot-link { text-align: left; } .sb__foot-link:hover { background: #f0f0f2; color: var(--primary); } .sb__foot-link i { font-size: 15px; width: 20px; text-align: center; color: #999; } .sb__foot-link--danger { color: #ef4444; } .sb__foot-link--danger i { color: #ef4444; } .sb__foot-phone { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 13px; color: var(--text, #555); text-decoration: none; } .sb__foot-phone i { color: var(--primary); } .sb__socials { display: flex; align-items: center; gap: 8px; padding: 8px 16px; } .sb__social { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 9%, var(--surface, #fff)); color: var(--primary); } .sb__social :is(svg, img) { width: 17px; height: 17px; } .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.42); z-index: 100100; opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(2px); } .sb.open ~ .sidebar-overlay { opacity: 1; pointer-events: all; } .site-footer { margin-top: 40px; background: #fafbfc; } .ft-badges { padding: 20px 0; border-bottom: 1px solid #eef0f2; } .ft-badges__row { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 16px; } .ft-badges__item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; } .ft-badges__icon { width: 36px; height: 36px; object-fit: contain; } .ft-badges__text { font-weight: 500; } .ft-main { padding: 40px 0 24px; } .ft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .ft-col__title { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 16px; padding-bottom: 10px; position: relative; } .ft-col__title::after { content: ''; position: absolute; bottom: 0; right: 0; width: 30px; height: 2px; background: var(--primary); border-radius: 2px; } .ft-col__links { list-style: none; padding: 0; margin: 0; } .ft-col__links li { margin-bottom: 10px; } .ft-col__links a { font-size: 13px; color: #666; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; } .ft-col__links a::before { content: ''; width: 0; height: 1px; background: var(--primary); transition: width .3s; } .ft-col__links a:hover { color: var(--primary); } .ft-col__links a:hover::before { width: 12px; } .ft-col__contact { list-style: none; padding: 0; margin: 0; } .ft-col__contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; color: #666; } .ft-col__contact li i { width: 28px; height: 28px; min-width: 28px; border-radius: 8px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 13px; } .ft-col__contact a { color: #666; } .ft-col__contact a:hover { color: var(--primary); } .ft-col__desc { font-size: 13px; color: #666; line-height: 1.9; margin-bottom: 16px; } .ft-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .ft-social { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; transition: all .3s; } .ft-social:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.15); color: #fff; } .ft-social--ig { background: #e4405f; } .ft-social--tw { background: #1da1f2; } .ft-social--li { background: #0a66c2; } .ft-social--tg { background: #0088cc; } .ft-social--wa { background: #25d366; } .ft-social--em { background: #6c63ff; } .ft-social--custom { background: var(--primary, #6c63ff); } .ft-trust { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .ft-trust img { max-height: 70px; border-radius: 8px; } .ft-bottom { padding: 16px 0; border-top: 1px solid #eef0f2; } .ft-copyright { font-size: 12px; color: #888; text-align: center; margin: 0; } .ft-copyright strong { color: #555; } .footer2 .ft-badges { display: none; } .footer2 .ft-main { padding: 24px 0 16px; } .footer2 .ft-grid { gap: 20px; } .footer2 .ft-col__title { font-size: 13px; margin-bottom: 10px; padding-bottom: 6px; } .footer2 .ft-col__links a { font-size: 12px; } .footer2 .ft-col__links li { margin-bottom: 6px; } .footer2 .ft-col__contact li { font-size: 12px; margin-bottom: 8px; } .footer2 .ft-col__contact li i { width: 24px; height: 24px; min-width: 24px; font-size: 11px; } .footer2 .ft-social { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; } .footer2 .ft-trust img { max-height: 50px; } .footer3 { background: #111827; color: #d1d5db; margin-top: 60px; } .footer3 .ft-badges { border-bottom-color: rgba(255,255,255,.06); padding: 28px 0; } .footer3 .ft-badges__item { color: #9ca3af; } .footer3 .ft-main { padding: 48px 0 32px; } .footer3 .ft-col__title { color: #fff; } .footer3 .ft-col__title::after { background: var(--primary); } .footer3 .ft-col__links a { color: #9ca3af; } .footer3 .ft-col__links a:hover { color: var(--primary); } .footer3 .ft-col__links a::before { background: var(--primary); } .footer3 .ft-col__contact li { color: #9ca3af; } .footer3 .ft-col__contact li i { background: rgba(255,255,255,.06); color: var(--primary); } .footer3 .ft-col__contact a { color: #9ca3af; } .footer3 .ft-col__contact a:hover { color: var(--primary); } .footer3 .ft-col__desc { color: #9ca3af; } .footer3 .ft-social { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.06); color: #d1d5db; border: 1px solid rgba(255,255,255,.08); } .footer3 .ft-social:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .footer3 .ft-bottom { border-top-color: rgba(255,255,255,.06); } .footer3 .ft-copyright { color: #6b7280; } .footer3 .ft-copyright strong { color: #9ca3af; } .footer4 { background: #0f172a; color: #cbd5e1; margin-top: 60px; } .footer4 .ft-badges { border-bottom-color: #1e293b; padding: 24px 0; } .footer4 .ft-badges__item { color: #94a3b8; } .footer4 .ft-badges__icon { filter: grayscale(1) brightness(2); opacity: .6; } .footer4 .ft-main { padding: 48px 0 32px; } .footer4 .ft-col__title { color: var(--primary); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; } .footer4 .ft-col__title::after { display: none; } .footer4 .ft-col__links a { color: #94a3b8; } .footer4 .ft-col__links a:hover { color: #e2e8f0; } .footer4 .ft-col__links a::before { background: var(--primary); } .footer4 .ft-col__contact li { color: #94a3b8; } .footer4 .ft-col__contact li i { background: #1e293b; color: var(--primary); } .footer4 .ft-col__contact a { color: #94a3b8; } .footer4 .ft-col__contact a:hover { color: #e2e8f0; } .footer4 .ft-col__desc { color: #94a3b8; } .footer4 .ft-social { background: #1e293b; color: #94a3b8; border-radius: 8px; } .footer4 .ft-social:hover { background: var(--primary); color: #0f172a; } .footer4 .ft-bottom { border-top-color: #1e293b; } .footer4 .ft-copyright { color: #475569; } .footer4 .ft-copyright strong { color: #64748b; } .mn { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; display: none; align-items: stretch; justify-content: space-around; background: color-mix(in srgb, var(--surface, #fff) 96%, transparent); height: 64px; border-top: 1px solid var(--border-color, #f0f0f0); box-shadow: 0 -2px 16px rgba(0,0,0,.06); padding: 0 4px; padding-bottom: env(safe-area-inset-bottom, 0); } .mn__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; color: color-mix(in srgb, var(--text, #333) 55%, transparent); font-size: 18px; transition: color .2s; text-decoration: none; -webkit-tap-highlight-color: transparent; border: 0; background: transparent; font-family: inherit; cursor: pointer; } .mn__tab:hover, .mn__tab:active, .mn__tab.is-active { color: var(--primary); } .mn__icon, .mn__tab .ui-navigation-icon { width: 21px; height: 21px; font-size: 20px; line-height: 1; } .mn__icon-wrap { position: relative; display: inline-flex; } .mn__label { font-size: 10px; font-weight: 500; white-space: nowrap; } .mn__badge { position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; } @media (max-width: 1200px) { .hd-desktop .hd-search { max-width: 380px; } .hd-nav-inline { gap: 20px; } } @media (max-width: 991px) { .hd-desktop .hd-menu { display: none; } .hd-desktop .hd-search { display: none; } .hd-nav-inline { display: none; } .hd-actions { display: none; } .hd-custom-btn { display: none; } .hd-hamburger { display: flex; } .hd-bar { padding: 10px 0; } .hd-logo img { height: 36px; } .mn { display: flex; } .ft-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 575px) { .ft-grid { grid-template-columns: 1fr; gap: 20px; } .ft-badges__row { justify-content: center; } .ft-badges__item { font-size: 11px; } .ft-badges__icon { width: 28px; height: 28px; } .hd-cta-btn { padding: 8px 16px; font-size: 12px; } .hd-actions .hd-login-btn span { display: none; } } @media (max-width: 991px) { body { padding-bottom: 72px; } .btt-btn { bottom: 80px; } .admin-edit-btn { bottom: 80px; right: 16px; } .hd-bar { justify-content: space-between; } .hd-hamburger--start { order: -1; } .hd-hamburger--end { order: 99; } } .pc { display:flex; flex-direction:column; background:#fff; border-radius: var(--w-radius, var(--border-radius, 16px)); box-shadow: var(--w-shadow, none); border:1px solid #eef0f4; overflow:hidden; transition: transform .22s ease, border-color .22s ease; text-decoration:none; color:inherit; width: 100%; height: 100%; font-family: var(--w-font, var(--font-body)); font-size: calc(1em * var(--w-font-scale, var(--font-scale, 1))); } .owl-carousel .owl-item .item, .owl-carousel .owl-item .item > .pc { width: 100%; } .pc:hover { border-color:#dfe2ea; transform: translateY(-3px); } .pc__img { position:relative; aspect-ratio:1/1; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; } .pc__img img { width:100%; height:100%; object-fit:contain; padding:14px; transition: transform .35s ease; } .pc:hover .pc__img img { transform: scale(1.04); } .pc__img-empty { font-size:3rem; color:#e0e0e0; } .pc__badge { position:absolute; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; z-index:2; line-height:1.35; } .pc__badge--sale { top:10px; right:10px; background:#ef4056; color:#fff; box-shadow:0 2px 8px rgba(239,64,86,.35); } .pc__badge--out { bottom:10px; left:10px; background:rgba(0,0,0,.6); color:#fff; font-size:10px; } [dir="rtl"] .pc__badge--sale { right:auto; left:10px; } [dir="rtl"] .pc__badge--out { left:auto; right:10px; } .pc__body { padding: clamp(12px, calc(13px * var(--w-density, var(--density, 1))), 16px) clamp(12px, calc(14px * var(--w-density, var(--density, 1))), 16px); display:flex; flex-direction:column; gap:7px; flex:1; min-height:150px; text-align:right; } .pc__title { font-size:14px; font-weight:600; color:#2b2d42; line-height:1.75; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; min-height:46px; transition: color .18s ease; } .pc:hover .pc__title { color: var(--primary, #ef4056); } .pc__brand { font-size:11px; color:#9aa0ac; } .pc__img { position: relative; } .pc__swatches { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 5px; z-index: 3; pointer-events: auto; } [dir="rtl"] .pc__swatches { left: auto; right: 8px; } .pc__swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--c, #e5e7eb); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s; } .pc:hover .pc__swatch { box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.08); } .pc__swatch:hover { transform: scale(1.25); box-shadow: 0 3px 10px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.1); z-index: 4; } .pc__swatch-more { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 9px; background: rgba(255,255,255,.95); color: #475569; font-size: 9.5px; font-weight: 700; line-height: 1; font-family: var(--bs-font-sans-serif); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); backdrop-filter: blur(4px); } .pc__bottom { margin-top:auto; padding-top:8px; display:flex; flex-direction:column; justify-content:flex-end; min-height:58px; gap:3px; } .pc__price-row { display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; width:100%; } .pc__discount { display:inline-flex; align-items:center; justify-content:center; background:#ef4056; color:#fff; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px; line-height:1.7; min-width:34px; box-shadow:0 2px 6px rgba(239,64,86,.28); } .pc__price-old { font-size:12px; color:#aeb2bd; text-decoration:line-through; } .pc__price { font-size:16px; font-weight:800; color:#16181f; letter-spacing:-.2px; white-space:nowrap; } .pc__price small { font-size:10px; font-weight:500; color:#9aa0ac; margin-right:2px; } .pc__unavailable { display:block; text-align:right; font-size:13px; color:#9aa0ac; font-weight:600; } .pc__badge--sale { display:none; } .pc__meta { font-size:11px; color:#888; } .pc__meta i { margin-left:3px; } .pc__label { font-size:11px; color:#666; } .pc__label i { margin-left:3px; } .pc__progress { background:#eee; border-radius:4px; height:5px; overflow:hidden; } .pc__progress-bar { background:var(--primary,#3b82f6); height:100%; border-radius:4px; transition:width .3s; } .pc__cta { text-align:center; margin-top:8px; padding:8px 0 2px; font-size:12.5px; font-weight:700; color:var(--primary,#ef4056); background:none; border:0; border-radius:0; opacity:.9; transition:opacity .2s; } .pc:hover .pc__cta { opacity:1; } .ck-item__type-badge { display:inline-block; font-size:11px; color:#666; background:#f5f5f5; padding:2px 8px; border-radius:4px; margin-top:2px; } .ck-oi__type-label { display:block; font-size:11px; color:#888; margin-top:2px; } .ck-oi__type-label i { margin-left:3px; } .cp-crumb { display:flex; align-items:center; flex-wrap:wrap; padding:12px 0 8px; font-size:12px; color:#999; } .cp-crumb a { color:#888; transition:color .2s; } .cp-crumb a:hover { color:var(--primary); } .cp-crumb__current { color:#444; font-weight:600; } .cp-brand-header { display:flex; align-items:center; gap:16px; padding:16px 20px; background:#fff; border-radius:14px; border:1px solid #f0f0f0; margin-bottom:16px; } .cp-brand-header__logo { flex-shrink:0; width:80px; height:64px; display:flex; align-items:center; justify-content:center; background:#f8f8f8; border-radius:8px; padding:8px; overflow:hidden; } .cp-brand-header__logo img { max-width:100%; max-height:100%; object-fit:contain; } .cp-brand-header__title { font-size:18px; font-weight:700; margin:0 0 4px; } .cp-brand-header__count { font-size:13px; color:#888; } .cp-subcats { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:16px; } .cp-subcat { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#fff; border:1px solid #eee; border-radius:10px; font-size:13px; color:#444; transition:all .2s; text-decoration:none; } .cp-subcat:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); } .cp-subcat img { width:28px; height:28px; object-fit:contain; border-radius:6px; } .category-page:where(*), html:has(.cp-layout), body:has(.cp-layout) { overflow-x:clip !important; } .cp-layout { display:grid; grid-template-columns:260px 1fr; gap:20px; padding-bottom:40px; } .cp-sidebar { background:#fff; border-radius:14px; border:1px solid #f0f0f0; position:sticky; top:calc(var(--storefront-sticky-offset, 0px) + 14px); z-index:20; align-self:start; max-height:calc(100dvh - var(--storefront-sticky-offset, 0px) - 28px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; transition:top .2s ease, max-height .2s ease; } .cp-filter { padding:16px; border-bottom:1px solid #f5f5f5; } .cp-filter:last-child { border-bottom:none; } .cp-filter__title { font-size:13px; font-weight:700; color:#222; margin:0 0 10px; } .cp-filter__search { position:relative; } .cp-filter__search i { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#bbb; font-size:14px; } .cp-filter__search input { width:100%; border:1px solid #e8e8e8; border-radius:10px; padding:10px 36px 10px 12px; font-size:13px; background:#fafbfc; outline:none; transition:border-color .2s; } .cp-filter__search input:focus { border-color:var(--primary); background:#fff; } .cp-brands { display:flex; flex-wrap:wrap; gap:6px; } .cp-brand { display:inline-flex; align-items:center; padding:6px 14px; border-radius:8px; border:1.5px solid #e8e8e8; font-size:12px; color:#555; cursor:pointer; transition:all .2s; background:#fff; } .cp-brand:hover { border-color:var(--primary-light); } .cp-brand--active { border-color:var(--primary) !important; background:var(--primary-light); color:var(--primary); font-weight:600; } .cp-price-row { display:flex; flex-direction:column; gap:8px; padding-top:4px; } .cp-price-field { display:flex; align-items:center; gap:6px; padding:0 10px; background:#fafbfc; border:1px solid #e8e8e8; border-radius:8px; transition:border-color .2s; } .cp-price-field:focus-within { border-color:var(--primary); background:#fff; } .cp-price-field span { font-size:12px; color:#888; white-space:nowrap; } .cp-price-field input { flex:1; border:none; background:transparent; padding:9px 0; font-size:13px; font-weight:600; color:#333; outline:none; text-align:center; min-width:0; } .cp-price-field small { font-size:11px; color:#999; } .cp-filter--clear { text-align:center; } .cp-filter--clear button { background:none; border:none; color:#ef4444; font-size:12px; cursor:pointer; padding:6px 12px; border-radius:6px; transition:background .15s; } .cp-filter--clear button:hover { background:#fef2f2; } .cp-filter-group__title { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#aaa; font-weight:700; padding:14px 16px 4px; border-top:1px solid #f0f0f0; } .cp-filter-group:first-child .cp-filter-group__title { border-top:none; } .cp-attr-values { display:flex; flex-wrap:wrap; gap:6px; } .cp-attr-value { display:inline-flex; align-items:center; gap:3px; padding:4px 10px; border:1px solid #e0e0e0; border-radius:20px; cursor:pointer; font-size:12px; color:#555; user-select:none; transition:border-color .15s, background .15s, color .15s; line-height:1.4; } .cp-attr-value:hover { border-color:var(--primary); color:var(--primary); } .cp-attr-value--active { background:var(--primary); border-color:var(--primary) !important; color:#fff; font-weight:600; } .cp-attr-count { font-size:11px; opacity:0.65; } .cp-attr-value--active .cp-attr-count { opacity:0.8; } .cp-main { min-width:0; } .cp-toolbar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-radius:14px; border:1px solid #f0f0f0; margin-bottom:16px; flex-wrap:wrap; } .cp-toolbar__filter-btn { display:none; align-items:center; gap:5px; padding:8px 14px; border-radius:8px; background:var(--primary); color:#fff; border:none; font-size:12px; font-weight:600; cursor:pointer; position:relative; flex-shrink:0; } .cp-toolbar__dot { width:7px; height:7px; background:#ef4444; border-radius:50%; position:absolute; top:4px; left:4px; } .cp-toolbar__sort { display:flex; align-items:center; gap:4px; flex:1; flex-wrap:wrap; } .cp-toolbar__sort-label { font-size:12px; color:#888; display:flex; align-items:center; gap:4px; margin-left:4px; white-space:nowrap; } [dir="rtl"] .cp-toolbar__sort-label { margin-left:0; margin-right:4px; } .cp-toolbar__sort-btn { padding:6px 14px; border:1px solid #e8e8e8; border-radius:8px; background:#fff; font-size:12px; color:#666; cursor:pointer; transition:all .2s; white-space:nowrap; } .cp-toolbar__sort-btn:hover { border-color:var(--primary-light); color:var(--primary); } .cp-toolbar__sort-btn--active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); font-weight:600; } .cp-toolbar__count { font-size:12px; color:#999; margin-right:auto; white-space:nowrap; } [dir="rtl"] .cp-toolbar__count { margin-right:0; margin-left:auto; } .cp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 300px)); gap:14px; justify-content:start; transition:opacity .2s; } .cp-grid--grid_4 { grid-template-columns:repeat(4, minmax(0, 1fr)); } .cp-grid--grid_6 { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; } .cp-grid--list { grid-template-columns:minmax(0, 1fr); } .cp-grid--list .pc { display:grid; grid-template-columns:clamp(170px, 22vw, 230px) minmax(0, 1fr); min-height:220px; } .cp-grid--list .pc__img { aspect-ratio:1 / 1; min-height:100%; } .cp-grid--list .pc__body { min-height:0; padding:18px 20px; } .cp-grid--list .pc__title { min-height:0; font-size:15px; -webkit-line-clamp:2; } .cp-grid--list .pc__bottom { min-height:0; } .cp-grid > .cp-empty { min-width:100%; } .cp-grid--loading { opacity:.4; pointer-events:none; } .cp-loading { display:flex; align-items:center; justify-content:center; min-height:300px; } .cp-empty { grid-column:1/-1; text-align:center; padding:60px 20px; color:#ccc; } .cp-empty i { font-size:3rem; } .cp-empty p { margin-top:12px; font-size:14px; color:#888; } .cp-empty__btn { margin-top:16px; padding:8px 20px; border:1px solid var(--primary); border-radius:8px; background:none; color:var(--primary); font-size:13px; cursor:pointer; transition:all .2s; } .cp-empty__btn:hover { background:var(--primary); color:#fff; } .cp-pagination { margin-top:20px; display:flex; justify-content:center; } .cp-pagination nav { width:auto; } .cp-view-switch { display:inline-flex; align-items:center; flex:0 0 auto; gap:3px; padding:3px; border:1px solid var(--border-color, #e8e8e8); border-radius:10px; background:color-mix(in srgb, var(--surface, #fff) 90%, var(--body-bg, #f6f7f9)); } .cp-view-switch__button { display:inline-grid; width:32px; height:32px; padding:0; place-items:center; border:0; border-radius:7px; color:var(--text-muted, #8b909a); background:transparent; cursor:pointer; transition:color .16s ease, background-color .16s ease, box-shadow .16s ease; } .cp-view-switch__button:hover { color:var(--primary, #ef4056); } .cp-view-switch__button.is-active { color:var(--primary, #ef4056); background:var(--surface, #fff); box-shadow:0 2px 7px rgba(21, 26, 36, .09); } .cp-view-switch__button:focus-visible { outline:2px solid color-mix(in srgb, var(--primary, #ef4056) 38%, transparent); outline-offset:2px; } .pc__image--secondary { position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; } .pc__image--primary { position:relative; z-index:1; opacity:1; } .pc__image { transform:scale(1); transition:opacity .28s ease, transform .28s ease; } html[data-product-card-style="digikala"] .pc { border-color:var(--border-color, #e0e0e2); border-radius:12px; box-shadow:none; } html[data-product-card-style="digikala"] .pc__body { min-height:142px; padding:11px 12px 12px; gap:5px; } html[data-product-card-style="digikala"] .pc__title { min-height:44px; font-size:13px; line-height:1.7; } html[data-product-card-style="digikala"] .pc__bottom { min-height:44px; align-items:flex-end; } html[data-product-card-style="digikala"] .pc__price-row { justify-content:flex-end; } html[data-product-card-style="digikala"] .pc__price { font-size:15px; } html[data-product-card-style="digikala"] .pc__cta { display:none; } html[data-product-card-style="modern"] .pc { border-color:color-mix(in srgb, var(--border-color, #e7e7e7) 82%, transparent); box-shadow:0 8px 24px rgba(24, 30, 42, .055); } html[data-product-card-style="minimal"] .pc { border-color:transparent; border-radius:0; box-shadow:none; background:transparent; } html[data-product-card-style="minimal"] .pc__img { background:transparent; } html[data-product-card-style="minimal"] .pc__body { padding-inline:4px; } html[data-product-card-style="minimal"] .pc__cta { display:none; } html[data-product-card-hover="none"] .pc:hover, html[data-product-card-hover="none"] .pb-product-carousel .pc:hover { transform:none; box-shadow:var(--w-shadow, none); } html[data-product-card-hover="none"] .pc:hover .pc__image, html[data-product-card-hover="none"] .pb-product-carousel .pc:hover .pc__image { transform:none; } html[data-product-card-hover="none"] .pc:hover .pc__title { color:var(--text, #2b2d42); } html[data-product-card-hover="subtle"] .pc:hover { transform:translateY(-2px); } html[data-product-card-hover="subtle"] .pc:hover .pc__image { transform:scale(1.012); } html[data-product-card-hover="subtle"] .pc__image--secondary { display:none; } @media (hover:hover) and (pointer:fine) { html[data-product-card-hover="image_swap"] .pc:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(24, 30, 42, .08); } html[data-product-card-hover="image_swap"] .pc:hover .pc__image { transform:none; } html[data-product-card-hover="image_swap"] .pc--has-secondary:hover .pc__image--primary { opacity:0; } html[data-product-card-hover="image_swap"] .pc--has-secondary:hover .pc__image--secondary { opacity:1; } } @media (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) { .pc, .pc__image, .pc:hover, .pc:hover .pc__image { transform:none !important; transition-duration:.01ms !important; } .pc__image--primary { opacity:1 !important; } .pc__image--secondary { opacity:0 !important; } } .cp-sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1070; opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(2px); } .cp-sidebar__mobile-head, .cp-sidebar__mobile-footer { display:none; } body:has(.cp-sidebar--open) { overflow:hidden !important; } body:has(.cp-sidebar--open) .cp-sidebar-overlay { opacity:1; pointer-events:auto; } @media (max-width: 1200px) { .cp-grid--grid_4 { grid-template-columns:repeat(4, minmax(0, 1fr)); } .cp-grid--grid_6 { grid-template-columns:repeat(4, minmax(0, 1fr)); } } @media (max-width: 991px) { .cp-layout { grid-template-columns:1fr; } .cp-toolbar__filter-btn { display:flex; } .cp-sidebar { position:fixed; top:var(--storefront-sticky-offset, 0px); right:-300px; width:280px; height:calc(100dvh - var(--storefront-sticky-offset, 0px)); max-height:none; z-index:1080; border-radius:16px 0 0; border:none; overflow-y:auto; display:flex; flex-direction:column; background:var(--ui-surface, #fff) !important; transition:right .35s cubic-bezier(.4,0,.2,1); box-shadow:-12px 0 40px rgba(20, 24, 40, .16); scrollbar-gutter:auto; } html[data-surface-tone="dark"] body .cp-sidebar.cp-sidebar { background:var(--ui-surface, #fff) !important; } .cp-sidebar--open { right:0; } .cp-sidebar__mobile-head { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--ui-surface, #fff); border-bottom:1px solid color-mix(in srgb, var(--text, #25242e) 10%, transparent); } .cp-sidebar__mobile-head > div { display:flex; flex-direction:column; gap:2px; min-width:0; } .cp-sidebar__mobile-head strong { color:var(--text, #25242e); font-size:15px; font-weight:800; } .cp-sidebar__mobile-head span { color:var(--muted, #777); font-size:10px; } .cp-sidebar__mobile-head button { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:11px; color:var(--text, #25242e); background:color-mix(in srgb, var(--text, #25242e) 7%, transparent); cursor:pointer; } .cp-sidebar__mobile-footer { position:sticky; bottom:0; z-index:3; display:block; margin-top:auto; padding:12px 16px max(12px, env(safe-area-inset-bottom)); background:var(--ui-surface, #fff); border-top:1px solid color-mix(in srgb, var(--text, #25242e) 10%, transparent); } .cp-sidebar__mobile-footer button { width:100%; min-height:44px; padding:10px 16px; border-radius:12px; background:var(--primary); color:#fff; font-size:13px; font-weight:800; cursor:pointer; } .cp-grid--grid_4 { grid-template-columns:repeat(3, minmax(0, 1fr)); } .cp-grid--grid_6 { grid-template-columns:repeat(4, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .cp-grid--grid_4, .cp-grid--grid_6 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; } .cp-grid--list .pc { grid-template-columns:132px minmax(0, 1fr); min-height:160px; } .cp-grid--list .pc__body { padding:12px; } .cp-toolbar { padding:10px 12px; gap:8px; } .cp-toolbar__sort-btn { padding:5px 10px; font-size:11px; } .cp-toolbar__sort-label { display:none; } } @media (max-width: 480px) { .cp-grid--grid_4, .cp-grid--grid_6 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; } .cp-grid--list .pc { grid-template-columns:112px minmax(0, 1fr); min-height:142px; } .cp-grid--list .pc__body { padding:9px 10px; } .cp-grid--list .pc__brand, .cp-grid--list .pc__cta { display:none; } .pc__body { padding:8px 10px; } .pc__title { font-size:12px; } .pc__price { font-size:13px; } } .ck-progress { display:flex; align-items:center; justify-content:center; gap:0; padding:20px 0 28px; } .ck-step { display:flex; align-items:center; gap:8px; } .ck-step__num { width:32px; height:32px; border-radius:50%; border:2px solid #ddd; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#999; background:#fff; transition:all .2s; } .ck-step__label { font-size:13px; color:#999; font-weight:500; } .ck-step--active .ck-step__num { border-color:var(--primary); background:var(--primary); color:#fff; } .ck-step--active .ck-step__label { color:var(--primary); font-weight:700; } .ck-step--done .ck-step__num { border-color:var(--primary); background:var(--primary-light); color:var(--primary); } .ck-step--done .ck-step__label { color:var(--primary); } .ck-step--link { cursor:pointer; text-decoration:none; } .ck-step--link:hover .ck-step__label { text-decoration:underline; } .ck-step__line { width:60px; height:2px; background:#e8e8e8; margin:0 8px; } .ck-step__line--done { background:var(--primary); } .ck-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#888; margin-bottom:16px; transition:color .2s; } .ck-back:hover { color:var(--primary); } .ck-back i { font-size:12px; } .ck-layout { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; position:relative; transition:opacity .2s; } .ck-layout--loading { opacity:.45; pointer-events:none; } .ck-layout--loading::before { content:''; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:32px; height:32px; border:3px solid var(--primary-light); border-top-color:var(--primary); border-radius:50%; animation:ck-spin .6s linear infinite; z-index:999; } @keyframes ck-spin { to { transform:translate(-50%,-50%) rotate(360deg); } } .ck-card { background:#fff; border:1px solid #f0f0f0; border-radius:14px; overflow:hidden; margin-bottom:16px; } .ck-card--warn { border-color:#fbbf24; } .ck-card--sticky { position:sticky; top:16px; } .ck-card__head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 20px; border-bottom:1px solid #f5f5f5; background:#fafbfc; } .ck-card__head h6 { margin:0; font-size:14px; font-weight:700; color:#222; display:flex; align-items:center; gap:8px; } .ck-card__head i { color:var(--primary); } .ck-card__badge { font-size:11px; color:#999; font-weight:400; } .ck-card__action { background:none; border:1px solid var(--primary); color:var(--primary); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; } .ck-card__action:hover { background:var(--primary); color:#fff; } .ck-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; font-size:11px; font-weight:700; } .ck-item { display:flex; gap:14px; padding:16px 20px; border-bottom:1px solid #f5f5f5; position:relative; align-items:flex-start; } .ck-item:last-child { border-bottom:none; } .ck-item__img { width:80px; height:80px; border-radius:10px; overflow:hidden; background:#fafbfc; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .ck-item__img img { width:100%; height:100%; object-fit:contain; } .ck-item__img i { font-size:24px; color:#ddd; } .ck-item__info { flex:1; min-width:0; } .ck-item__title { font-size:13px; font-weight:600; color:#222; display:block; margin-bottom:4px; line-height:1.6; } .ck-item__title:hover { color:var(--primary); } .ck-item__opts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .ck-item__opts span { font-size:11px; color:#888; background:#f5f5f5; padding:2px 8px; border-radius:6px; } .ck-item__bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; } .ck-item__price { text-align:left; } [dir="rtl"] .ck-item__price { text-align:right; } .ck-item__price-old { font-size:12px; color:#999; text-decoration:line-through; display:block; } .ck-item__discount { font-size:10px; background:#ef4444; color:#fff; padding:1px 5px; border-radius:4px; margin-right:4px; } .ck-item__price-now { font-size:15px; font-weight:800; color:#111; } .ck-item__price-now small { font-size:10px; color:#888; margin-right:2px; } .ck-item__del { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border:1px solid #fca5a5; border-radius:6px; background:#fff; color:#ef4444; font-size:11px; font-weight:500; cursor:pointer; transition:all .15s; white-space:nowrap; } .ck-item__del:hover { background:#ef4444; color:#fff; border-color:#ef4444; } .ck-item__del i { font-size:12px; } .ck-qty { display:flex; align-items:center; border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; } .ck-qty__btn { width:32px; height:32px; border:none; background:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; color:#555; cursor:pointer; transition:all .15s; } .ck-qty__btn:hover { background:var(--primary-light); color:var(--primary); } .ck-qty__btn--del { color:#ef4444; } .ck-qty__btn--del:hover { background:#fef2f2; color:#ef4444; } .ck-qty__num { width:36px; text-align:center; font-size:14px; font-weight:700; border-right:1px solid #eee; border-left:1px solid #eee; line-height:32px; } .ck-summary__body { padding:16px 20px; } .ck-summary__row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; color:#555; } .ck-summary__row--discount span:last-child { color:#ef4444; } .ck-summary__divider { height:1px; background:#f0f0f0; margin:8px 0; } .ck-summary__total { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:16px; font-weight:800; color:var(--primary); } .ck-summary__total small { font-size:11px; font-weight:400; } .ck-summary__action { padding:0 20px 16px; } .ck-btn { width:100%; padding:14px; border:none; border-radius:12px; font-size:14px; font-weight:700; background:var(--primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .25s; } .ck-btn:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.1); } .ck-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; } .ck-btn--disabled, .ck-btn--disabled:hover { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; } .ck-checkout-warning { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; margin-bottom:10px; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; color:#9a3412; font-size:12px; line-height:1.8; font-weight:600; } .ck-checkout-warning i { flex-shrink:0; margin-top:4px; color:#f97316; } .ck-pay__status { margin-right:auto; color:#9a3412; font-weight:700; } .ck-trust { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; font-size:11px; color:#999; border-top:1px solid #f5f5f5; } .ck-trust i { color:var(--primary); } .ck-empty { text-align:center; padding:80px 20px; } .ck-empty i { font-size:4rem; color:#ddd; } .ck-empty h4 { margin-top:16px; font-size:18px; color:#444; font-weight:700; } .ck-empty p { font-size:13px; color:#888; margin-top:4px; } .ck-empty__btn { display:inline-flex; align-items:center; gap:6px; margin-top:20px; padding:10px 24px; border-radius:10px; background:var(--primary); color:#fff; font-size:13px; font-weight:600; transition:all .2s; } .ck-empty__btn:hover { background:var(--primary-dark); color:#fff; } .ck-pending { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid #fef3c7; } .ck-pending:last-child { border-bottom:none; } .ck-pending strong { font-size:13px; } .ck-pending span { font-size:12px; color:#666; margin-right:12px; } .ck-pending__actions { display:flex; align-items:center; gap:8px; } .ck-pending__btn { font-size:12px; color:var(--primary); font-weight:600; display:flex; align-items:center; gap:4px; } .ck-pending__cancel { width:28px; height:28px; border-radius:6px; border:1px solid #fca5a5; background:#fff; color:#ef4444; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .15s; } .ck-pending__cancel:hover { background:#ef4444; color:#fff; border-color:#ef4444; } .ck-addr-warn { display:flex; align-items:center; gap:8px; padding:10px 20px; background:#fef3c7; color:#92400e; font-size:12px; font-weight:500; border-bottom:1px solid #fde68a; } .ck-addr-warn i { font-size:14px; } .ck-addresses { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; padding:16px 20px; } .ck-addr { padding:14px 16px; border:1.5px solid #e8e8e8; border-radius:12px; cursor:pointer; transition:all .2s; } .ck-addr:hover { border-color:var(--primary-light); } .ck-addr--active { border-color:var(--primary); background:var(--primary-light); } .ck-addr__top { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .ck-addr__radio { width:18px; height:18px; border-radius:50%; border:2px solid #ccc; flex-shrink:0; position:relative; transition:border-color .2s; } .ck-addr__radio--on { border-color:var(--primary); } .ck-addr__radio--on::after { content:''; position:absolute; top:3px; left:3px; width:8px; height:8px; border-radius:50%; background:var(--primary); } .ck-addr__top strong { flex:1; font-size:13px; color:#222; } .ck-addr__edit { background:none; border:1px solid #e5e5e5; border-radius:6px; padding:4px 10px; font-size:11px; color:#888; cursor:pointer; display:flex; align-items:center; gap:4px; transition:all .15s; flex-shrink:0; } .ck-addr__edit:hover { border-color:var(--primary); color:var(--primary); } .ck-addr--active .ck-addr__edit { border-color:var(--primary); color:var(--primary); } .ck-addr p { font-size:12px; color:#666; line-height:1.7; margin:0 0 8px; padding-right:28px; } [dir="ltr"] .ck-addr p { padding-right:0; padding-left:28px; } .ck-addr__meta { display:flex; gap:12px; font-size:11px; color:#888; padding-right:28px; } [dir="ltr"] .ck-addr__meta { padding-right:0; padding-left:28px; } .ck-addr__meta i { color:var(--primary); margin-left:3px; } .ck-addr-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:32px; border:2px dashed #ddd; border-radius:12px; cursor:pointer; color:#999; transition:all .2s; grid-column:1/-1; } .ck-addr-empty:hover { border-color:var(--primary); color:var(--primary); } .ck-addr-empty i { font-size:24px; } .ck-shipping-list,.ck-pay-list { padding:12px 20px; display:flex; flex-direction:column; gap:8px; } .ck-ship,.ck-pay { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1.5px solid #e8e8e8; border-radius:10px; cursor:pointer; transition:all .2s; } .ck-ship:hover,.ck-pay:hover { border-color:var(--primary-light); } .ck-ship--active,.ck-pay--active { border-color:var(--primary); background:var(--primary-light); } .ck-ship__radio { width:18px; height:18px; border:2px solid #ccc; border-radius:50%; flex-shrink:0; position:relative; transition:border-color .2s; } .ck-ship__radio--on { border-color:var(--primary); } .ck-ship__radio--on::after { content:''; position:absolute; top:3px; left:3px; width:8px; height:8px; border-radius:50%; background:var(--primary); } .ck-ship__info { flex:1; } .ck-ship__info strong { font-size:13px; color:#222; display:block; } .ck-ship__info small { font-size:11px; color:#888; } .ck-ship__price { font-size:13px; font-weight:700; color:#222; white-space:nowrap; } .ck-pay i { font-size:18px; color:var(--primary); } .ck-pay span { font-size:13px; font-weight:600; color:#333; } .ck-pay--disabled { cursor:default; opacity:.7; } .ck-pay--disabled:hover { border-color:#e8e8e8; } .ck-pay--disabled i { color:#aaa; } .ck-pay--disabled span { color:#888; } .ck-pay__charge-link { margin-right:auto; font-size:12px; font-weight:600; color:var(--primary); text-decoration:none; white-space:nowrap; } .ck-pay__charge-link:hover { text-decoration:underline; } .ck-gateways { display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 12px; } .ck-gw { padding:8px 18px; border:1.5px solid #e8e8e8; border-radius:8px; background:#fff; font-size:12px; font-weight:600; color:#555; cursor:pointer; transition:all .2s; } .ck-gw:hover { border-color:var(--primary-light); } .ck-gw--active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); } .ck-extras { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 20px; } .ck-coupon__input { display:flex; gap:8px; } .ck-coupon__input input { flex:1; border:1px solid #e8e8e8; border-radius:8px; padding:8px 12px; font-size:13px; outline:none; } .ck-coupon__input input:focus { border-color:var(--primary); } .ck-coupon__input button { padding:8px 16px; border:none; border-radius:8px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; } .ck-coupon__applied { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#f0fdf4; border-radius:8px; font-size:12px; color:#16a34a; } .ck-coupon__remove { background:none; border:none; color:#ef4444; cursor:pointer; margin-right:auto; } [dir="rtl"] .ck-coupon__remove { margin-right:0; margin-left:auto; } .ck-note textarea { width:100%; border:1px solid #e8e8e8; border-radius:8px; padding:8px 12px; font-size:13px; font-family:inherit; resize:vertical; outline:none; } .ck-note textarea:focus { border-color:var(--primary); } .ck-order-items { padding:12px 20px; border-bottom:1px solid #f5f5f5; max-height:180px; overflow-y:auto; } .ck-items-preview { padding:0; } .ck-ip { display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid #f5f5f5; } .ck-ip:last-child { border-bottom:none; } .ck-ip__img { width:56px; height:56px; border-radius:10px; overflow:hidden; background:#fafbfc; flex-shrink:0; } .ck-ip__img img { width:100%; height:100%; object-fit:contain; } .ck-ip__info { flex:1; min-width:0; } .ck-ip__name { font-size:13px; font-weight:600; color:#222; display:block; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ck-ip__opts { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; } .ck-ip__opts span { font-size:10px; color:#888; background:#f5f5f5; padding:2px 8px; border-radius:4px; } .ck-ip__end { text-align:left; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:2px; } [dir="rtl"] .ck-ip__end { text-align:right; align-items:flex-start; } .ck-ip__qty { font-size:11px; color:#999; } .ck-ip__price { font-size:13px; font-weight:700; color:#111; } .ck-ip__price small { font-size:10px; color:#888; } @media (max-width:575px) { .ck-ip { gap:10px; padding:10px 14px; } .ck-ip__img { width:44px; height:44px; } .ck-ip__name { font-size:12px; } } .ck-oi { display:flex; align-items:center; gap:10px; padding:4px 0; } .ck-oi__img { width:40px; height:40px; border-radius:8px; overflow:hidden; background:#fafbfc; position:relative; flex-shrink:0; } .ck-oi__img img { width:100%; height:100%; object-fit:contain; } .ck-oi__qty { position:absolute; bottom:-2px; right:-2px; min-width:16px; height:16px; border-radius:8px; background:var(--primary); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; } .ck-oi__info { flex:1; min-width:0; } .ck-oi__title { font-size:12px; color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .ck-oi__opts { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; } .ck-oi__opts span { font-size:10px; color:#888; background:#f5f5f5; padding:1px 6px; border-radius:4px; } .ck-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9999999; backdrop-filter:blur(2px); } .ck-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:600px; max-height:90vh; background:#fff; border-radius:16px; z-index:9999999; overflow:hidden; display:flex; flex-direction:column; } .ck-modal__head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0f0f0; } .ck-modal__head h6 { margin:0; font-size:15px; font-weight:700; } .ck-modal__head button { background:none; border:none; font-size:18px; color:#999; cursor:pointer; } .ck-modal__body { padding:20px; overflow-y:auto; flex:1; } .ck-modal__foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #f0f0f0; background:#fafbfc; } .ck-modal__cancel { padding:8px 20px; border:1px solid #ddd; border-radius:8px; background:#fff; font-size:13px; color:#666; cursor:pointer; } .ck-label { display:block; font-size:12px; font-weight:600; color:#555; margin-bottom:4px; } .ck-input { width:100%; border:1px solid #e8e8e8; border-radius:8px; padding:9px 12px; font-size:13px; font-family:inherit; outline:none; transition:border-color .2s; background:#fff; } .ck-input:focus { border-color:var(--primary); } textarea.ck-input { resize:vertical; } @media (max-width: 991px) { .ck-layout { grid-template-columns:1fr; } .ck-card--sticky { position:static; } .ck-addresses { grid-template-columns:1fr; } } @media (max-width: 575px) { .ck-progress { gap:0; } .ck-step__label { font-size:11px; } .ck-step__line { width:30px; } .ck-item { flex-wrap:wrap; gap:10px; } .ck-item__img { width:64px; height:64px; } .ck-item__bottom { flex-direction:column; align-items:flex-start; } .ck-extras { grid-template-columns:1fr; } .ck-modal { width:95%; max-height:95vh; } } .sr-box { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:12px; padding:16px 20px; background:#fff; border:1px solid #f0f0f0; border-radius:14px; margin-bottom:16px; } .sr-box__input { min-width:0; position:relative; } .sr-box__input i { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#bbb; font-size:16px; pointer-events:none; } [dir="ltr"] .sr-box__input i { right:auto; left:14px; } .sr-box__input input { width:100%; border:1px solid #e8e8e8; border-radius:10px; padding:12px 42px 12px 14px; font-size:14px; font-family:inherit; background:#fafbfc; outline:none; transition:border-color .2s; } [dir="ltr"] .sr-box__input input { padding:12px 14px 12px 42px; } .sr-box__input input:focus { border-color:var(--primary); background:#fff; } .sr-box__input input::-webkit-search-cancel-button { cursor:pointer; } .sr-box__submit { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:10px 20px; border:1px solid var(--primary); border-radius:10px; background:var(--primary); color:#fff; font:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; transition:filter .18s ease, transform .18s ease, box-shadow .18s ease; } .sr-box__submit i { position:static; transform:none; color:inherit; font-size:14px; pointer-events:none; } .sr-box__submit:hover { filter:brightness(.95); box-shadow:0 7px 18px color-mix(in srgb, var(--primary) 24%, transparent); } .sr-box__submit:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 22%, transparent); outline-offset:2px; } .sr-box__submit:active { transform:translateY(1px); } .sr-box__count { font-size:12px; color:#888; white-space:nowrap; flex-shrink:0; } .sr-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } .sr-grid.cp-grid--grid_4 { grid-template-columns:repeat(4, minmax(0, 1fr)); } .sr-grid.cp-grid--grid_6 { grid-template-columns:repeat(6, minmax(0, 1fr)); } .sr-grid.cp-grid--list { grid-template-columns:minmax(0, 1fr); } .sr-type-chips { display:flex; flex-wrap:wrap; gap:6px; } .sr-type-chip { padding:5px 14px; border-radius:20px; border:1px solid #e0e0e0; background:#fff; font-size:12px; color:#555; cursor:pointer; transition:all .2s; } .sr-type-chip:hover { border-color:var(--primary); color:var(--primary); } .sr-type-chip--active { background:var(--primary); color:#fff; border-color:var(--primary); } .sr-type-chip span { font-size:11px; opacity:.7; margin-right:2px; } .sr-empty { text-align:center; padding:80px 20px; color:#ccc; } .sr-empty i { font-size:4rem; opacity:.4; } .sr-empty h4 { margin-top:16px; font-size:18px; color:#555; font-weight:700; } .sr-empty p { font-size:13px; color:#888; margin-top:4px; } @media (max-width:1199.98px) { .sr-grid.cp-grid--grid_4 { grid-template-columns:repeat(3, minmax(0, 1fr)); } .sr-grid.cp-grid--grid_6 { grid-template-columns:repeat(4, minmax(0, 1fr)); } } @media (max-width:767.98px) { .sr-grid.cp-grid--grid_4, .sr-grid.cp-grid--grid_6 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; } } @media (max-width:575px) { .sr-box { grid-template-columns:minmax(0, 1fr) auto; gap:8px; padding:12px; } .sr-box__input input { min-height:44px; padding:10px 36px 10px 10px; font-size:13px; } .sr-box__submit { min-height:44px; padding-inline:16px; } .sr-box__count { grid-column:1 / -1; padding-inline:2px; } .sr-type-chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; } .sr-type-chips::-webkit-scrollbar { display:none; } .sr-type-chip { flex:0 0 auto; } } @media (max-width:359.98px) { .sr-box__submit { padding-inline:13px; } } .db-wrap { padding-top:20px; padding-bottom:40px; min-height:70vh; } .db-layout { display:grid; grid-template-columns:240px 1fr; gap:20px; } .db-side { background: #fff; display: flex; flex-direction: column; overscroll-behavior: contain; overflow: hidden; } .db-side--desktop { border-radius: 14px; border: 1px solid #f0f0f0; position: sticky; top: 16px; height: calc(100vh - 32px); } .db-side--mobile { position: fixed; top: 0; inset-inline-end: 0; width: 320px; max-width: 85vw; height: 100vh; height: 100dvh; z-index: 10000; border-radius: 0; border: none; box-shadow: -10px 0 40px rgba(0,0,0,.18); transition: transform .3s cubic-bezier(.4,0,.2,1); transform: translateX(100%); visibility: hidden; pointer-events: none; } [dir="rtl"] .db-side--mobile { transform: translateX(-100%); } .db-side--mobile.db-side--open { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; } body:has(.db-side--mobile.db-side--open) { overflow: hidden; } .db-side__head { flex-shrink: 0; } .db-side__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; } .db-side__body::-webkit-scrollbar { width: 6px; } .db-side__body::-webkit-scrollbar-track { background: transparent; } .db-side__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; } .db-side__body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.3); } .db-admin-btn { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 10px 14px; background: linear-gradient(135deg, var(--primary, #7367f0) 0%, #5e50ee 100%); color: #fff !important; text-decoration: none; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(115,103,240,.25); transition: transform .15s, box-shadow .15s; } .db-admin-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(115,103,240,.35); color: #fff !important; } .db-admin-btn i { color: #fff; opacity: .9; } .db-user { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: linear-gradient(135deg, var(--primary-light, #f0eeff) 0%, #fff 100%); border-bottom: 1px solid rgba(0,0,0,.06); position: relative; } .db-user__avatar { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: var(--primary, #7367f0); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; box-shadow: 0 4px 12px rgba(115,103,240,.25); } .db-user__avatar img { width: 100%; height: 100%; object-fit: cover; } .db-user__info { flex: 1; min-width: 0; } .db-user__info strong { display: block; font-size: 14px; font-weight: 700; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } .db-user__info span { font-size: 11px; color: #6b7280; letter-spacing: -.01em; } .db-user__edit { width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--primary, #7367f0); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .15s; flex-shrink: 0; border: 1px solid rgba(0,0,0,.06); } .db-user__edit:hover { background: var(--primary, #7367f0); color: #fff; transform: scale(1.05); } .db-menu { padding: 10px 8px; } .db-menu__link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: #374151; text-decoration: none; border: 0; background: none; width: 100%; text-align: right; cursor: pointer; border-radius: 10px; transition: background-color .12s, color .12s; position: relative; } [dir="ltr"] .db-menu__link { text-align: left; } .db-menu__link:hover { background: rgba(115,103,240,.08); color: var(--primary, #7367f0); } .db-menu__link--active { color: #fff; font-weight: 700; background: var(--primary, #7367f0); box-shadow: 0 4px 12px rgba(115,103,240,.3); } .db-menu__link--active:hover { background: var(--primary, #7367f0); color: #fff; } .db-menu__link i { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; opacity: .7; } .db-menu__link--active i { color: #fff; opacity: 1; } .db-menu__link--danger { color: #ef4444; } .db-menu__link--danger i { color: #ef4444; opacity: .8; } .db-menu__link--danger:hover { background: rgba(239,68,68,.08); color: #ef4444; } .db-menu__link--danger:hover i { opacity: 1; } .db-menu__link .badge, .db-menu__link__badge { margin-inline-start: auto; font-size: 10px; padding: 2px 7px; background: var(--bs-danger, #ea5455); color: #fff; border-radius: 999px; font-weight: 700; } .db-menu__link--active .badge { background: rgba(255,255,255,.25); color: #fff; } .db-menu-toggle { display: none; width: 100%; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: var(--primary, #7367f0); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.04); margin-bottom: 16px; text-align: start; align-items: center; gap: 10px; } .db-menu-toggle::after { content: 'منوی داشبورد'; flex: 1; } .db-content { min-width:0; min-height:400px; } .db-card { background:#fff; border:1px solid #f0f0f0; border-radius:14px; overflow:hidden; margin-bottom:16px; } .db-card--welcome { background:linear-gradient(135deg, var(--primary-light) 0%, #fff 100%); border-color:var(--primary-light); } .db-card__head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid #f5f5f5; } .db-card__head h6 { margin:0; font-size:14px; font-weight:700; color:#222; display:flex; align-items:center; gap:8px; } .db-card__head h6 i { color:var(--primary); } .db-card__more { font-size:12px; color:var(--primary); font-weight:600; display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; text-decoration:none; } .db-card__action { background:none; border:1px solid var(--primary); color:var(--primary); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:4px; } .db-card__action:hover { background:var(--primary); color:#fff; } .db-welcome { padding:24px 20px; } .db-welcome__text h4 { font-size:17px; font-weight:700; color:#111; margin:0 0 6px; } .db-welcome__text p { font-size:13px; color:#666; margin:0; line-height:1.7; } .db-welcome__actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } .db-welcome__btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:8px; font-size:12px; font-weight:600; transition:all .2s; background:var(--primary); color:#fff; text-decoration:none; } .db-welcome__btn:hover { background:var(--primary-dark); color:#fff; } .db-welcome__btn--outline { background:none; border:1px solid var(--primary); color:var(--primary); } .db-welcome__btn--outline:hover { background:var(--primary); color:#fff; } .db-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; } .db-stat { background:#fff; border:1px solid #f0f0f0; border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; } .db-stat__icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; } .db-stat__icon--primary { background:var(--primary-light); color:var(--primary); } .db-stat__icon--warning { background:#fef3c7; color:#d97706; } .db-stat__icon--success { background:#dcfce7; color:#16a34a; } .db-stat__data { display:flex; flex-direction:column; } .db-stat__num { font-size:20px; font-weight:800; color:#111; } .db-stat__label { font-size:11px; color:#888; } .db-orders { } .db-order { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid #f5f5f5; text-decoration:none; color:inherit; transition:background .15s; } .db-order:last-child { border-bottom:none; } .db-order:hover { background:#f9fafb; } .db-order__main { flex:1; display:flex; flex-direction:column; gap:2px; } .db-order__num { font-size:13px; font-weight:700; color:#222; } .db-order__date { font-size:11px; color:#999; } .db-order__end { text-align:left; display:flex; flex-direction:column; gap:4px; align-items:flex-end; } [dir="rtl"] .db-order__end { text-align:right; align-items:flex-start; } .db-order__amount { font-size:14px; font-weight:700; color:#111; } .db-order__amount small { font-size:10px; color:#888; } .db-order__status { font-size:10px; font-weight:600; padding:3px 10px; border-radius:6px; display:inline-block; } .db-order__status--success { background:#dcfce7; color:#16a34a; } .db-order__status--warning { background:#fef3c7; color:#d97706; } .db-order__status--danger { background:#fee2e2; color:#dc2626; } .db-order__status--primary { background:var(--primary-light); color:var(--primary); } .db-order__status--info { background:#dbeafe; color:#2563eb; } .db-order__status--secondary { background:#f3f4f6; color:#6b7280; } .db-order__arrow { color:#ccc; font-size:12px; flex-shrink:0; } .db-empty { text-align:center; padding:48px 20px; color:#ccc; } .db-empty i { font-size:3rem; opacity:.4; } .db-empty p { margin-top:10px; font-size:13px; color:#888; } .db-empty__btn { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:8px 20px; border-radius:8px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; transition:all .2s; text-decoration:none; } .db-empty__btn:hover { background:var(--primary-dark); color:#fff; } .db-dhead { display:flex; align-items:center; gap:12px; padding:16px 20px; flex-wrap:wrap; } .db-dhead__back { font-size:12px; color:#888; display:flex; align-items:center; gap:4px; transition:color .2s; text-decoration:none; } .db-dhead__back:hover { color:var(--primary); } .db-dhead__title { display:flex; align-items:center; gap:10px; flex:1; } .db-dhead__title h6 { margin:0; font-size:15px; font-weight:700; color:#222; } .db-dhead__date { font-size:12px; color:#999; display:flex; align-items:center; gap:4px; white-space:nowrap; } .db-dgrid { display:grid; grid-template-columns:1fr 340px; gap:16px; } .db-ditem { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid #f5f5f5; } .db-ditem:last-child { border-bottom:none; } .db-ditem__img { width:64px; height:64px; border-radius:10px; overflow:hidden; background:#fafbfc; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .db-ditem__img img { width:100%; height:100%; object-fit:contain; } .db-ditem__img i { font-size:20px; color:#ddd; } .db-ditem__info { flex:1; min-width:0; } .db-ditem__name { font-size:13px; font-weight:600; color:#222; display:block; line-height:1.6; text-decoration:none; } .db-ditem__name:hover { color:var(--primary); } .db-ditem__opts { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; } .db-ditem__opts span { font-size:10px; color:#888; background:#f5f5f5; padding:2px 8px; border-radius:4px; } .db-ditem__qty { font-size:12px; color:#999; } .db-ditem__action { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--primary,#3b82f6); margin-top:4px; text-decoration:none; } .db-ditem__action:hover { text-decoration:underline; } .db-ditem__action i { font-size:13px; } .db-ditem__price { font-size:14px; font-weight:700; color:#111; white-space:nowrap; flex-shrink:0; } .db-ditem__price small { font-size:10px; color:#888; } .db-daddr { padding:16px 20px; font-size:13px; color:#555; line-height:1.9; } .db-daddr strong { color:#222; display:block; margin-bottom:4px; } .db-daddr p { margin:0 0 6px; } .db-daddr i { color:#aaa; margin-left:4px; } .db-timeline { padding:16px 20px; } .db-tl { display:flex; gap:14px; position:relative; padding-bottom:20px; } .db-tl:last-child { padding-bottom:0; } .db-tl::before { content:''; position:absolute; top:10px; right:5px; width:2px; height:calc(100% - 10px); background:#f0f0f0; } [dir="ltr"] .db-tl::before { right:auto; left:5px; } .db-tl:last-child::before { display:none; } .db-tl__dot { width:12px; height:12px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:4px; } .db-tl__dot--success { background:#28c76f; } .db-tl__dot--danger { background:#ea5455; } .db-tl__dot--warning { background:#ff9f43; } .db-tl__dot--info { background:#00cfe8; } .db-tl__dot--secondary { background:#82868b; } .db-tl__body { flex:1; } .db-tl__body strong { font-size:13px; color:#222; display:block; } .db-tl__body p { font-size:12px; color:#666; margin:2px 0 0; line-height:1.6; } .db-tl__body small { font-size:11px; color:#aaa; } .db-pcgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 20px; } .db-pcgrid__item { position:relative; } .db-pcgrid__del { position:absolute; top:8px; left:8px; z-index:5; width:28px; height:28px; border-radius:8px; border:none; background:rgba(239,68,68,.9); color:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; } [dir="rtl"] .db-pcgrid__del { left:auto; right:8px; } .db-pcgrid__del:hover { background:#dc2626; } .db-addrs { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:16px 20px; } .db-addr { border:1px solid #f0f0f0; border-radius:12px; padding:16px; display:flex; flex-direction:column; justify-content:space-between; } .db-addr__body strong { font-size:14px; color:#222; display:block; margin-bottom:6px; } .db-addr__body p { font-size:13px; color:#666; line-height:1.8; margin:0 0 6px; } .db-addr__body p i { color:#aaa; margin-left:4px; } .db-addr__meta { display:flex; gap:12px; font-size:12px; color:#888; } .db-addr__meta i { color:var(--primary); margin-left:3px; } .db-addr__actions { display:flex; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #f5f5f5; } .db-addr__btn { flex:1; background:none; border:1px solid #e5e5e5; border-radius:8px; padding:7px 0; font-size:12px; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:all .15s; } .db-addr__btn:hover { border-color:var(--primary); color:var(--primary); } .db-addr__btn--del { border-color:#fecaca; color:#ef4444; } .db-addr__btn--del:hover { background:#ef4444; color:#fff; border-color:#ef4444; } .db-qa { padding:16px 20px; border-bottom:1px solid #f5f5f5; } .db-qa:last-of-type { border-bottom:none; } .db-qa__product { display:flex; align-items:center; gap:10px; margin-bottom:12px; text-decoration:none; color:#333; font-size:13px; line-height:1.6; transition:color .15s; } .db-qa__product:hover { color:var(--primary); } .db-qa__pimg { width:48px; height:48px; border-radius:10px; overflow:hidden; background:#fafbfc; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .db-qa__pimg img { width:100%; height:100%; object-fit:contain; } .db-qa__pimg i { color:#ddd; } .db-qa__q { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; } .db-qa__q i { color:#3b82f6; margin-top:3px; flex-shrink:0; } .db-qa__q p { margin:0; font-size:13px; color:#222; line-height:1.8; } .db-qa__a { display:flex; align-items:flex-start; gap:8px; background:#f0fdf4; border-radius:10px; padding:12px 14px; margin-bottom:10px; } .db-qa__a i { color:#16a34a; margin-top:3px; flex-shrink:0; } .db-qa__a p { margin:0; font-size:13px; color:#333; line-height:1.8; } .db-qa__meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; color:#999; } .db-qa__meta i { margin-left:3px; } .db-comment__stars { margin-bottom:6px; } .db-comment__title { font-size:14px; font-weight:600; color:#222; margin:0 0 4px; } .db-comment__body { font-size:13px; color:#555; line-height:1.8; margin:0 0 8px; } @media (max-width:991px) { .db-dgrid { grid-template-columns:1fr; } .db-pcgrid { grid-template-columns:repeat(3,1fr); } .db-addrs { grid-template-columns:1fr; } } @media (max-width:575px) { .db-pcgrid { grid-template-columns:repeat(2,1fr); gap:8px; padding:12px; } .db-ditem { flex-wrap:wrap; } .db-ditem__price { width:100%; text-align:left; } .db-dhead { flex-direction:column; align-items:flex-start; } } .db-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .db-field { display:flex; flex-direction:column; gap:4px; } .db-field--full { grid-column:1/-1; } .db-field__label { font-size:12px; font-weight:600; color:#555; } .db-field__input { width:100%; border:1px solid #e8e8e8; border-radius:10px; padding:10px 14px; font-size:13px; font-family:inherit; outline:none; transition:border-color .2s; background:#fafbfc; } .db-field__input:focus { border-color:var(--primary); background:#fff; } select.db-field__input { appearance:auto; } textarea.db-field__input { resize:vertical; } .db-field__error { font-size:11px; color:#ef4444; } input[type="file"].db-field__input { padding:8px 12px; } .db-form-actions { display:flex; align-items:center; gap:10px; margin-top:20px; } .db-form-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:10px; font-size:13px; font-weight:600; border:none; cursor:pointer; transition:all .2s; text-decoration:none; background:var(--primary); color:#fff; } .db-form-btn:hover { background:var(--primary-dark); color:#fff; } .db-form-btn:disabled { opacity:.5; cursor:not-allowed; } .db-form-btn--outline { background:none; border:1px solid #ddd; color:#666; } .db-form-btn--outline:hover { border-color:var(--primary); color:var(--primary); background:none; } @media (max-width:575px) { .db-form-grid { grid-template-columns:1fr; } .db-form-actions { flex-direction:column; } .db-form-btn { width:100%; justify-content:center; } } .db-content .card { border:1px solid #f0f0f0 !important; border-radius:14px !important; box-shadow:none !important; overflow:hidden; } .db-content .card-header { background:#fafbfc !important; border-bottom:1px solid #f0f0f0 !important; padding:14px 20px !important; font-size:14px; font-weight:700; } .db-content .card-body { padding:20px !important; } .db-content .card-footer { background:#fafbfc !important; border-top:1px solid #f0f0f0 !important; padding:14px 20px !important; } .db-content .btn { border-radius:8px !important; font-size:13px !important; font-weight:600 !important; padding:8px 16px !important; transition:all .2s !important; } .db-content .btn-primary { background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; } .db-content .btn-primary:hover { background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; } .db-content .btn-outline-primary { border-color:var(--primary) !important; color:var(--primary) !important; } .db-content .btn-outline-primary:hover { background:var(--primary) !important; color:#fff !important; } .db-content .btn-outline-danger { border-color:#fca5a5 !important; color:#ef4444 !important; } .db-content .btn-outline-danger:hover { background:#ef4444 !important; color:#fff !important; } .db-content .btn-outline-secondary { border-color:#e5e5e5 !important; color:#666 !important; } .db-content .btn-sm { padding:6px 12px !important; font-size:12px !important; } .db-content .table { font-size:13px; } .db-content .table th { font-weight:600; color:#555; background:#fafbfc; padding:10px 16px; border-bottom:1px solid #f0f0f0; font-size:12px; } .db-content .table td { padding:12px 16px; border-bottom:1px solid #f5f5f5; color:#333; vertical-align:middle; } .db-content .table-hover tbody tr:hover { background:#f9fafb; } .db-content .badge { font-size:11px !important; font-weight:600 !important; padding:4px 10px !important; border-radius:6px !important; } .db-content .bg-primary { background:var(--primary) !important; } .db-content .bg-success { background:#dcfce7 !important; color:#16a34a !important; } .db-content .bg-warning { background:#fef3c7 !important; color:#d97706 !important; } .db-content .bg-danger { background:#fee2e2 !important; color:#dc2626 !important; } .db-content .bg-info { background:#dbeafe !important; color:#2563eb !important; } .db-content .bg-secondary { background:#f3f4f6 !important; color:#6b7280 !important; } .db-content .nav-tabs { border-bottom:none !important; gap:6px; display:flex; flex-wrap:wrap; padding:0; } .db-content .nav-tabs .nav-link { border:1.5px solid #e8e8e8 !important; border-radius:10px !important; padding:8px 16px !important; font-size:12px !important; font-weight:600 !important; color:#666 !important; background:#fff !important; transition:all .2s !important; } .db-content .nav-tabs .nav-link:hover { border-color:var(--primary-light) !important; color:var(--primary) !important; } .db-content .nav-tabs .nav-link.active { border-color:var(--primary) !important; background:var(--primary-light) !important; color:var(--primary) !important; } .db-content .form-control { border:1px solid #e8e8e8 !important; border-radius:10px !important; padding:10px 14px !important; font-size:13px !important; font-family:inherit !important; transition:border-color .2s !important; } .db-content .form-control:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-light) !important; } .db-content .form-select { border:1px solid #e8e8e8 !important; border-radius:10px !important; padding:10px 14px !important; font-size:13px !important; } .db-content .form-select:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-light) !important; } .db-content .form-label { font-size:12px; font-weight:600; color:#555; margin-bottom:4px; } .db-content .modal-content { border:none !important; border-radius:16px !important; } .db-content .modal-header { padding:16px 20px !important; border-bottom:1px solid #f0f0f0 !important; } .db-content .modal-body { padding:20px !important; } .db-content .modal-footer { padding:14px 20px !important; border-top:1px solid #f0f0f0 !important; background:#fafbfc !important; } .db-content .modal-title { font-size:15px !important; font-weight:700 !important; } .db-content .modal-backdrop { backdrop-filter:blur(2px); } .db-content .progress { border-radius:6px; background:#f0f0f0; height:6px !important; } .db-content .progress-bar { background:var(--primary) !important; border-radius:6px; } .db-content .alert { border-radius:10px !important; border:none !important; font-size:13px; padding:12px 16px !important; } .db-content .list-group-item { border-color:#f0f0f0 !important; padding:12px 16px !important; font-size:13px; } .db-content .text-primary { color:var(--primary) !important; } .db-content .border-primary { border-color:var(--primary) !important; } @media (max-width:991px) { .db-layout { grid-template-columns:1fr; } .db-menu-toggle { display: flex; } .db-side__body { padding-bottom: env(safe-area-inset-bottom, 0); } } @media (max-width:575px) { .db-wrap { padding-top:12px; } .db-stats { grid-template-columns:1fr; gap:8px; } .db-welcome { padding:16px; } .db-welcome__text h4 { font-size:15px; } .db-order { padding:12px 14px; } .db-card__head { padding:12px 14px; } .db-card [style*="grid-template-columns:repeat(2"] { grid-template-columns:1fr !important; } } .pd-curriculum-chapter { margin-bottom: 1rem; border: 1px solid #eee; border-radius: 10px; overflow: hidden; } .pd-curriculum-chapter__title { background: #f8f9fa; padding: 12px 16px; margin: 0; font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .pd-curriculum-chapter__title i { color: #d4a843; } .pd-curriculum-chapter__title small { font-weight: 400; font-size: .8rem; margin-right: auto; } .pd-curriculum-lessons { list-style: none; padding: 0; margin: 0; } .pd-curriculum-lesson { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid #f0f0f0; transition: background .15s; } .pd-curriculum-lesson:hover { background: #fafafa; } .pd-curriculum-lesson__icon { color: #888; font-size: .9rem; width: 20px; text-align: center; } .pd-curriculum-lesson__title { flex: 1; font-size: .9rem; color: #333; } .pd-curriculum-lesson__free { background: #e8f5e9; color: #2e7d32; font-size: .75rem; padding: 2px 8px; border-radius: 10px; } .pd-curriculum-lesson__duration { color: #888; font-size: .8rem; font-family: var(--ss02-font, inherit); direction: ltr; } .pd-buy__field { margin-bottom: 14px; } .pd-buy__label { display: block; font-size: .85rem; font-weight: 600; color: #555; margin-bottom: 6px; } .pd-buy__input { width: 100%; padding: 10px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: .9rem; background: #fafafa; transition: border-color .2s; outline: none; font-family: inherit; } .pd-buy__input:focus { border-color: var(--primary, #d4a843); background: #fff; } .pd-buy__select { width: 100%; padding: 10px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: .9rem; background: #fafafa; appearance: none; cursor: pointer; font-family: inherit; } .pd-buy__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .pd-buy__stat { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: #555; background: #f5f5f5; padding: 6px 12px; border-radius: 8px; } .pd-buy__stat i { color: var(--primary, #d4a843); font-size: .9rem; } .pd-buy__stat--full { width: 100%; } .pd-buy__capacity { margin-bottom: 14px; } .pd-buy__capacity-header { display: flex; justify-content: space-between; font-size: .8rem; color: #666; margin-bottom: 6px; } .pd-buy__capacity-bar { height: 8px; background: #eee; border-radius: 99px; overflow: hidden; } .pd-buy__capacity-fill { height: 100%; background: linear-gradient(90deg, #4caf50, #66bb6a); border-radius: 99px; transition: width .5s; } .pd-buy__capacity-fill--warn { background: linear-gradient(90deg, #ff9800, #ffa726); } .pd-buy__countdown { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fef3c7; border:1px solid #fde68a; border-radius:12px; font-size:13px; color:#92400e; margin-bottom:12px; flex-wrap:nowrap; overflow:hidden; } .pd-buy__countdown i { font-size:18px; flex-shrink:0; } .pd-countdown-blocks { display:flex; gap:5px; align-items:center; flex-shrink:0; } .pd-countdown-block { display:flex; flex-direction:column; align-items:center; background:#fff8e7; border:1px solid #fde68a; border-radius:7px; padding:4px 8px; min-width:40px; } .pd-countdown-num { font-size:1.1rem; font-weight:800; line-height:1.2; color:#b45309; } .pd-countdown-label { font-size:0.58rem; font-weight:600; color:#92400e; } .pd-countdown-caption { font-size:0.78rem; color:#b45309; font-weight:600; white-space:nowrap; flex-shrink:0; } .pd-buy__urgency { display:flex; align-items:center; gap:6px; padding:8px 14px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; font-size:13px; color:#dc2626; font-weight:600; margin-bottom:12px; } .pd-buy__urgency i { color:#ef4444; } .pd-buy__capacity-fill--donation { background: linear-gradient(90deg, #e91e63, #f06292); } .pd-buy__preset-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .pd-buy__preset-btn { padding: 8px 16px; border: 1.5px solid #e0e0e0; border-radius: 10px; background: #fafafa; cursor: pointer; font-size: .9rem; font-family: inherit; transition: all .2s; } .pd-buy__preset-btn:hover { border-color: var(--primary, #d4a843); background: #fff; } .pd-buy__preset-btn--active { border-color: var(--primary, #d4a843); background: var(--primary, #d4a843); color: #fff; } .pd-buy__subtotal { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f8f8f8; border-radius: 10px; margin-bottom: 14px; font-size: .9rem; } .pd-buy__subtotal strong { font-size: 1.05rem; color: #111; } .pd-buy__subtotal--deposit { background: #fff3e0; border: 1px solid #ffe0b2; } .pd-buy__info-row { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: #888; margin-bottom: 6px; } .pd-buy__info-row i { color: var(--primary, #d4a843); width: 16px; text-align: center; } .pd-buy__info-row--warn { color:#dc2626; } .pd-buy__info-row--warn i { color:#ef4444; } .pd-slot-chips { display:flex; flex-wrap:wrap; gap:6px; } .pd-slot-chip { padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid #bbf7d0; background:#f0fdf4; color:#166534; cursor:pointer; transition:all .2s; } .pd-slot-chip:hover { background:#dcfce7; border-color:#86efac; } .pd-slot-chip--selected { background:var(--primary,#3b82f6) !important; color:#fff !important; border-color:var(--primary,#3b82f6) !important; } .pd-slot-chip--booked { background:#fef2f2; border-color:#fecaca; color:#dc2626; cursor:not-allowed; opacity:.6; text-decoration:line-through; } .pd-slot-chip--partial { background:#fffbeb; border-color:#fde68a; color:#92400e; } .pd-slot-chip--partial:hover { background:#fef3c7; border-color:#fcd34d; } .pd-slot-chip__remaining { display:block; font-size:9px; color:#b45309; font-weight:400; margin-top:1px; } .pd-buy__locked-value { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-radius:8px; background:#f0f9ff; border:1px solid #bae6fd; } .pd-buy__locked-value span { font-weight:600; color:#0369a1; } .pd-buy__change-btn { font-size:12px; color:var(--primary,#3b82f6); background:transparent; border:none; cursor:pointer; padding:2px 8px; } .pd-buy__change-btn:hover { text-decoration:underline; } .pd-cart-lines__item { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f5f5f5; font-size:12px; } .pd-cart-lines__details { display:flex; gap:10px; flex:1; color:#555; } .pd-cart-lines__details i { margin-left:3px; color:#999; } .pd-cart-lines__timer { display:flex; align-items:center; gap:4px; font-size:11px; color:#f59e0b; white-space:nowrap; } .pd-cart-lines__timer i { font-size:12px; } .pd-cart-lines__timer small { color:#92400e; } .pd-cart-lines__del { color:#dc2626; background:transparent; border:none; cursor:pointer; padding:4px; font-size:14px; } .pd-cart-lines__del:hover { color:#b91c1c; } .pd-cart-lines__expired { font-size:11px; color:#dc2626; white-space:nowrap; display:flex; align-items:center; gap:3px; } .pd-cart-lines__expired i { font-size:12px; } .pd-date-chips { margin-bottom:4px; } .pd-date-chips__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .pd-date-chips__month { font-size:14px; font-weight:700; color:#444; } .pd-date-chips__nav { display:flex; gap:4px; } .pd-date-chips__arrow { width:28px; height:28px; border-radius:50%; border:1px solid #e0e0e0; background:#fff; color:#555; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; } .pd-date-chips__arrow:disabled { opacity:.3; cursor:not-allowed; } .pd-date-chips__arrow:hover:not(:disabled) { background:#f5f5f5; } .pd-date-chips__grid { display:flex; flex-wrap:wrap; gap:4px; } .pd-date-chip { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 8px; border-radius:8px; border:1px solid #e8e8e8; background:#fafafa; cursor:pointer; min-width:56px; transition:all .2s; } .pd-date-chip:hover { background:#f0f0f0; border-color:#d0d0d0; } .pd-date-chip--selected { background:var(--primary,#3b82f6) !important; color:#fff !important; border-color:var(--primary,#3b82f6) !important; } .pd-date-chip--selected .pd-date-chip__day { color:#fff !important; } .pd-date-chip--off { opacity:.4; cursor:not-allowed !important; background:#f5f5f5 !important; } .pd-date-chip__day { font-size:10px; color:#888; } .pd-date-chip__num { font-size:15px; font-weight:700; color:#333; } .pd-date-chip--selected .pd-date-chip__num { color:#fff; } .pd-date-chip__off { font-size:9px; color:#e74c3c; font-weight:600; } .pd-buy__bundle-list { margin-bottom: 14px; } .pd-buy__bundle-title { font-size: .9rem; font-weight: 600; color: #333; margin-bottom: 10px; } .pd-buy__bundle-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; } .pd-buy__bundle-item:last-child { border-bottom: none; } .pd-buy__bundle-item-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #f5f5f5; } .pd-buy__bundle-item-info { flex: 1; } .pd-buy__bundle-item-name { font-size: .85rem; color: #333; } .pd-buy__bundle-item-price { font-size: .8rem; color: #888; } .pd-buy__bundle-summary { background: #f8f8f8; border-radius: 10px; padding: 12px; margin-bottom: 14px; } .pd-buy__bundle-row { display: flex; justify-content: space-between; font-size: .85rem; color: #555; padding: 4px 0; } .pd-buy__bundle-savings { color: #4caf50; font-weight: 700; font-size: .9rem; } .pd-buy__donation-goal { margin-bottom: 14px; } .pd-buy__donation-stats { display: flex; gap: 16px; margin-top: 6px; font-size: .8rem; color: #666; } .pd-buy__enrolled { background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 10px; padding: 12px 14px; text-align: center; margin-bottom: 12px; color: #2e7d32; font-weight: 600; } .pd-buy__enrolled i { margin-left: 6px; } .pd-buy__notice { display: flex; align-items: center; gap: 8px; background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 10px; padding: 10px 14px; font-size: .85rem; color: #1565c0; margin-bottom: 14px; flex-wrap: wrap; } .pd-buy__notice i { font-size: 1.1rem; } .pd-buy__notice--cart { background: #f0fdf4; border-color: #bbf7d0; color: #166534; } .pd-buy__curriculum-link { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 16px; margin-bottom:12px; border:1.5px solid var(--primary,#d4a843); border-radius:10px; color:var(--primary,#d4a843); font-size:.9rem; font-weight:600; text-decoration:none; transition:all .2s; } .pd-buy__curriculum-link:hover { background:var(--primary,#d4a843); color:#fff; text-decoration:none; } .pd-price__cycle { font-size: .75rem; color: #888; font-weight: 400; } .pd-buy__btn--success { background: #4caf50 !important; } .pd-buy__btn--success:hover { background: #43a047 !important; } .pd-buy__btn--donation { background: #e91e63 !important; } .pd-buy__btn--donation:hover { background: #d81b60 !important; } .pd-buy__btn--gift { background: #9c27b0 !important; } .pd-buy__btn--gift:hover { background: #8e24aa !important; } .pd-buy__btn[disabled] { opacity: .6; cursor: not-allowed; } .pd-buy__ticket-qty { display: flex; align-items: center; gap: 0; margin-bottom: 14px; } .pd-buy__ticket-qty button { width: 36px; height: 36px; border: 1.5px solid #e0e0e0; background: #fafafa; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background .15s; } .pd-buy__ticket-qty button:first-child { border-radius: 0 10px 10px 0; } .pd-buy__ticket-qty button:last-child { border-radius: 10px 0 0 10px; } .pd-buy__ticket-qty button:hover { background: #f0f0f0; } .pd-buy__ticket-qty span { width: 44px; height: 36px; display: flex; align-items: center; justify-content: center; border-top: 1.5px solid #e0e0e0; border-bottom: 1.5px solid #e0e0e0; font-weight: 700; font-size: .95rem; } .db-wallet-balance { font-size:2rem; font-weight:800; color:var(--primary); margin-top:8px; } .db-wallet-balance small { font-size:.9rem; font-weight:400; } .db-wallet-charge { padding:16px 20px; } .db-wallet-charge__form { display:flex; flex-direction:column; gap:14px; } .db-wallet-charge__field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#555; } .db-wallet-charge__field .form-control { border-radius:10px; border:1.5px solid #e0e0e0; padding:10px 14px; font-size:14px; } .db-wallet-charge__gateways { display:flex; gap:8px; flex-wrap:wrap; } .db-wallet-charge__gw { padding:8px 16px; border:1.5px solid #e0e0e0; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; transition:all .2s; } .db-wallet-charge__gw:hover { border-color:var(--primary-light); } .db-wallet-charge__gw--active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); } .db-wallet-charge__btn { border:none; border-radius:10px; padding:12px; font-size:14px; font-weight:700; cursor:pointer; } .db-wallet-txns { display:flex; flex-direction:column; } .db-wallet-txn { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid #f0f0f0; gap:12px; } .db-wallet-txn:last-child { border-bottom:none; } .db-wallet-txn__main { display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap; } .db-wallet-txn__type { font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; } .db-wallet-txn__type--credit { background:#d1fae5; color:#065f46; } .db-wallet-txn__type--debit { background:#fee2e2; color:#991b1b; } .db-wallet-txn__reason { font-size:13px; color:#555; } .db-wallet-txn__desc { font-size:12px; color:#888; } .db-wallet-txn__end { text-align:left; min-width:140px; } .db-wallet-txn__amount { display:block; font-size:14px; font-weight:700; } .db-wallet-txn__amount--credit { color:#065f46; } .db-wallet-txn__amount--debit { color:#991b1b; } .db-wallet-txn__amount small { font-size:11px; font-weight:400; } .db-wallet-txn__balance { display:block; font-size:11px; color:#aaa; } .db-wallet-txn__date { display:block; font-size:11px; color:#aaa; margin-top:2px; } .ck-wallet-warn { padding:10px 16px; margin:0 20px 8px; background:#fef3c7; border:1px solid #fbbf24; border-radius:8px; font-size:12px; color:#92400e; } .ck-wallet-warn i { margin-left:6px; } .ck-wallet-warn a { color:#92400e; font-weight:700; text-decoration:underline; } @media (max-width:768px) { .db-wallet-txn { flex-direction:column; align-items:flex-start; } .db-wallet-txn__end { text-align:right; min-width:auto; margin-top:4px; } .db-wallet-charge__gateways { flex-direction:column; } } .my-tickets-list { display:flex; flex-direction:column; gap:16px; padding:16px 20px; } .my-ticket-card { display:flex; border-radius:14px; overflow:hidden; border:1px solid #e8e8e8; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:box-shadow .2s; } .my-ticket-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); } .my-ticket-card--used { opacity:.75; } .my-ticket-strip { width:6px; flex-shrink:0; } .my-ticket-strip--valid { background:linear-gradient(180deg,#22c55e,#16a34a); } .my-ticket-strip--used { background:#94a3b8; } .my-ticket-body { display:flex; align-items:center; gap:0; flex:1; min-width:0; } .my-ticket-info { flex:1; min-width:0; padding:16px 16px 16px 0; } .my-ticket-title { font-size:.95rem; font-weight:700; color:#1e293b; margin-bottom:6px; } .my-ticket-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#64748b; margin-bottom:8px; } .my-ticket-meta i { margin-left:3px; } .my-ticket-badge { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; } .my-ticket-badge--valid { background:#dcfce7; color:#15803d; } .my-ticket-badge--used { background:#f1f5f9; color:#64748b; } .my-ticket-scanned-time { font-size:.7rem; color:#94a3b8; margin-top:4px; } .my-ticket-divider { width:1px; align-self:stretch; background:repeating-linear-gradient( to bottom, #e2e8f0 0, #e2e8f0 6px, transparent 6px, transparent 12px ); margin:12px 0; flex-shrink:0; } .my-ticket-qr-section { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 16px; flex-shrink:0; } .my-ticket-qr { width:120px; height:120px; } .my-ticket-qr img, .my-ticket-qr canvas { border-radius:8px; display:block; } .my-ticket-code { font-size:.72rem; font-weight:700; letter-spacing:.1em; color:#334155; direction:ltr; text-align:center; word-break:break-all; } .my-ticket-copy-btn { font-size:.7rem; font-weight:600; color:var(--primary,#d4a843); background:none; border:1px solid var(--primary,#d4a843); border-radius:6px; padding:3px 10px; cursor:pointer; transition:background .15s, color .15s; } .my-ticket-copy-btn:hover { background:var(--primary,#d4a843); color:#fff; } @media(max-width:575.98px) { .my-ticket-body { flex-wrap:wrap; } .my-ticket-info { padding:14px 14px 0; width:100%; } .my-ticket-divider { width:100%; height:1px; margin:0 12px; align-self:auto; background:repeating-linear-gradient(to right,#e2e8f0 0,#e2e8f0 6px,transparent 6px,transparent 12px); } .my-ticket-qr-section { flex-direction:row; padding:12px 14px 14px; gap:12px; width:100%; justify-content:flex-start; } .my-ticket-qr { width:90px; height:90px; flex-shrink:0; } } .db-menu__badge { margin-right: auto; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } [dir="ltr"] .db-menu__badge { margin-right: 0; margin-left: auto; } .diamoon-badge { font-size: 11px; color: inherit; opacity: 0.6; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; } .diamoon-badge:hover { opacity: 1; } html[data-surface-tone="dark"] { --ui-bg: var(--background, #0f172a); --ui-surface: var(--surface, #111827); --ui-surface-2: var(--surface-alt, var(--surface-2, #1f2937)); --ui-text: var(--text, #f8fafc); --ui-muted: var(--text-muted, #cbd5e1); --ui-border: color-mix(in srgb, var(--border-color, #334155) 72%, rgba(255,255,255,.18)); } html[data-surface-tone="dark"] body { background: radial-gradient(circle at 14% 8%, rgba(var(--primary-rgb, 79,70,229), .13), transparent 30%), var(--ui-bg) !important; color: var(--ui-text); } html[data-surface-tone="dark"] #main-content { background: transparent; } html[data-surface-tone="dark"] :is(.cp-sidebar,.cp-toolbar,.cp-subcat,.cp-brand-header,.cp-empty,.sr-box,.sr-empty,.pc,.ck-card,.ck-empty,.ck-addr,.ck-addr-empty,.ck-ship,.ck-pay,.ck-gw,.ck-modal,.ck-checkout-warning,.compare-wrapper,.compare-mobile-card,.compare-mobile-add,.compare-modal-box,.compare-modal-item,.db-side,.db-card,.db-order,.db-addr,.db-empty,.db-qa,.db-welcome,.auth-form-wrap .ck-card,.auth-shell__form-col,.pcsr-card,.pcsr-body,.pco-card,.pcm-body,.pcs-wrapper,.pcs-card .pc) { background: color-mix(in srgb, var(--ui-surface) 88%, transparent) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; box-shadow: 0 22px 70px rgba(0,0,0,.22); } html[data-surface-tone="dark"] :is(.pc__img,.pc__body,.cp-filter,.cp-filter-group__title,.cp-filter__search input,.cp-price-field,.cp-attr-value,.cp-brand,.cp-toolbar__sort-btn,.sr-type-chip,.ck-card__head,.ck-item,.ck-item__img,.ck-item__opts span,.ck-qty,.ck-qty__btn,.ck-summary__divider,.ck-trust,.ck-order-items,.ck-oi__img,.ck-oi__opts span,.ck-modal__head,.ck-modal__foot,.ck-input,.ck-coupon__input input,.compare-table tr,.compare-table td,.compare-table th,.compare-add-product,.compare-modal-header,.compare-modal-search,.compare-mobile-img,.db-card__head,.db-field__input,.db-menu__link,.db-wallet-charge__gw,.db-wallet-txn,.auth-page-shell,.auth-shell__form-wrap,.pcsr-card-body,.pcsr-img-wrap,.pcsr-meta-chip,.pco-overlay,.pcm-viewall-inner,.pcs-carousel-wrap) { background: color-mix(in srgb, var(--ui-surface-2) 76%, transparent) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-surface-tone="dark"] :is(.cp-crumb,.cp-crumb a,.cp-crumb__current,.cp-filter__title,.cp-filter-group__title,.cp-toolbar__sort-label,.cp-toolbar__count,.cp-toolbar__sort-btn,.sr-box__input input,.sr-box__count,.sr-type-chip,.pc__title,.pc__price,.pc__price small,.pc__brand,.pc__meta,.pc__label,.pc__cta,.ck-card__head h6,.ck-item__title,.ck-item__price-now,.ck-item__price-now small,.ck-summary__row,.ck-summary__total,.ck-back,.ck-step__label,.ck-empty h4,.ck-empty p,.ck-addr__top strong,.ck-addr p,.ck-addr__meta,.ck-ship__info strong,.ck-ship__info small,.ck-ship__price,.ck-pay span,.ck-label,.ck-oi__title,.compare-table,.compare-table a,.compare-label-col,.compare-mobile-title,.compare-modal-item-title,.compare-modal-header,.breadcrumb-link,.db-card__head h6,.db-order__num,.db-order__amount,.db-order__amount small,.db-menu__link,.db-user__info,.db-field__label,.db-empty p,.pcsr-card-title,.pcsr-price,.pcsr-price-unit,.pcsr-tab,.pcsr-viewall-link,.pco-heading,.pco-viewall,.pco-title,.pco-price,.pco-unit) { color: var(--ui-text) !important; } html[data-surface-tone="dark"] :is(.text-muted,.cp-attr-count,.cp-price-field span,.cp-price-field small,.cp-empty p,.sr-empty p,.pc__brand,.pc__meta,.pc__label,.ck-card__badge,.ck-item__opts span,.ck-item__price-old,.ck-step__label,.ck-trust,.ck-addr__meta,.ck-oi__opts span,.ck-pay__status,.compare-mobile-add span,.compare-modal-item-price,.db-order__date,.db-wallet-txn__desc,.db-wallet-txn__balance,.db-wallet-txn__date,.pcsr-meta-chip) { color: var(--ui-muted) !important; } html[data-surface-tone="dark"] :is(input,textarea,select,.form-control,.form-select,.cp-filter__search input,.cp-price-field input,.sr-box__input input,.ck-input,.ck-coupon__input input,.compare-modal-search input,.db-field__input,.db-wallet-charge__field .form-control) { background: color-mix(in srgb, var(--ui-bg) 82%, transparent) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html[data-surface-tone="dark"] :is(input,textarea)::placeholder { color: color-mix(in srgb, var(--ui-muted) 76%, transparent) !important; } html[data-surface-tone="dark"] :is(.cp-toolbar__sort-btn--active,.sr-type-chip--active,.cp-attr-value--active,.cp-brand--active,.ck-step--active .ck-step__num,.ck-step--done .ck-step__num,.ck-addr--active,.ck-ship--active,.ck-pay--active,.ck-gw--active,.db-menu__link--active,.db-wallet-charge__gw--active) { background: color-mix(in srgb, var(--primary) 24%, transparent) !important; border-color: color-mix(in srgb, var(--primary) 72%, white) !important; color: var(--ui-text) !important; } html[data-surface-tone="dark"] :is(.ck-btn,.ck-empty__btn,.cp-empty__btn,.pcsr-cta-btn,.db-empty__btn,.db-form-btn,.db-card__action) { background: var(--accent, var(--primary)) !important; color: var(--on-primary, #fff) !important; border-color: transparent !important; } html[data-surface-tone="dark"] .pc { box-shadow: 0 16px 46px rgba(0,0,0,.2); } html[data-surface-tone="dark"] .pc__cta { border-top-color: rgba(255,255,255,.12) !important; } html[data-surface-tone="dark"] :is(.cp-sidebar-overlay,.compare-modal-overlay,.ck-modal-overlay) { background: rgba(0,0,0,.72) !important; } html[data-surface-tone="dark"] :is(.site-footer,.ft-main,.ft-bottom) { background: color-mix(in srgb, var(--ui-bg) 94%, black) !important; color: var(--ui-muted) !important; border-color: rgba(255,255,255,.10) !important; } html[data-surface-tone="dark"] :is(.ft-col__title,.ft-copyright) { color: var(--ui-text) !important; } html[data-surface-tone="dark"] :is(.ft-col__links a,.ft-col__contact a,.ft-col__contact span,.ft-col__desc,.diamoon-badge) { color: var(--ui-muted) !important; } html[data-surface-tone="dark"] :is(.pcsr-section,.pco-section,.pcm-section,.pcs-section) { color: var(--ui-text); margin-top: clamp(28px, 4vw, 58px) !important; margin-bottom: clamp(28px, 4vw, 58px) !important; } html[data-surface-tone="dark"] :is(.pcsr-card,.pco-card) { overflow: hidden; } html[data-surface-tone="dark"] .pcsr-card-title { line-height: 1.65; min-height: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-surface-tone="dark"] .pcsr-card-body { padding: 18px !important; } html[data-surface-tone="dark"] .pco-grid { gap: clamp(14px, 2vw, 24px); } html[data-surface-tone="dark"] .pco-overlay { background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.32), transparent) !important; }