:root { --primary: #009eff; --primary-rgb: 0,158,255; --secondary: #009eff; --secondary-rgb: 0,158,255; } body { font-family: Poppins,sans-serif; font-weight: normal; } .space-top { margin-top: 3rem !important; margin-bottom: 0 !important; } .space { margin-top: 3rem !important; margin-bottom: 3rem !important; } .space-bottom { margin-top: 0 !important; margin-bottom: 3rem !important; } .no-Space { margin-top: 0 !important; margin-bottom: 0 !important; } .bg-primary { background-color: var(--primary) !important; } .bg-secondary { background-color: var(--secondary) !important; } .btn-primary { color: #ffffff; background-color: var(--primary); border-color: var(--primary) } .btn-primary.focus,.btn-primary:focus,.btn-primary:hover { color: #ffffff; background-color: #0092ec; border-color: #008ee6 } .btn-primary.focus,.btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb),.5) } .btn-primary.disabled,.btn-primary:disabled { color: #ffffff; background-color: var(--primary); border-color: var(--primary) } .btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle { color: #ffffff; background-color: #0092ec; border-color: #008ee6 } .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb),.5) } .btn-outline-primary { color: var(--primary); } .btn-outline-primary:hover { color: #fff } .btn-outline-primary { border-color: var(--primary); } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary) } .btn-outline-primary.focus,.btn-outline-primary:focus { box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb),.5) } .btn-outline-primary.disabled,.btn-outline-primary:disabled { color: var(--primary); background-color: transparent } .btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle { color: #ffffff; background-color: var(--primary); border-color: var(--primary) } .btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb),.5) } .btn-secondary { color: #ffffff; background-color: var(--secondary); border-color: var(--secondary) } .btn-secondary.focus,.btn-secondary:focus,.btn-secondary:hover { color: #ffffff; background-color: #0092ec; border-color: #008ee6 } .btn-secondary.focus,.btn-secondary:focus { box-shadow: 0 0 0 .2rem rgba(var(--secondary-rgb),.5) } .btn-secondary.disabled,.btn-secondary:disabled { color: #ffffff; background-color: var(--secondary); border-color: var(--secondary) } .btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle { color: #ffffff; background-color: #0092ec; border-color: #008ee6 } .btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(var(--secondary-rgb),.5) } .text-primary { color: var(--primary) !important; } .text-secondary { color: var(--secondary) !important; } .btn-link,.btn-link:hover { color: var(--primary); } .btn.focus,.btn:focus { box-shadow: none; } a { color: var(--primary); } a:hover { color: #006fb3; } a.bg-primary:hover,a.bg-primary:focus,a.bg-primary:active { color: #ffffff; background-color: #0092ec !important; text-decoration: none; } .alert-banner { background-color: #2d2d2d; color: #ffffff; } .breadcrumb-wrapper,.breadcrumb { background-color: #1d1d1d; color: #ffffff; font-size: 0.75rem; } .breadcrumb-item > a { color: #ffffff; } .breadcrumb-item > a:hover { text-decoration: none; } .breadcrumb-item.active { color: #ffffff; } .category:hover { position: relative; text-decoration: none; } .category:hover:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.4); } .category-content { position: relative; overflow: hidden; width: 100%; } .category-content .category-image-contents { position: absolute; width: 100%; height: 100%; } .category-content .category-image-contents:after { content: ''; display: block; padding-bottom: 100%; } .product-item { display: block; position: relative; color: var(--secondary); padding: 0; height: 100%; border-radius: 20px; transition: border .25s ease; } .product-item .product-item-link { text-decoration: none; color: var(--secondary); } .product-item .product-item-link:hover { text-decoration: none; color: var(--secondary); } .product-item .product-item-title { font-weight: bold; margin: 0; font-size: 0.85rem; letter-spacing: -0.2px; } .product-item .product-item-money { font-weight: bold; font-size: 0.8rem; margin: 0; } .product-item .product-item-money-offer { font-weight: bold; color: #dc3545; margin: 0; font-size: 0.75rem; } .product-item .product-item-money-original { margin: 0; font-size: 0.8rem; } .product-review-star { color: #edab01; } .product-review-star-empty { color: #121416; } @media (max-width: 768px) { .product-item { padding: 0; } .product-item:hover { border: 1px solid transparent; } } .newsletter .newsletter-title { font-size: 1.5rem; color: #000; font-weight: bold; margin: 0; text-transform: uppercase; } .newsletter .newsletter-description { margin: 0; } .form-control:focus { border-color: #80cfff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb),0.2); } .variant-selector { position: relative; } .variant-selector .variant-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.75); } .variation-items .variation-item { border: 3px solid transparent; } .variation-items .variation-item.active { border-color: #000; } .variation-items .variation-item-round,.variation-items .variation-item-round .circle { border-radius: 50%; } .product-item { position: relative; border-radius: 0; &:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.15); } > a { position: relative; text-decoration: none; color: #000; border-radius: 0; } > a:hover { cursor: pointer; } .product-image img { border-radius: 0.5rem; } .product-name { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; font-size: 0.9rem; line-height: 1.5; } } .product-gallery-thumbs { margin: 1rem 0; .slick-track { display: flex; gap: 0.5rem; } .slick-slide { border-radius: 5px; border: 2px solid var(--bs-gray-300); img { border-radius: 5px; } &.slick-current { border-color: var(--bs-primary); } } .slick-arrow { display: block; position: absolute; top: 50%;; padding: 0; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); cursor: pointer; border: none; outline: none; color: #888; background: #efefef; width: 26px; height: 26px; line-height: 26px; z-index: 222; text-align: center; font-size: 12px; border-radius: 5px; &:hover { background-color: var(--bs-primary); color: #fff; } } .slick-prev { left: 5px; &:before { content: ""; } } .slick-next { right: 5px; &:before { content: ""; } } }