@charset "UTF-8"; .pcompare-btn.active svg { fill: var(--primary-color-deep-blue-600); } .pcompare-btn:hover svg { transition: .5s ease; fill: var(--primary-color-deep-blue-600); } .pcompare_box { position: fixed; left: 0; bottom: 0; z-index: 999; overflow: hidden; display: flex; width: 100%; padding: 16px 40px; align-items: center; gap: 24px; overflow: hidden; background: var(--neutral-colors-gray-100); box-shadow: 0px -4px 28px 0px rgba(20, 20, 43, 0.10); } .pcompare_box .title { display: flex; width: 199px; flex-direction: column; align-items: flex-start; gap: 4px; flex-shrink: 0; } .pcompare_box .title .text-header { color: var(--neutral-colors-gray-800, #525255); font-feature-settings: 'clig' off, 'liga' off; /* Headings/H4 */ font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; } .pcompare_box .title .count { color: var(--neutral-colors-gray-700, #99999C); /* Body/B1 */ font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .pcompare_box .title .count .pcompare-count { color: var(--neutral-colors-gray-800, #525255); /* Body/B1 */ font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .pcompare_box .content { display: flex; justify-content: center; align-items: center; gap: 16px; flex: 1 0 0; } .pcompare_box .content .desc { list-style: none; display: flex; justify-content: center; align-items: center; gap: 16px; flex: 1 0 0; } .pcompare_box .content img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; border: 0.5px solid var(--neutral-colors-gray-400, #E0E0E3); background: url(<path-to-image>), lightgray 50% / cover no-repeat; } .pcompare_box .content .desc li { position: relative; } .pcompare_box .content .desc li:hover { transition: .5s ease; z-index: 99999; } .pcompare_box .content .close-btn { position: absolute; font-size: 10px; top: -6px; right: -6px; color: #FFF; width: 20px; height: 20px; background-color: var(--neutral-colors-gray-800, #525255); text-align: center; cursor: pointer; border-radius: 25px; opacity: 0.4; } .product-compare-modal .pcontent .close-btn { position: absolute; font-size: 10px; top: 0; right: 0; color: #FFF; width: 20px; height: 20px; background-color: rgba(0, 0, 0, 0.7); text-align: center; cursor: pointer; border-radius: 50%; line-height: 20px; } .remove { display: block !important; cursor: pointer; } .pcompare_box .content .desc .short-desc { display: inline-block; width: 180px; vertical-align: top; padding-top: 15px; } .pcompare_box .content .compare-more-item { color: var(--primary-colors-orange, #F79421); text-align: center; font-feature-settings: 'clig' off, 'liga' off; /* Headings/H5 */ font-family: Prompt; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; } .pcompare_box .content .compare-more-item .more-img { border-radius: 10px; border: 0.5px solid var(--neutral-colors-gray-400, #E0E0E3); background: var(--white, #FFF); width: 64px; height: 64px; padding: 29% 0; } .pcompare_box .footer-compare { display: flex; align-items: flex-start; gap: 16px; margin-right: 60px; } .pcompare_box .footer-compare .remove-all-btn { display: flex; height: 48px; padding: 10px 16px 11px 16px; justify-content: center; align-items: center; gap: 8px; border-radius: 10px; border: 1.5px solid var(--neutral-colors-gray-400, #E0E0E3); background: var(--neutral-colors-white, #FFF); cursor: pointer; } .pcompare_box .footer-compare .compare_btn { display: flex; height: 48px; padding: 10px 16px 11px 16px; justify-content: center; align-items: center; gap: 8px; font-weight: 700; border-radius: 10px; background-color: var(--primary-colors-blue); color: var(--neutral-colors-white, #FFF); cursor: pointer; } .pcompare_box .footer-compare .compare_btn.disable { color: var(--White, #FFF); background: var(--Neutral-Colors-Gray-500, #CDCDD0); } .product-compare-modal { width: 85% !important; } .product-compare-modal .pcontent { display: block; font-size: 1em; line-height: 1.4; padding: 1.5rem; background: #fff; } .product-compare-modal .pcontent .show_compare .sku{ color: #888; font-size: 12px; } .product-compare-modal .pcontent .show_compare span.normal-price { text-decoration: line-through; color: #999; } .product-compare-modal .pcontent .show_compare .reduced-price { color: #FC0100; font-weight: 600; font-style: italic; font-size: 17px !important; } .product-compare-modal .pcontent .show_compare .original-price { color: #000000; font-size: 17px; font-weight: 600; font-style: italic; } .product-compare-modal .pcontent .show_compare .online-discount { color: #FC0100; font-size: 12px; } .pcom-new-price { font-size: 22px; font-weight: 600; font-style: italic; color: #FC0100; } .pcom-normal-price { font-size: 14px; font-style: italic; color: #000000; text-decoration: line-through; } .pcom-normal-price-one { font-size: 22px; font-weight: 600; font-style: italic; color: #000000; } .pcom-save-price { font-size: 12px; color: #FC0100; } .error { color: #FFF !important; }