diff --git a/layout/style-scss/style.scss b/layout/style-scss/style.scss index 4658763..e5fee60 100644 --- a/layout/style-scss/style.scss +++ b/layout/style-scss/style.scss @@ -9,2522 +9,2524 @@ $cGray: #f6f6f6; $cGrayLight: #eceff1; $cComment: #c3c3c3; $form_gray: #e7e7e7; -$font_nunito: 'Nunito', sans-serif; +$font_nunito: 'Nunito', +sans-serif; @import '_mixins'; @keyframes fade_in_show { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 100% { - opacity: 1; - } + 100% { + opacity: 1; + } } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } img { - text-indent: -9999px !important; - color: rgba(0, 0, 0, 0) !important; + text-indent: -9999px !important; + color: rgba(0, 0, 0, 0) !important; } body { - font-family: $font_nunito; - font-size: 16px; - line-height: 1.5; - color: $cText; - overflow-x: hidden; + font-family: $font_nunito; + font-size: 16px; + line-height: 1.5; + color: $cText; + overflow-x: hidden; - @include respond-below(md) { - font-size: 14px; - } + @include respond-below(md) { + font-size: 14px; + } - &.no-scroll { - overflow: hidden; - max-height: 100vh; - } + &.no-scroll { + overflow: hidden; + max-height: 100vh; + } - &.page-login-form { - .main { - .container { - max-width: 600px; - margin: auto; - padding-right: 15px; - padding-left: 15px; - } - } - } + &.page-login-form { + .main { + .container { + max-width: 600px; + margin: auto; + padding-right: 15px; + padding-left: 15px; + } + } + } } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 30px white inset !important; + -webkit-box-shadow: 0 0 0 30px white inset !important; } .form-control { - border: 2px solid #e7e7e7; - border-radius: 0; - font-size: 15px; + border: 2px solid #e7e7e7; + border-radius: 0; + font-size: 15px; } .mini-content { - max-width: 1280px; + max-width: 1280px; } .btn { - border: 0; - border-radius: 0; - color: #fff; - text-transform: uppercase; - font-size: 15px; - padding: 20px 30px; - font-weight: 600; - display: flex; - align-items: center; - justify-content: center; + border: 0; + border-radius: 0; + color: #fff; + text-transform: uppercase; + font-size: 15px; + padding: 20px 30px; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; - &:focus { - border: none; - box-shadow: none; - } + &:focus { + border: none; + box-shadow: none; + } } .btn-danger { - background: $cPinkDark; + background: $cPinkDark; - &:hover { - background: $cPink; - } + &:hover { + background: $cPink; + } - &:active { - background: $cPink; - border-color: #fff; - } + &:active { + background: $cPink; + border-color: #fff; + } } .btn-success { - background: $cRed; + background: $cRed; - &:hover { - background: $cRed; - } + &:hover { + background: $cRed; + } - &:active { - background: $cRed; - border-color: #fff; - } + &:active { + background: $cRed; + border-color: #fff; + } } .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, -.show > .btn-success.dropdown-toggle { - background: $cRed; - border: none; +.show>.btn-success.dropdown-toggle { + background: $cRed; + border: none; } .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus { - background: $cRed; - border: none; + background: $cRed; + border: none; } .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, -.show > .btn-success.dropdown-toggle:focus { - box-shadow: none; +.show>.btn-success.dropdown-toggle:focus { + box-shadow: none; } .btn-success.disabled, .btn-success:disabled { - color: #fff; - background: $cRed; - border-color: $cRed; + color: #fff; + background: $cRed; + border-color: $cRed; } .jconfirm.jconfirm-modern .jconfirm-box { - box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1) !important; - padding: 60px 30px 45px !important; + box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1) !important; + padding: 60px 30px 45px !important; - .btn { - border-radius: 0 !important; - } + .btn { + border-radius: 0 !important; + } - .jconfirm-title { - font-family: $font_nunito !important; - font-weight: 600 !important; - font-size: 32px !important; - } + .jconfirm-title { + font-family: $font_nunito !important; + font-weight: 600 !important; + font-size: 32px !important; + } } .alert { - border-radius: 0; - border: 0; - font-size: 15px; - font-weight: 400; - padding: 15px; - margin: 0 auto 75px; + border-radius: 0; + border: 0; + font-size: 15px; + font-weight: 400; + padding: 15px; + margin: 0 auto 75px; - &.alert-success { - background: $cRed; - color: #fff; - } + &.alert-success { + background: $cRed; + color: #fff; + } } .title-border { - border-bottom: 3px solid #e7e7e7; - padding: 10px 0; - font-family: $font_nunito; - line-height: 32px; - letter-spacing: -1px; - font-size: 28px; + border-bottom: 3px solid #e7e7e7; + padding: 10px 0; + font-family: $font_nunito; + line-height: 32px; + letter-spacing: -1px; + font-size: 28px; } .box { - padding: 50px 0; + padding: 50px 0; - @include respond-between(sm, md) { - padding: 25px 0; - } + @include respond-between(sm, md) { + padding: 25px 0; + } - .box-title { - font-family: $font_nunito; - font-weight: 600; - font-size: 28px; - margin-bottom: 25px; + .box-title { + font-family: $font_nunito; + font-weight: 600; + font-size: 28px; + margin-bottom: 25px; - @include respond-below(sm) { - font-size: 26px; - margin-bottom: 15px; - } - } + @include respond-below(sm) { + font-size: 26px; + margin-bottom: 15px; + } + } } .new { - border: 2px solid #dc3545; - padding: 5px 10px; - font-weight: 600; - display: inline-block; - position: relative; - top: 10px; - left: -10px; - z-index: 10; - background: #fff; + border: 2px solid #dc3545; + padding: 5px 10px; + font-weight: 600; + display: inline-block; + position: relative; + top: 10px; + left: -10px; + z-index: 10; + background: #fff; } .box-mini { - max-width: 600px; - margin: 0 auto; + max-width: 600px; + margin: 0 auto; } .row-flex { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } @media (max-width: 991px) { - .container { - max-width: 100%; - } + .container { + max-width: 100%; + } } @media (min-width: 1400px) and (max-width: 1629px) { - .container { - max-width: 1370px; - } + .container { + max-width: 1370px; + } } @media (min-width: 1630px) { - .container { - max-width: 1600px; - } + .container { + max-width: 1600px; + } } .site-title { - font-family: $font_nunito; - font-weight: 600; - font-size: 32px; - margin-bottom: 25px; + font-family: $font_nunito; + font-weight: 600; + font-size: 32px; + margin-bottom: 25px; - @include respond-below(md) { - font-size: 30px; - } + @include respond-below(md) { + font-size: 30px; + } } #top-sticky-wrapper { - @include respond-below(sm) { - #top { - z-index: 20; - } - } + @include respond-below(sm) { + #top { + z-index: 20; + } + } } #top { - background: $cGray; - padding: 15px 0; + background: $cGray; + padding: 15px 0; - #scontainer-1 { - .contact { - @media (max-width: 992px) { - display: none; - } - } + #scontainer-1 { + .contact { + @media (max-width: 992px) { + display: none; + } + } - .free-delivery { - float: right; - color: $cText; + .free-delivery { + float: right; + color: $cText; - @media (min-width: 993px) and (max-width: 1200px) { - float: none; - display: block; - margin-top: 10px; - } + @media (min-width: 993px) and (max-width: 1200px) { + float: none; + display: block; + margin-top: 10px; + } - @media (max-width: 992px) { - margin-bottom: 10px; - } - } - } + @media (max-width: 992px) { + margin-bottom: 10px; + } + } + } - p { - margin: 0; - padding: 0; - } + p { + margin: 0; + padding: 0; + } - a { - color: $cText; + a { + color: $cText; - &:hover { - text-decoration: none; - } - } + &:hover { + text-decoration: none; + } + } - #mini-login { - text-align: right; + #mini-login { + text-align: right; - a:nth-child(1) { - margin-right: 10px; - } + a:nth-child(1) { + margin-right: 10px; + } - a { - font-weight: 600; - color: $cRed; - margin-left: 10px; + a { + font-weight: 600; + color: $cRed; + margin-left: 10px; - span { - color: $cText; - padding-right: 10px; - } - } - } + span { + color: $cText; + padding-right: 10px; + } + } + } } #header { - padding: 15px 0; + padding: 15px 0; - .logo { - a { - display: block; - max-width: 300px; - text-align: center; + .logo { + a { + display: block; + max-width: 300px; + text-align: center; - img { - width: 100%; - max-width: 225px; - } - } - } + img { + width: 100%; + max-width: 225px; + } + } + } - #search-form-big { - height: 0; - position: fixed; - top: -100%; - left: 0; - width: 100%; - @extend .box; - background: #fff; - z-index: 110; - overflow: hidden; - @include transition; - max-height: 100%; - overflow-y: scroll; + #search-form-big { + height: 0; + position: fixed; + top: -100%; + left: 0; + width: 100%; + @extend .box; + background: #fff; + z-index: 110; + overflow: hidden; + @include transition; + max-height: 100%; + overflow-y: scroll; - &.visible { - top: 0; - height: auto; - } + &.visible { + top: 0; + height: auto; + } - .btn-success { - margin: 25px auto; - display: block; - width: 175px; - } + .btn-success { + margin: 25px auto; + display: block; + width: 175px; + } - .no-found { - font-weight: 600; - font-size: 20px; - font-family: $font_nunito; - padding: 25px 0 50px; - text-align: center; - } + .no-found { + font-weight: 600; + font-size: 20px; + font-family: $font_nunito; + padding: 25px 0 50px; + text-align: center; + } - .search-big-results { - padding: 50px 0; - display: flex; - justify-content: flex-start; - flex-wrap: wrap; + .search-big-results { + padding: 50px 0; + display: flex; + justify-content: flex-start; + flex-wrap: wrap; - @include respond-below(sm) { - padding: 25px 0; - } + @include respond-below(sm) { + padding: 25px 0; + } - .product-search { - position: relative; - width: 100%; - margin: 0 15px 15px 0; - max-width: calc(100% / 6 - 15px); + .product-search { + position: relative; + width: 100%; + margin: 0 15px 15px 0; + max-width: calc(100% / 6 - 15px); - @include respond-between(sm, md) { - max-width: calc(100% / 4 - 25px); - } + @include respond-between(sm, md) { + max-width: calc(100% / 4 - 25px); + } - @include respond-below(sm) { - max-width: calc(100% / 2 - 15px); - } + @include respond-below(sm) { + max-width: calc(100% / 2 - 15px); + } - .new { - border: 2px solid $cPinkDark; - padding: 3px 5px; - font-weight: 600; - display: inline-block; - position: absolute; - top: -10px; - left: -10px; - z-index: 10; - background: #fff; - } - } - } + .new { + border: 2px solid $cPinkDark; + padding: 3px 5px; + font-weight: 600; + display: inline-block; + position: absolute; + top: -10px; + left: -10px; + z-index: 10; + background: #fff; + } + } + } - .small-title { - text-transform: uppercase; - opacity: 0.75; - position: relative; - width: 100%; + .small-title { + text-transform: uppercase; + opacity: 0.75; + position: relative; + width: 100%; - a { - position: absolute; - top: -10px; - right: 0; - color: $cText; - @include transition; - font-size: 30px; - display: flex; - align-items: center; - justify-content: center; - height: 45px; - width: 45px; + a { + position: absolute; + top: -10px; + right: 0; + color: $cText; + @include transition; + font-size: 30px; + display: flex; + align-items: center; + justify-content: center; + height: 45px; + width: 45px; - &:hover { - color: $cRed; - } - } - } + &:hover { + color: $cRed; + } + } + } - .input { - padding-top: 25px; + .input { + padding-top: 25px; - input { - border-radius: 0; - border: 0; - border-bottom: 2px solid $cText; - padding-left: 0; - padding-bottom: 10px; - padding-top: 10px; - font-weight: 600; - font-size: 20px; - height: 50px; - font-family: $font_nunito; + input { + border-radius: 0; + border: 0; + border-bottom: 2px solid $cText; + padding-left: 0; + padding-bottom: 10px; + padding-top: 10px; + font-weight: 600; + font-size: 20px; + height: 50px; + font-family: $font_nunito; - &:focus { - outline: none; - border: 2px solid #000; - box-shadow: none; - } + &:focus { + outline: none; + border: 2px solid #000; + box-shadow: none; + } - &::placeholder { - font-size: 20px; - font-weight: 600; - color: $cText; - font-family: $font_nunito; - } - } - } - } + &::placeholder { + font-size: 20px; + font-weight: 600; + color: $cText; + font-family: $font_nunito; + } + } + } + } - .header-right { - display: flex; - justify-content: flex-end; - align-items: center; + .header-right { + display: flex; + justify-content: flex-end; + align-items: center; - #search-button { - margin-right: 25px; + #search-button { + margin-right: 25px; - .btn { - color: #fff; - background: none; - height: 50px; - width: 50px; - position: relative; - z-index: 5; - @include transition; - background: #000; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - padding: 0; + .btn { + color: #fff; + background: none; + height: 50px; + width: 50px; + position: relative; + z-index: 5; + @include transition; + background: #000; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + padding: 0; - &:hover { - border-radius: 0; - } + &:hover { + border-radius: 0; + } - img { - width: 20px; - } - } - } + img { + width: 20px; + } + } + } - #basket-mini { - a { - display: flex; - align-items: center; - justify-content: center; - color: $cRed; + #basket-mini { + a { + display: flex; + align-items: center; + justify-content: center; + color: $cRed; - @include respond-below(sm) { - text-align: right; - } + @include respond-below(sm) { + text-align: right; + } - &:hover { - text-decoration: none; + &:hover { + text-decoration: none; - .icon { - border-radius: 0; - background: $cRed; - } - } + .icon { + border-radius: 0; + background: $cRed; + } + } - .icon { - height: 50px; - width: 50px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 10px; - background: $cText; - border-radius: 50%; - @include transition; + .icon { + height: 50px; + width: 50px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 10px; + background: $cText; + border-radius: 50%; + @include transition; - @include respond-below(sm) { - order: 1; - margin-left: 10px; - margin-right: 0; - } + @include respond-below(sm) { + order: 1; + margin-left: 10px; + margin-right: 0; + } - img { - width: 20px; - } - } + img { + width: 20px; + } + } - .basket-details { - font-size: 14px; + .basket-details { + font-size: 14px; - .title { - font-weight: 600; - } + .title { + font-weight: 600; + } - .details { - color: $cText; - font-size: 13px; - } - } - } - } - } + .details { + color: $cText; + font-size: 13px; + } + } + } + } + } } /* menu gĹ‚Ăłwne */ .menu-overlay { - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: rgba(0, 0, 0, 0.35); - z-index: 10; - display: none; - opacity: 0; - @include transition; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0.35); + z-index: 10; + display: none; + opacity: 0; + @include transition; - &.visible { - display: block; - opacity: 1; - } + &.visible { + display: block; + opacity: 1; + } } #main-menu-sticky-wrapper { - &.is-sticky { - #main-menu { - background: #fff; - border-bottom: 3px solid #e7e7e7; - width: 100%; + &.is-sticky { + #main-menu { + background: #fff; + border-bottom: 3px solid #e7e7e7; + width: 100%; - .level-0 { - justify-content: center; - } - } - } + .level-0 { + justify-content: center; + } + } + } } #main-menu { - position: relative; - z-index: 20; + position: relative; + z-index: 20; - #menu-container-1 { - ul { - margin: 0; - padding: 0; - list-style-type: none; + #menu-container-1 { + ul { + margin: 0; + padding: 0; + list-style-type: none; - @media (min-width: 993px) { - &.level-0 { - display: flex; - margin-left: -15px; - gap: 20px; + @media (min-width: 993px) { + &.level-0 { + display: flex; + margin-left: -15px; + gap: 20px; - > li { - @include respond-between(sm, md) { - &#link-5 { - display: none; - } - } + >li { + @include respond-between(sm, md) { + &#link-5 { + display: none; + } + } - > i { - display: none; - } + >i { + display: none; + } - > a { - font-family: $font_nunito; - color: $cText; - font-size: 18px; - font-weight: 400; - display: block; - padding: 10px 9px; - @include transition; + >a { + font-family: $font_nunito; + color: $cText; + font-size: 18px; + font-weight: 400; + display: block; + padding: 10px 9px; + @include transition; - @include respond-between(md, lg) { - padding: 5px; - font-size: 19px; - } + @include respond-between(md, lg) { + padding: 5px; + font-size: 19px; + } - @include respond-between(sm, md) { - padding: 5px; - font-size: 17px; - } + @include respond-between(sm, md) { + padding: 5px; + font-size: 17px; + } - &:hover { - text-decoration: none; - } - } + &:hover { + text-decoration: none; + } + } - &:hover { - > ul { - display: flex; - animation: fade_in_show 0.5s; - flex-wrap: wrap; - } - } + &:hover { + >ul { + display: flex; + animation: fade_in_show 0.5s; + flex-wrap: wrap; + } + } - > ul { - left: 0; - width: 100%; - display: none; - position: absolute; - padding: 25px; - background: #fff; - @include transition; + >ul { + left: 0; + width: 100%; + display: none; + position: absolute; + padding: 25px; + background: #fff; + @include transition; - > li { - width: calc(100% / 4); - margin-bottom: 25px; + >li { + width: calc(100% / 4); + margin-bottom: 25px; - @include respond-between(lg, xl) { - width: calc(100% / 3); - } + @include respond-between(lg, xl) { + width: calc(100% / 3); + } - @include respond-between(sm, lg) { - width: calc(100% / 2); - } + @include respond-between(sm, lg) { + width: calc(100% / 2); + } - a { - color: $cText; - font-size: 15px; - @include transition; - white-space: nowrap; + a { + color: $cText; + font-size: 15px; + @include transition; + white-space: nowrap; - &:hover { - text-decoration: none; - color: $cRed; - } - } + &:hover { + text-decoration: none; + color: $cRed; + } + } - > a { - font-weight: 600; - font-size: 16px; - white-space: nowrap; - } + >a { + font-weight: 600; + font-size: 16px; + white-space: nowrap; + } - i { - display: none; - } + i { + display: none; + } - ul { - padding-top: 5px; - } - } - } - } - } - } - } - } + ul { + padding-top: 5px; + } + } + } + } + } + } + } + } } #mobile-menu-close, #mobile-menu-open { - display: none; + display: none; } .promoted-products { - padding-top: 30px; + padding-top: 30px; - ontent .box-title { - text-align: center; - } + ontent .box-title { + text-align: center; + } - .content { - display: flex; - flex-wrap: wrap; - gap: 10px; + .content { + display: flex; + flex-wrap: wrap; + gap: 10px; - @include respond-above(xxl) { - .product-mini { - &:nth-child(11), - &:nth-child(12) { - display: none; - } - } - } + @include respond-above(xxl) { + .product-mini { - .product-mini { - max-width: calc(100% / 4 - 7.5px); - // max-width: calc(100% / 5 - 15px); - width: 100%; - // margin: 0 15px 15px 0; - position: relative; + &:nth-child(11), + &:nth-child(12) { + display: none; + } + } + } - @include respond-between(md, xl) { - max-width: calc(100% / 4 - 7.5px); - } + .product-mini { + max-width: calc(100% / 4 - 7.5px); + // max-width: calc(100% / 5 - 15px); + width: 100%; + // margin: 0 15px 15px 0; + position: relative; - @include respond-between(sm, md) { - max-width: calc(100% / 3 - 7.5px); - } + @include respond-between(md, xl) { + max-width: calc(100% / 4 - 7.5px); + } - @include respond-below(sm) { - max-width: calc(100% / 2 - 7.5px); - } + @include respond-between(sm, md) { + max-width: calc(100% / 3 - 7.5px); + } - @include respond-below(xxs) { - max-width: 100%; - margin: 0 0 10px 0; - } + @include respond-below(sm) { + max-width: calc(100% / 2 - 7.5px); + } - .new { - @extend .new; - position: absolute; - } - } - } + @include respond-below(xxs) { + max-width: 100%; + margin: 0 0 10px 0; + } + + .new { + @extend .new; + position: absolute; + } + } + } } .category-content { - gap: 10px; - display: flex; - flex-wrap: wrap; + gap: 10px; + display: flex; + flex-wrap: wrap; - .product-mini { - width: calc(25% - 8px); - position: relative; + .product-mini { + width: calc(25% - 8px); + position: relative; - @media (max-width: 1199px) { - width: calc(33.3333333% - 7px); - } + @media (max-width: 1199px) { + width: calc(33.3333333% - 7px); + } - @media (max-width: 991px) { - width: calc(50% - 7px); - } + @media (max-width: 991px) { + width: calc(50% - 7px); + } - .new { - @extend .new; - position: absolute; - } - } + .new { + @extend .new; + position: absolute; + } + } } .search-content { - gap: 10px; - display: flex; - flex-wrap: wrap; + gap: 10px; + display: flex; + flex-wrap: wrap; - .product-mini { - width: calc(25% - 8px); - position: relative; + .product-mini { + width: calc(25% - 8px); + position: relative; - @media (max-width: 767px) { - width: calc(33.33333333% - 7px); - } + @media (max-width: 767px) { + width: calc(33.33333333% - 7px); + } - @media (max-width: 575px) { - width: calc(50% - 7px); - } + @media (max-width: 575px) { + width: calc(50% - 7px); + } - .new { - border: 2px solid $cPinkDark; - padding: 5px 10px; - font-weight: 600; - display: inline-block; - position: absolute; - top: 10px; - left: -10px; - z-index: 10; - background: #fff; - } - } + .new { + border: 2px solid $cPinkDark; + padding: 5px 10px; + font-weight: 600; + display: inline-block; + position: absolute; + top: 10px; + left: -10px; + z-index: 10; + background: #fff; + } + } } .product-mini, .product-search { - background: #fff; - border-radius: 5px; - overflow: hidden; - border: 1px solid transparentize($color: $cTextLight, $amount: 0.9); + background: #fff; + border-radius: 5px; + overflow: hidden; + border: 1px solid transparentize($color: $cTextLight, $amount: 0.9); - &:hover { - border: 1px solid transparentize($color: $cTextLight, $amount: 0.8); - } + &:hover { + border: 1px solid transparentize($color: $cTextLight, $amount: 0.8); + } - a { - position: relative; - display: block; + a { + position: relative; + display: block; - &:hover { - text-decoration: none; - } - } + &:hover { + text-decoration: none; + } + } - &:hover { - .img { - img { - &.first { - opacity: 0; - } + &:hover { + .img { + img { + &.first { + opacity: 0; + } - &.second { - opacity: 1; - } - } - } + &.second { + opacity: 1; + } + } + } - .product-details { - .name { - &::after { - width: 100%; - } - } - } - } + .product-details { + .name { + &::after { + width: 100%; + } + } + } + } - .img { - width: 100%; - padding-top: 120%; - display: block; - position: relative; - overflow: hidden; + .img { + width: 100%; + padding-top: 120%; + display: block; + position: relative; + overflow: hidden; - img { - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; - position: absolute; - top: 0; - left: 0; + img { + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + position: absolute; + top: 0; + left: 0; - &.first { - transition: all 1s ease; - } + &.first { + transition: all 1s ease; + } - &.second { - transition: all 1s ease; - opacity: 0; - } - } - } + &.second { + transition: all 1s ease; + opacity: 0; + } + } + } - .product-details { - padding: 10px; - width: 100%; - z-index: 10; - display: flex; - align-items: flex-end; - line-height: 32px; - justify-content: center; - flex-wrap: wrap; + .product-details { + padding: 10px; + width: 100%; + z-index: 10; + display: flex; + align-items: flex-end; + line-height: 32px; + justify-content: center; + flex-wrap: wrap; - .tm-multihornet { - margin-bottom: 5px; - } + .tm-multihornet { + margin-bottom: 5px; + } - .name { - font-family: $font_nunito; - font-weight: 600; - font-size: 15px; - line-height: 1.5; - margin: 0 0 5px 0; - color: $cText; - @include transition; - overflow: hidden; - display: block; - position: relative; - text-align: center; - width: 100%; + .name { + font-family: $font_nunito; + font-weight: 600; + font-size: 15px; + line-height: 1.5; + margin: 0 0 5px 0; + color: $cText; + @include transition; + overflow: hidden; + display: block; + position: relative; + text-align: center; + width: 100%; - &:hover { - text-decoration: none; - color: $cRed; - } + &:hover { + text-decoration: none; + color: $cRed; + } - a { - color: $cText; + a { + color: $cText; - &:hover { - text-decoration: none; - color: $cRed; - } - } - } + &:hover { + text-decoration: none; + color: $cRed; + } + } + } - .prices { - text-align: right; - font-family: $font_nunito; - width: 100%; - display: flex; - justify-content: center; + .prices { + text-align: right; + font-family: $font_nunito; + width: 100%; + display: flex; + justify-content: center; - .price_weight { - width: 100%; - order: 99; - font-size: 12px; - color: #333333; - } + .price_weight { + width: 100%; + order: 99; + font-size: 12px; + color: #333333; + } - .price { - font-size: 22px; - font-weight: 700; - color: $cRed; - white-space: nowrap; + .price { + font-size: 22px; + font-weight: 700; + color: $cRed; + white-space: nowrap; - @include respond-below(sm) { - font-size: 20px; - } + @include respond-below(sm) { + font-size: 20px; + } - @include respond-below(xs) { - font-size: 18px; - } - } + @include respond-below(xs) { + font-size: 18px; + } + } - .price-old { - font-size: 14px; + .price-old { + font-size: 14px; - @include respond-above(md) { - font-size: 22px; - } + @include respond-above(md) { + font-size: 22px; + } - font-weight: 300; - color: #b9b9b9; - position: relative; - margin-right: 15px; + font-weight: 300; + color: #b9b9b9; + position: relative; + margin-right: 15px; - @include respond-below(sm) { - font-size: 18px; - } + @include respond-below(sm) { + font-size: 18px; + } - @include respond-below(xs) { - font-size: 16px; - } + @include respond-below(xs) { + font-size: 16px; + } - &::before { - width: 100%; - position: absolute; - content: ''; - right: 0; - top: 42%; - height: 0; - border-bottom: 2px solid #b9b9b9; - } - } - } - } + &::before { + width: 100%; + position: absolute; + content: ''; + right: 0; + top: 42%; + height: 0; + border-bottom: 2px solid #b9b9b9; + } + } + } + } } /* popularne kategorie */ .popular-categories { - // display: none; + // display: none; - .box-title { - text-align: center; - } + .box-title { + text-align: center; + } - #scontainer-8 { - div[class^='col-lg'] { - margin: 0 15px; - max-width: calc(25% - 30px); + #scontainer-8 { + div[class^='col-lg'] { + margin: 0 15px; + max-width: calc(25% - 30px); - p { - margin: 0; - } + p { + margin: 0; + } - a { - display: block; - background: $cGray; - font-family: $font_nunito; - font-weight: 500; - font-size: 28px; - line-height: 32px; - color: $cText; - padding-bottom: 25px; - @include transition; + a { + display: block; + background: $cGray; + font-family: $font_nunito; + font-weight: 500; + font-size: 28px; + line-height: 32px; + color: $cText; + padding-bottom: 25px; + @include transition; - strong { - display: inline-block; - margin-left: -15px; - font-weight: 500; - position: relative; - top: -10px; + strong { + display: inline-block; + margin-left: -15px; + font-weight: 500; + position: relative; + top: -10px; - &::after { - height: 1px; - background: $cText; - content: ''; - display: block; - position: absolute; - bottom: 0; - width: 0; - @include transition; - } - } + &::after { + height: 1px; + background: $cText; + content: ''; + display: block; + position: absolute; + bottom: 0; + width: 0; + @include transition; + } + } - &:hover { - text-decoration: none; + &:hover { + text-decoration: none; - strong { - &::after { - width: 100%; - } - } - } - } - } - } + strong { + &::after { + width: 100%; + } + } + } + } + } + } } .mini-banners { - h3 { - font-family: $font_nunito; - color: $cText; - margin-bottom: 25px; - font-weight: 700; - font-size: 26px; - } + h3 { + font-family: $font_nunito; + color: $cText; + margin-bottom: 25px; + font-weight: 700; + font-size: 26px; + } - p { - font-size: 15px; - line-height: 26px; - } + p { + font-size: 15px; + line-height: 26px; + } } .last-on-blog { - .box-title { - text-align: center; - } + .box-title { + text-align: center; + } - .date-add { - display: none; - } + .date-add { + display: none; + } } .article-list { - a { - &:hover { - text-decoration: none; + a { + &:hover { + text-decoration: none; - img { - opacity: 0.75; - } - } - } + img { + opacity: 0.75; + } + } + } - .blog-image { - padding-top: 66.66666%; - position: relative; - margin-bottom: 15px; + .blog-image { + padding-top: 66.66666%; + position: relative; + margin-bottom: 15px; - img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - @include transition; - } + img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + @include transition; + } - .date-add { - // position: absolute; - // top: 15px; - // left: -15px; - // color: $cText; - // background: #fff; - // border: 1px solid $cText; - // display: inline-block; - // padding: 10px 10px 7px; - // font-family: $font_nunito; - // font-size: 16px; - } - } + .date-add { + // position: absolute; + // top: 15px; + // left: -15px; + // color: $cText; + // background: #fff; + // border: 1px solid $cText; + // display: inline-block; + // padding: 10px 10px 7px; + // font-family: $font_nunito; + // font-size: 16px; + } + } - .article-title { - display: block; - font-weight: 600; - font-size: 22px; - font-family: $font_nunito; - color: $cText; - } + .article-title { + display: block; + font-weight: 600; + font-size: 22px; + font-family: $font_nunito; + color: $cText; + } - .article-entry { - color: $cTextLight; - font-size: 14px; - line-height: 24px; - } + .article-entry { + color: $cTextLight; + font-size: 14px; + line-height: 24px; + } } .promo-text { - h1 { - font-family: $font_nunito; - font-weight: 600; - font-size: 26px; - color: $cText; - } + h1 { + font-family: $font_nunito; + font-weight: 600; + font-size: 26px; + color: $cText; + } - h2 { - font-weight: 600; - font-size: 18px; - color: $cText; - } + h2 { + font-weight: 600; + font-size: 18px; + color: $cText; + } - p { - font-size: 14px; - color: $cTextLight; - line-height: 24px; + p { + font-size: 14px; + color: $cTextLight; + line-height: 24px; - a { - color: $cRed; - } - } + a { + color: $cRed; + } + } } .footer-contact { - @extend .box; - background: $cGray; - line-height: 24px; + @extend .box; + background: $cGray; + line-height: 24px; - .icon { - svg { - width: 50px; - height: 50px; - display: block; - margin: auto; - } - } + .icon { + svg { + width: 50px; + height: 50px; + display: block; + margin: auto; + } + } - p { - margin: 0; - } + p { + margin: 0; + } - strong { - font-family: $font_nunito; - font-weight: 600; - font-size: 20px; - color: $cText; - } + strong { + font-family: $font_nunito; + font-weight: 600; + font-size: 20px; + color: $cText; + } } .footer { - border-bottom: 1px solid #eee; + border-bottom: 1px solid #eee; - .box-title { - text-align: left; - } + .box-title { + text-align: left; + } - ul { - list-style-type: none; - margin: 0; - padding: 0; + ul { + list-style-type: none; + margin: 0; + padding: 0; - li { - a { - font-family: $font_nunito; - font-size: 20px; - font-weight: 300; - color: $cText; - display: block; - padding: 5px 0; - @include transition; + li { + a { + font-family: $font_nunito; + font-size: 20px; + font-weight: 300; + color: $cText; + display: block; + padding: 5px 0; + @include transition; - @include respond-below(sm) { - font-size: 14px; - } + @include respond-below(sm) { + font-size: 14px; + } - &:hover { - text-decoration: none; - color: $cRed; - } - } - } - } + &:hover { + text-decoration: none; + color: $cRed; + } + } + } + } } #newsletter { - .title { - @extend .box-title; - } + .title { + @extend .box-title; + } - #text { - font-family: $font_nunito; - font-size: 20px; - font-weight: 300; - color: $cText; - display: none; + #text { + font-family: $font_nunito; + font-size: 20px; + font-weight: 300; + color: $cText; + display: none; - @include respond-above(md) { - display: block; - } - } + @include respond-above(md) { + display: block; + } + } - .agreement { - font-size: 11px; + .agreement { + font-size: 11px; - input { - margin-right: 5px; - position: relative; - top: 2px; - } + input { + margin-right: 5px; + position: relative; + top: 2px; + } - a { - color: $cRed; - font-weight: 600; - } + a { + color: $cRed; + font-weight: 600; + } - .hidden { - display: none; - } - } + .hidden { + display: none; + } + } - .form-group.input { - display: flex; - // padding-top: 10px; - position: relative; + .form-group.input { + display: flex; + // padding-top: 10px; + position: relative; - &::after { - content: ''; - display: block; - bottom: 0; - left: 0; - width: 0; - position: absolute; - background: $cRed; - @include transition; - height: 2px; - } + &::after { + content: ''; + display: block; + bottom: 0; + left: 0; + width: 0; + position: absolute; + background: $cRed; + @include transition; + height: 2px; + } - &:focus-within { - &::after { - width: 100%; - } + &:focus-within { + &::after { + width: 100%; + } - .btn { - background: $cRed; - } - } - } + .btn { + background: $cRed; + } + } + } - input[type='email'] { - border: 0; - border-bottom: 2px solid $cText; - border-radius: 0; - font-size: 14px; + input[type='email'] { + border: 0; + border-bottom: 2px solid $cText; + border-radius: 0; + font-size: 14px; - &:focus { - outline: none; - border: 2px solid #000; - box-shadow: none; - } - } + &:focus { + outline: none; + border: 2px solid #000; + box-shadow: none; + } + } - .btn { - background: $cText; - border-radius: 0; - color: #fff; - border: 0; - text-transform: uppercase; - font-size: 14px; - font-weight: 600; - padding: 0 15px; - line-height: 38px; - @include transition; - transition-delay: 0.25s; - } + .btn { + background: $cText; + border-radius: 0; + color: #fff; + border: 0; + text-transform: uppercase; + font-size: 14px; + font-weight: 600; + padding: 0 15px; + line-height: 38px; + @include transition; + transition-delay: 0.25s; + } } .footer-bottom { - #scontainer-3 { - p { - margin: 0; + #scontainer-3 { + p { + margin: 0; - a { - display: inline-block; - margin-right: 15px; + a { + display: inline-block; + margin-right: 15px; - img { - @include transition; - } + img { + @include transition; + } - &:hover { - img { - transform: scale(1.25); - } - } - } - } - } + &:hover { + img { + transform: scale(1.25); + } + } + } + } + } - #copyright { - text-align: right; + #copyright { + text-align: right; - a { - color: $cRed; - } - } + a { + color: $cRed; + } + } } #cookie-information { - background: $cGray; - padding: 15px; - text-align: center; - font-size: 12px; + background: $cGray; + padding: 15px; + text-align: center; + font-size: 12px; - a { - color: $cRed; - } + a { + color: $cRed; + } } #category-view { - @extend .box; + @extend .box; - .product-category { - .product-mini { - margin: 0 0 50px; - } - } + .product-category { + .product-mini { + margin: 0 0 50px; + } + } } .left-column { - .categories { - .title { - display: none; - } + .categories { + .title { + display: none; + } - ul { - list-style-type: none; - margin: 0; - padding: 0; + ul { + list-style-type: none; + margin: 0; + padding: 0; - i { - font-size: 12px; - color: $cText; - cursor: pointer; + i { + font-size: 12px; + color: $cText; + cursor: pointer; - &:hover { - color: lighten($color: $cRed, $amount: 10%); - } - } + &:hover { + color: lighten($color: $cRed, $amount: 10%); + } + } - a { - @include transition; + a { + @include transition; - &:hover { - text-decoration: none; - } - } + &:hover { + text-decoration: none; + } + } - &.level-0 { - padding: 0 0 15px 0; + &.level-0 { + padding: 0 0 15px 0; - > li { - padding-bottom: 10px; + >li { + padding-bottom: 10px; - > a { - font-family: $font_nunito; - font-weight: 600; - color: $cText; + >a { + font-family: $font_nunito; + font-weight: 600; + color: $cText; - &:hover { - color: $cRed; - } - } - } - } + &:hover { + color: $cRed; + } + } + } + } - &.level-1 { - padding: 0 0 0 10px; + &.level-1 { + padding: 0 0 0 10px; - li { - position: relative; - padding-left: 20px; + li { + position: relative; + padding-left: 20px; - &:last-child { - &::before { - display: none; - } - } + &:last-child { + &::before { + display: none; + } + } - &::before { - content: ''; - position: absolute; - width: 10px; - border-left: 1px solid #e7e7e7; - left: 2px; - top: 7px; - height: 100%; - display: block; - } + &::before { + content: ''; + position: absolute; + width: 10px; + border-left: 1px solid #e7e7e7; + left: 2px; + top: 7px; + height: 100%; + display: block; + } - &::after { - content: ''; - position: absolute; - width: 10px; - border-left: 1px solid #e7e7e7; - left: 2px; - top: 5px; - height: 11px; - border-bottom: 1px solid #e7e7e7; - display: block; - } + &::after { + content: ''; + position: absolute; + width: 10px; + border-left: 1px solid #e7e7e7; + left: 2px; + top: 5px; + height: 11px; + border-bottom: 1px solid #e7e7e7; + display: block; + } - a { - color: $cText; - display: inline-block; - font-weight: 400; - font-size: 15px; - padding: 3px 0; + a { + color: $cText; + display: inline-block; + font-weight: 400; + font-size: 15px; + padding: 3px 0; - &:hover { - color: $cRed; - } - } + &:hover { + color: $cRed; + } + } - &.open { - ul { - display: block; - } - } - } - } + &.open { + ul { + display: block; + } + } + } + } - &.level-2 { - display: none; - } - } - } + &.level-2 { + display: none; + } + } + } } ul.pager { - display: flex; - list-style-type: none; - padding: 25px 0; - margin: 0; - align-items: center; - justify-content: center; - font-size: 22px; - font-family: $font_nunito; + display: flex; + list-style-type: none; + padding: 25px 0; + margin: 0; + align-items: center; + justify-content: center; + font-size: 22px; + font-family: $font_nunito; - a { - color: $cText; - display: inline-block; - padding: 10px; - @include transition; - font-weight: 300; + a { + color: $cText; + display: inline-block; + padding: 10px; + @include transition; + font-weight: 300; - &:hover { - text-decoration: none; - color: $cRed; - } - } + &:hover { + text-decoration: none; + color: $cRed; + } + } } #category-description { - margin-top: 50px; + margin-top: 50px; - a { - color: $cRed; - } + a { + color: $cRed; + } - h2 { - font-family: $font_nunito; - font-size: 22px; - } + h2 { + font-family: $font_nunito; + font-size: 22px; + } } #contact-form { - #contact-form { - .form-group { - .form-control { - box-sizing: border-box; - font-size: 14px; - padding: 13px 16px; - border-radius: 0; - border: 2px solid #e7e7e7; - height: auto; - border-radius: 10px; + #contact-form { + .form-group { + .form-control { + box-sizing: border-box; + font-size: 14px; + padding: 13px 16px; + border-radius: 0; + border: 2px solid #e7e7e7; + height: auto; + border-radius: 10px; - &:focus { - border: 2px solid #000; - box-shadow: none; - } - } - } - } + &:focus { + border: 2px solid #000; + box-shadow: none; + } + } + } + } } #contact-additional-info { - a { - color: $cRed; - font-weight: 600; + a { + color: $cRed; + font-weight: 600; - &:hover { - text-decoration: none; - color: $cRed; - } - } + &:hover { + text-decoration: none; + color: $cRed; + } + } } #blog-view { - @extend .box; + @extend .box; - .site-title { - @extend .box-title; - margin-bottom: 50px; - } + .site-title { + @extend .box-title; + margin-bottom: 50px; + } - .article-entry { - margin-bottom: 3.75rem; + .article-entry { + margin-bottom: 3.75rem; - .blog-image { - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: opacity 0.3s ease; + .blog-image { + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: opacity 0.3s ease; - &:hover { - opacity: 0.75; - } - } - } + &:hover { + opacity: 0.75; + } + } + } - .date-add { - // font-family: $font_nunito; - // position: absolute; - // top: 30px; - // left: 0px; - // padding: 12px 12px 8px 12px; - // background-color: #fff; - // border: 1px solid $cText; - // line-height: 1; - // font-weight: 400; - // letter-spacing: 1px; - // color: $cText; - } + .date-add { + // font-family: $font_nunito; + // position: absolute; + // top: 30px; + // left: 0px; + // padding: 12px 12px 8px 12px; + // background-color: #fff; + // border: 1px solid $cText; + // line-height: 1; + // font-weight: 400; + // letter-spacing: 1px; + // color: $cText; + } - .article-title { - font-family: $font_nunito; - margin-top: 35px; - margin-bottom: 20px; + .article-title { + font-family: $font_nunito; + margin-top: 35px; + margin-bottom: 20px; - a { - display: block; - font-weight: 600; - font-size: 22px; - font-family: $font_nunito; - color: $cText; - transition: all 0.3s ease; + a { + display: block; + font-weight: 600; + font-size: 22px; + font-family: $font_nunito; + color: $cText; + transition: all 0.3s ease; - &:hover { - color: $cRed; - text-decoration: none; - } - } - } + &:hover { + color: $cRed; + text-decoration: none; + } + } + } - .entry { - color: #3a3a3a; - font-size: 14px; - line-height: 24px; - font-weight: 300; - font-style: normal; - letter-spacing: 0px; - margin-bottom: 1.875rem; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - } + .entry { + color: #3a3a3a; + font-size: 14px; + line-height: 24px; + font-weight: 300; + font-style: normal; + letter-spacing: 0px; + margin-bottom: 1.875rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } - .btn-success { - font-family: $font_nunito; - background-color: transparent; - color: $cText; - font-weight: 400; - font-size: 1rem; - padding: 0; - position: relative; - padding-left: 45px; - padding-right: 5px; - transition: all 0.3s ease; + .btn-success { + font-family: $font_nunito; + background-color: transparent; + color: $cText; + font-weight: 400; + font-size: 1rem; + padding: 0; + position: relative; + padding-left: 45px; + padding-right: 5px; + transition: all 0.3s ease; - &:before { - position: absolute; - left: 0; - content: ''; - width: 40px; - height: 1px; - top: 50%; - margin-right: 10px; - border-top: 1px solid; - transition: width 0.3s ease; - } + &:before { + position: absolute; + left: 0; + content: ''; + width: 40px; + height: 1px; + top: 50%; + margin-right: 10px; + border-top: 1px solid; + transition: width 0.3s ease; + } - &:hover { - padding-left: 25px; + &:hover { + padding-left: 25px; - &:before { - width: 20px; - } - } + &:before { + width: 20px; + } + } - &:focus { - border: 2px solid #000; - box-shadow: none; - } - } - } + &:focus { + border: 2px solid #000; + box-shadow: none; + } + } + } - .box-articles { - font-family: $font_nunito; + .box-articles { + font-family: $font_nunito; - @include respond-below(sm) { - padding-left: 0; - } + @include respond-below(sm) { + padding-left: 0; + } - @include respond-below(md) { - display: none; - } + @include respond-below(md) { + display: none; + } - .title { - font-size: 20px; - font-weight: 800; - letter-spacing: -1px; - line-height: 32px; - margin-bottom: 20px; - } + .title { + font-size: 20px; + font-weight: 800; + letter-spacing: -1px; + line-height: 32px; + margin-bottom: 20px; + } - .news-list { - padding-inline-start: 0px; - list-style-type: none; - margin-bottom: 0; + .news-list { + padding-inline-start: 0px; + list-style-type: none; + margin-bottom: 0; - li { - padding-bottom: 1rem; - font-size: 20px; - font-weight: 500; + li { + padding-bottom: 1rem; + font-size: 20px; + font-weight: 500; - .far { - // position: absolute; - // left: 5px; - // top: 3px; - font-size: 19px; - opacity: 0.5; - transition: all 0.3s ease; - } + .far { + // position: absolute; + // left: 5px; + // top: 3px; + font-size: 19px; + opacity: 0.5; + transition: all 0.3s ease; + } - a { - color: $cText; - font-size: 16px; - display: block; - letter-spacing: normal; - position: relative; - transition: all 0.3s ease; - display: flex; - align-items: center; - gap: 10px; + a { + color: $cText; + font-size: 16px; + display: block; + letter-spacing: normal; + position: relative; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 10px; - &:hover { - text-decoration: none; - color: lighten($color: $cRed, $amount: 20%); + &:hover { + text-decoration: none; + color: lighten($color: $cRed, $amount: 20%); - .far { - color: $cText; - } - } - } + .far { + color: $cText; + } + } + } - .date-add { - display: none; - line-height: 21.12px; - font-size: 15px; - font-weight: 300; - margin-bottom: 0; - margin-top: 5px; - } - } - } - } + .date-add { + display: none; + line-height: 21.12px; + font-size: 15px; + font-weight: 300; + margin-bottom: 0; + margin-top: 5px; + } + } + } + } - .article { - .article__content { - font-size: 16px; + .article { + .article__content { + font-size: 16px; - @include respond-below(md) { - font-size: 14px; - } + @include respond-below(md) { + font-size: 14px; + } - .article__main-image { - height: 400px; - margin-bottom: 50px; + .article__main-image { + height: 400px; + margin-bottom: 50px; - img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - } - } - } + img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + } + } - .article-title { - font-family: $font_nunito; - text-align: center; - font-weight: 600; - font-size: 32px; - text-align: center; - margin-bottom: 40px; - } + .article-title { + font-family: $font_nunito; + text-align: center; + font-weight: 600; + font-size: 32px; + text-align: center; + margin-bottom: 40px; + } - .date-add { - line-height: 21.12px; - font-size: 15px; - font-weight: 300; - line-height: 21.12px; - margin-bottom: 25px; - } + .date-add { + line-height: 21.12px; + font-size: 15px; + font-weight: 300; + line-height: 21.12px; + margin-bottom: 25px; + } - .table-of-contents { - margin-bottom: 30px; + .table-of-contents { + margin-bottom: 30px; - @include respond-below(md) { - border: 2px solid #e7e7e7; - padding: 15px; - border-radius: 10px; - } + @include respond-below(md) { + border: 2px solid #e7e7e7; + padding: 15px; + border-radius: 10px; + } - .title { - font-size: 18px; - font-weight: 800; - line-height: 21px; - color: $cRed; - margin-bottom: 10px; + .title { + font-size: 18px; + font-weight: 800; + line-height: 21px; + color: $cRed; + margin-bottom: 10px; - @include respond-above(md) { - font-size: 20px; - } - } + @include respond-above(md) { + font-size: 20px; + } + } - ol { - padding-left: 23px; - margin-bottom: 0; + ol { + padding-left: 23px; + margin-bottom: 0; - li { - &.active { - a { - font-weight: 700; - color: lighten($color: $cRed, $amount: 20%); - } - } + li { + &.active { + a { + font-weight: 700; + color: lighten($color: $cRed, $amount: 20%); + } + } - a { - color: $cText; - transition: all 0.3s ease; - font-size: 14px; + a { + color: $cText; + transition: all 0.3s ease; + font-size: 14px; - @include respond-above(md) { - font-size: 16px; - } + @include respond-above(md) { + font-size: 16px; + } - &:hover { - text-decoration: none; - } - } - } - } - } + &:hover { + text-decoration: none; + } + } + } + } + } - .text { - a { - color: $cRed; - transition: all 0.3s ease; + .text { + a { + color: $cRed; + transition: all 0.3s ease; - &:hover { - color: $cRed; - text-decoration: none; - } - } + &:hover { + color: $cRed; + text-decoration: none; + } + } - h2:not(.name) { - font-weight: 600; - font-size: 22px; - font-family: $font_nunito; - color: $cText; - } + h2:not(.name) { + font-weight: 600; + font-size: 22px; + font-family: $font_nunito; + color: $cText; + } - .product-mini { - margin-bottom: 25px; - } - } + .product-mini { + margin-bottom: 25px; + } + } - .social-icons { - display: inline-flex; + .social-icons { + display: inline-flex; - .title { - margin-right: 15px; - } - } + .title { + margin-right: 15px; + } + } - .btn-back { - margin: 25px 0; - max-width: 200px; - } - } + .btn-back { + margin: 25px 0; + max-width: 200px; + } + } - .container { - // @media only screen and (min-width: 1500px) { - // width: 100%; - // max-width: 1400px; - // } - } + .container { + // @media only screen and (min-width: 1500px) { + // width: 100%; + // max-width: 1400px; + // } + } } #product { - .product-message { - margin: 25px 0; - // max-width: 334px; - - textarea { - font-size: 14px; - width: 100%; - } - } - - .history-back { - max-width: 150px; - } - - #image-big { - position: relative; - - .new { - border: 2px solid $cPinkDark; - padding: 5px 10px; - font-weight: 600; - display: inline-block; - position: absolute; - top: 10px; - left: -10px; - z-index: 10; - background: #fff; - } - - a { - img { - width: 100%; - } - } - } - - .product-producer { - margin: 0 0 1rem 0; - - a { - color: $cRed; - font-weight: 600; - } - } - - #product-options { - @include respond-above(sm) { - padding: 0; - } - - .warehouse-message-box { - display: flex; - align-items: flex-end; - gap: 10px; - margin-bottom: 5px; - - img { - width: 26px; - height: 26px; - filter: invert(1); - } - } - - .warehouse-message { - // opacity: 0.7; - color: $cText; - // font-size: 14px; - // line-height: 24px; - font-style: normal; - letter-spacing: 0px; - font-weight: 700; - } - - h1 { - font-family: $font_nunito; - - font-weight: 600; - font-size: 32px; - } - - .prices { - display: flex; - justify-content: flex-start; - align-items: flex-end; - margin-bottom: 1.875rem; - margin-top: 1.875rem; - flex-wrap: wrap; - - .price_weight { - width: 100%; - order: 99; - font-size: 12px; - color: #333333; - } - - .price-minimal { - width: 100%; - font-size: 12px; - margin-bottom: 15px; - } - - .price { - font-weight: 800; - // font-size: 30px; - line-height: 27px; - color: $cRed; - font-family: $font_nunito; - order: 2; - } - - .price-old { - margin-right: 20px; - font-weight: 400; - font-size: 22px; - line-height: 22px; - font-family: $font_nunito; - order: 1; - - color: #b9b9b9; - - position: relative; - - &:before { - width: 120%; - position: absolute; - content: ''; - right: -10%; - top: 40%; - height: 0px; - border-bottom: 2px solid #b9b9b9; - - // -webkit-transform: rotate(-19deg); - // transform: rotate(-19deg); - } - } - - .flag { - &-promotion { - order: 3; - color: #fff; - font-weight: 600; - letter-spacing: 0.075em; - text-transform: uppercase; - border-radius: 2px; - padding: 0.25rem 0.5rem; - vertical-align: middle; - display: inline-block; - font-size: 11px; - margin-left: 20px; - background-color: #4cbb17; - padding: 8px 10px; - line-height: 1; - } - } - } - - .add-to-basket { - display: flex; - margin: 25px 0; - - .quantity-container { - display: flex; - align-items: center; - vertical-align: middle; - margin-right: 1.875rem; - - &.hidden { - display: none; - } - - .btn-minus, - .btn-plus { - width: 40px; - height: 40px; - background-color: $cGray; - position: relative; - display: inline-block; - vertical-align: middle; - line-height: 40px; - border-radius: 50%; - text-align: center; - transition: all 0.3s ease; - - .fa { - color: $cText; - opacity: 0.7; - } - - &:hover { - background-color: $cText; - - .fa { - color: #fff; - opacity: 1; - } - } - } - - #quantity { - width: 60px; - text-align: center; - margin: 0 5px; - height: 40px; - border: 2px solid #e7e7e7; - - &:focus { - outline: none; - border: 2px solid #000; - box-shadow: none; - } - } - } - - #add-to-basket { - &.hidden { - display: none; - } - } - - .alert { - background: #dc3545; - color: #fff; - text-align: left; - display: block; - width: 100%; - padding: 10px; - font-size: 14px; - max-width: 334px; - margin: 0; - border-radius: 10px; - - &.hidden { - display: none; - } - } - } - - .short-description { - color: $cText; - font-size: 14px; - line-height: 24px; - font-style: normal; - letter-spacing: 0px; - - p { - strong { - font-weight: 600; - } - } - } - - form.product-options { - .custom-field { - margin-bottom: 5px; - display: grid; - grid-template-columns: 200px 1fr; - gap: 5px; - - .grow-wrap { - display: grid; - } - - .grow-wrap::after { - content: attr(data-replicated-value) ' '; - white-space: pre-wrap; - visibility: hidden; - } - - .grow-wrap > textarea { - resize: none; - overflow: hidden; - } - - .grow-wrap > textarea, - .grow-wrap::after { - border: 1px solid #d5d5d5; - padding: 0.5rem; - font: inherit; - grid-area: 1 / 1 / 2 / 2; - border-radius: 6px; - } - } - - .product-message { - display: flex; - flex-direction: column; - gap: 10px; - - label { - min-width: fit-content; - margin-bottom: 0; - } - - textarea { - width: 100%; - background-color: #f2f2f2; - color: #43454b; - outline: 0; - border: 0; - font-weight: 400; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125); - min-height: 40px; - box-sizing: border-box; - padding: 5px 10px; - resize: none; - border-radius: 15px; - min-width: 250px; - } - } - } - } - - #image-big { - max-width: 625px; - margin: auto; - - img { - width: 100%; - } - } - - .gallery { - margin-top: -100px; - display: flex; - justify-content: center; - align-items: center; - position: relative; - z-index: 10; - - @include respond-below(sm) { - margin-top: 0; - } - - a { - background: #fff; - display: block; - border-top: 8px solid #f6f6f6; - border-bottom: 8px solid #f6f6f6; - border-left: 4px solid #f6f6f6; - border-right: 4px solid #f6f6f6; - height: 180px; - width: 125px; - - &:first-child { - border-left: 8px solid #f6f6f6; - } - - &:last-child { - border-right: 8px solid #f6f6f6; - } - - @include respond-below(sm) { - height: 90px; - width: 75px; - } - - img { - height: 100%; - width: 100%; - object-fit: cover; - } - } - } - - #product-options { - form { - #attributes { - .title { - margin-bottom: 10px; - opacity: 0.7; - color: $cText; - font-size: 14px; - line-height: 24px; - font-style: normal; - letter-spacing: 0px; - } - - .attribute-container { - display: flex; - justify-content: flex-start; - align-items: center; - margin-bottom: 5px; - - strong { - line-height: 24px; - } - - .attribute-label { - margin-bottom: 0; - margin-right: 15px; - color: $cText; - font-size: 14px; - line-height: 24px; - font-style: normal; - letter-spacing: 0px; - font-weight: 600; - } - - .fradio { - margin-left: 15px; - - input { - display: none; - } - - label { - display: inline-block; - padding: 5px 10px; - margin-bottom: 0; - background: #f5f5f5; - border: 2px solid #e6e6e6; - font-size: 13px; - font-weight: 600; - cursor: pointer; - - &:first-child { - margin-left: 0; - } - - &.active { - border: 2px solid $cRed; - } - } - } - } - } - } - } - - #description { - margin-top: 50px; - - #tabs-menu-sticky-wrapper { - margin-bottom: 20px; - - &.is-sticky { - width: 100% !important; - left: 0; - } - - #tabs-menu { - @extend .title-border; - background-color: #fff; - z-index: 15; - display: flex; - list-style-type: none; - padding-inline-start: 0; - margin-bottom: 0; - font-weight: 400; - line-height: 32px; - letter-spacing: -1px; - @extend .container; - - li { - opacity: 1; - // -webkit-background-clip: text; - // -webkit-text-fill-color: transparent; - // background-image: linear-gradient(to right, - // #000, - // #000 50%, - // rgba(0, 0, 0, 0.3) 50%); - // background-size: 200% 100%; - // background-position: 100%; - // transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); - // cursor: pointer; - color: $cText; - cursor: pointer; - - margin-right: 20px; - - /*color: #909090;*/ - &:last-child { - margin-right: 0; - } - - &:hover { - color: $cRed; - } - - &.current { - background-position: 0%; - } - } - } - } - - .description-right { - .title { - @extend .title-border; - font-size: 28px; - font-weight: 400; - margin-bottom: 20px; - } - } - - .tab-content { - padding: 25px; - - @include respond-below(sm) { - padding: 10px; - } - - margin-bottom: 25px; - - &.hidden { - display: none; - } - - &:last-child { - margin-bottom: 0; - } - - .tab-title { - font-family: $font_nunito; - font-size: 22px; - font-weight: 400; - margin-bottom: 10px; - } - } - } + .product-message { + margin: 25px 0; + // max-width: 334px; + + textarea { + font-size: 14px; + width: 100%; + } + } + + .history-back { + max-width: 150px; + } + + #image-big { + position: relative; + + .new { + border: 2px solid $cPinkDark; + padding: 5px 10px; + font-weight: 600; + display: inline-block; + position: absolute; + top: 10px; + left: -10px; + z-index: 10; + background: #fff; + } + + a { + img { + width: 100%; + } + } + } + + .product-producer { + margin: 0 0 1rem 0; + + a { + color: $cRed; + font-weight: 600; + } + } + + #product-options { + @include respond-above(sm) { + padding: 0; + } + + .warehouse-message-box { + display: flex; + align-items: flex-end; + gap: 10px; + margin-bottom: 5px; + + img { + width: 26px; + height: 26px; + filter: invert(1); + } + } + + .warehouse-message { + // opacity: 0.7; + color: $cText; + // font-size: 14px; + // line-height: 24px; + font-style: normal; + letter-spacing: 0px; + font-weight: 700; + } + + h1 { + font-family: $font_nunito; + + font-weight: 600; + font-size: 32px; + } + + .prices { + display: flex; + justify-content: flex-start; + align-items: flex-end; + margin-bottom: 1.875rem; + margin-top: 1.875rem; + flex-wrap: wrap; + + .price_weight { + width: 100%; + order: 99; + font-size: 12px; + color: #333333; + } + + .price-minimal { + width: 100%; + font-size: 12px; + margin-bottom: 15px; + } + + .price { + font-weight: 800; + // font-size: 30px; + line-height: 27px; + color: $cRed; + font-family: $font_nunito; + order: 2; + } + + .price-old { + margin-right: 20px; + font-weight: 400; + font-size: 22px; + line-height: 22px; + font-family: $font_nunito; + order: 1; + + color: #b9b9b9; + + position: relative; + + &:before { + width: 120%; + position: absolute; + content: ''; + right: -10%; + top: 40%; + height: 0px; + border-bottom: 2px solid #b9b9b9; + + // -webkit-transform: rotate(-19deg); + // transform: rotate(-19deg); + } + } + + .flag { + &-promotion { + order: 3; + color: #fff; + font-weight: 600; + letter-spacing: 0.075em; + text-transform: uppercase; + border-radius: 2px; + padding: 0.25rem 0.5rem; + vertical-align: middle; + display: inline-block; + font-size: 11px; + margin-left: 20px; + background-color: #4cbb17; + padding: 8px 10px; + line-height: 1; + } + } + } + + .add-to-basket { + display: flex; + margin: 25px 0; + + .quantity-container { + display: flex; + align-items: center; + vertical-align: middle; + margin-right: 1.875rem; + + &.hidden { + display: none; + } + + .btn-minus, + .btn-plus { + width: 40px; + height: 40px; + background-color: $cGray; + position: relative; + display: inline-block; + vertical-align: middle; + line-height: 40px; + border-radius: 50%; + text-align: center; + transition: all 0.3s ease; + + .fa { + color: $cText; + opacity: 0.7; + } + + &:hover { + background-color: $cText; + + .fa { + color: #fff; + opacity: 1; + } + } + } + + #quantity { + width: 60px; + text-align: center; + margin: 0 5px; + height: 40px; + border: 2px solid #e7e7e7; + + &:focus { + outline: none; + border: 2px solid #000; + box-shadow: none; + } + } + } + + #add-to-basket { + &.hidden { + display: none; + } + } + + .alert { + background: #dc3545; + color: #fff; + text-align: left; + display: block; + width: 100%; + padding: 10px; + font-size: 14px; + max-width: 334px; + margin: 0; + border-radius: 10px; + + &.hidden { + display: none; + } + } + } + + .short-description { + color: $cText; + font-size: 14px; + line-height: 24px; + font-style: normal; + letter-spacing: 0px; + + p { + strong { + font-weight: 600; + } + } + } + + form.product-options { + .custom-field { + margin-bottom: 5px; + display: grid; + grid-template-columns: 200px 1fr; + gap: 5px; + + .grow-wrap { + display: grid; + } + + .grow-wrap::after { + content: attr(data-replicated-value) ' '; + white-space: pre-wrap; + visibility: hidden; + } + + .grow-wrap>textarea { + resize: none; + overflow: hidden; + } + + .grow-wrap>textarea, + .grow-wrap::after { + border: 1px solid #d5d5d5; + padding: 0.5rem; + font: inherit; + grid-area: 1 / 1 / 2 / 2; + border-radius: 6px; + } + } + + .product-message { + display: flex; + flex-direction: column; + gap: 10px; + + label { + min-width: fit-content; + margin-bottom: 0; + } + + textarea { + width: 100%; + background-color: #f2f2f2; + color: #43454b; + outline: 0; + border: 0; + font-weight: 400; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125); + min-height: 40px; + box-sizing: border-box; + padding: 5px 10px; + resize: none; + border-radius: 15px; + min-width: 250px; + } + } + } + } + + #image-big { + max-width: 625px; + margin: auto; + + img { + width: 100%; + } + } + + .gallery { + margin-top: -100px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + z-index: 10; + + @include respond-below(sm) { + margin-top: 0; + } + + a { + background: #fff; + display: block; + border-top: 8px solid #f6f6f6; + border-bottom: 8px solid #f6f6f6; + border-left: 4px solid #f6f6f6; + border-right: 4px solid #f6f6f6; + height: 180px; + width: 125px; + + &:first-child { + border-left: 8px solid #f6f6f6; + } + + &:last-child { + border-right: 8px solid #f6f6f6; + } + + @include respond-below(sm) { + height: 90px; + width: 75px; + } + + img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + } + + #product-options { + form { + #attributes { + .title { + margin-bottom: 10px; + opacity: 0.7; + color: $cText; + font-size: 14px; + line-height: 24px; + font-style: normal; + letter-spacing: 0px; + } + + .attribute-container { + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 5px; + + strong { + line-height: 24px; + } + + .attribute-label { + margin-bottom: 0; + margin-right: 15px; + color: $cText; + font-size: 14px; + line-height: 24px; + font-style: normal; + letter-spacing: 0px; + font-weight: 600; + } + + .fradio { + margin-left: 15px; + + input { + display: none; + } + + label { + display: inline-block; + padding: 5px 10px; + margin-bottom: 0; + background: #f5f5f5; + border: 2px solid #e6e6e6; + font-size: 13px; + font-weight: 600; + cursor: pointer; + + &:first-child { + margin-left: 0; + } + + &.active { + border: 2px solid $cRed; + } + } + } + } + } + } + } + + #description { + margin-top: 50px; + + #tabs-menu-sticky-wrapper { + margin-bottom: 20px; + + &.is-sticky { + width: 100% !important; + left: 0; + } + + #tabs-menu { + @extend .title-border; + background-color: #fff; + z-index: 15; + display: flex; + list-style-type: none; + padding-inline-start: 0; + margin-bottom: 0; + font-weight: 400; + line-height: 32px; + letter-spacing: -1px; + @extend .container; + + li { + opacity: 1; + // -webkit-background-clip: text; + // -webkit-text-fill-color: transparent; + // background-image: linear-gradient(to right, + // #000, + // #000 50%, + // rgba(0, 0, 0, 0.3) 50%); + // background-size: 200% 100%; + // background-position: 100%; + // transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); + // cursor: pointer; + color: $cText; + cursor: pointer; + + margin-right: 20px; + + /*color: #909090;*/ + &:last-child { + margin-right: 0; + } + + &:hover { + color: $cRed; + } + + &.current { + background-position: 0%; + } + } + } + } + + .description-right { + .title { + @extend .title-border; + font-size: 28px; + font-weight: 400; + margin-bottom: 20px; + } + } + + .tab-content { + padding: 25px; + + @include respond-below(sm) { + padding: 10px; + } + + margin-bottom: 25px; + + &.hidden { + display: none; + } + + &:last-child { + margin-bottom: 0; + } + + .tab-title { + font-family: $font_nunito; + font-size: 22px; + font-weight: 400; + margin-bottom: 10px; + } + } + } } .products-sets, .products-related { - .box-title { - text-align: center; - } + .box-title { + text-align: center; + } - .owl-item { - .product-mini { - margin: 0 25px 25px; + .owl-item { + .product-mini { + margin: 0 25px 25px; - .new { - border: 2px solid $cPinkDark; - padding: 3px 5px; - font-weight: 600; - display: inline-block; - position: absolute; - top: 10px; - left: 10px; - z-index: 10; - background: #fff; - } - } - } + .new { + border: 2px solid $cPinkDark; + padding: 3px 5px; + font-weight: 600; + display: inline-block; + position: absolute; + top: 10px; + left: 10px; + z-index: 10; + background: #fff; + } + } + } } #basket-container, .basket-summary-container, .order-summary { - @extend .mini-content; + @extend .mini-content; - .box-title { - @include respond-below(sm) { - padding-bottom: 0; - } - } + .box-title { + @include respond-below(sm) { + padding-bottom: 0; + } + } - .btn-dark { - max-width: 200px; - } + .btn-dark { + max-width: 200px; + } - .basket-options { - padding-top: 25px; + .basket-options { + padding-top: 25px; - > .content { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + >.content { + display: flex; + justify-content: space-between; + flex-wrap: wrap; - .left, - .right { - width: 50%; - padding-right: 25px; + .left, + .right { + width: 50%; + padding-right: 25px; - @include respond-below(sm) { - width: 100%; - padding-right: 0; - } - } + @include respond-below(sm) { + width: 100%; + padding-right: 0; + } + } - .right { - padding-left: 25px; - padding-right: 0; + .right { + padding-left: 25px; + padding-right: 0; - @include respond-below(xs) { - padding-left: 0; - } - } + @include respond-below(xs) { + padding-left: 0; + } + } - .basket-address-form { - width: 100%; - display: flex; - flex-wrap: wrap; + .basket-address-form { + width: 100%; + display: flex; + flex-wrap: wrap; - .box-title, - form { - width: 100%; - } + .box-title, + form { + width: 100%; + } - .addresses { - .address { - width: calc(100% / 2 - 10px); - margin: 0 10px 10px 10px; - padding: 10px; + .addresses { + .address { + width: calc(100% / 2 - 10px); + margin: 0 10px 10px 10px; + padding: 10px; - &:nth-child(2n-1) { - margin-left: 0; - } + &:nth-child(2n-1) { + margin-left: 0; + } - &:nth-child(2n) { - margin-right: 0; - } - } - } + &:nth-child(2n) { + margin-right: 0; + } + } + } - #postal_code { - margin-bottom: 15px; - } + #postal_code { + margin-bottom: 15px; + } - #order-send { - @include respond-below(sm) { - width: 100%; - } - } - } + #order-send { + @include respond-below(sm) { + width: 100%; + } + } + } - .inpost-map-container { - display: none; - } + .inpost-map-container { + display: none; + } - .user-login { - justify-content: flex-start; - } + .user-login { + justify-content: flex-start; + } - #payment-methods { - @include respond-below(sm) { - width: 100%; - margin-bottom: 15px; - } + #payment-methods { + @include respond-below(sm) { + width: 100%; + margin-bottom: 15px; + } - .options { - display: flex; - margin-bottom: 10px; + .options { + display: flex; + margin-bottom: 10px; - img { - height: 20px; - } + img { + height: 20px; + } - .check { - padding-right: 10px; - } + .check { + padding-right: 10px; + } - .description { - padding-right: 25px; - } - } - } + .description { + padding-right: 25px; + } + } + } - #transport-methods { - @include respond-below(sm) { - width: 100%; - margin-bottom: 15px; - } + #transport-methods { + @include respond-below(sm) { + width: 100%; + margin-bottom: 15px; + } .inpost-info, .orlen-info { @@ -2533,14 +2535,14 @@ ul.pager { font-style: italic; text-align: right; - a { - background: $cRed; - color: #fff; - font-style: normal; - display: inline-block; - padding: 5px 10px; - margin-left: 15px; - @include transition; + a { + background: $cRed; + color: #fff; + font-style: normal; + display: inline-block; + padding: 5px 10px; + margin-left: 15px; + @include transition; &.hidden { display: none; @@ -2553,178 +2555,178 @@ ul.pager { } } - .options { - display: flex; - margin-bottom: 10px; + .options { + display: flex; + margin-bottom: 10px; - .check { - padding-right: 10px; - } + .check { + padding-right: 10px; + } - .description { - padding-right: 25px; - } + .description { + padding-right: 25px; + } - .price { - text-align: right; - margin-left: auto; - white-space: nowrap; - } - } - } - } - } + .price { + text-align: right; + margin-left: auto; + white-space: nowrap; + } + } + } + } + } - #basket { - .basket-bottom { - padding-bottom: 25px; - padding-top: 25px; - display: flex; - justify-content: space-between; + #basket { + .basket-bottom { + padding-bottom: 25px; + padding-top: 25px; + display: flex; + justify-content: space-between; - @include respond-below(sm) { - flex-wrap: wrap; - } + @include respond-below(sm) { + flex-wrap: wrap; + } - .basket-message, - .coupon { - width: 50%; + .basket-message, + .coupon { + width: 50%; - @include respond-below(sm) { - width: 100%; - margin-bottom: 15px; - } - } + @include respond-below(sm) { + width: 100%; + margin-bottom: 15px; + } + } - textarea { - width: 100%; - max-width: 400px; - height: 100px; - } + textarea { + width: 100%; + max-width: 400px; + height: 100px; + } - .coupon { - max-width: 400px; - display: flex; - justify-content: flex-end; + .coupon { + max-width: 400px; + display: flex; + justify-content: flex-end; - @include respond-below(sm) { - width: 100%; - max-width: 100%; + @include respond-below(sm) { + width: 100%; + max-width: 100%; - form { - width: 100%; - } - } + form { + width: 100%; + } + } - input { - height: 45px; - } + input { + height: 45px; + } - .btn { - height: 45px; - padding: 0 15px; - min-width: 100px; - } - } - } - } + .btn { + height: 45px; + padding: 0 15px; + min-width: 100px; + } + } + } + } } .inpost-map-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.75); - z-index: 1000; - padding: 100px; - display: none; - @include transition; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.75); + z-index: 1000; + padding: 100px; + display: none; + @include transition; - @include respond-below(sm) { - padding: 15px; - } + @include respond-below(sm) { + padding: 15px; + } - #inpost-map { - background: #fff; - } + #inpost-map { + background: #fff; + } - .inpost-hide { - margin: 15px auto; - float: right; - color: #fff !important; - text-transform: uppercase; - @include transition; - font-weight: 600; - } + .inpost-hide { + margin: 15px auto; + float: right; + color: #fff !important; + text-transform: uppercase; + @include transition; + font-weight: 600; + } } #address-data { - .mini-box { - max-width: 550px; - margin: auto; + .mini-box { + max-width: 550px; + margin: auto; - .box-title { - margin-bottom: 25px; - } - } + .box-title { + margin-bottom: 25px; + } + } } .basket-address-form { - .btn { - margin-bottom: 15px; - } + .btn { + margin-bottom: 15px; + } - a { - color: $cRed; - } + a { + color: $cRed; + } } .order-summary { - .order-summary-content { - padding-bottom: 50px; + .order-summary-content { + padding-bottom: 50px; - .top { - padding-bottom: 50px; - } - } + .top { + padding-bottom: 50px; + } + } - .order-bottom { - display: flex; - justify-content: space-between; + .order-bottom { + display: flex; + justify-content: space-between; - @include respond-below(sm) { - flex-wrap: wrap; - } + @include respond-below(sm) { + flex-wrap: wrap; + } - .left, - .right { - width: 50%; - display: flex; + .left, + .right { + width: 50%; + display: flex; - @include respond-below(sm) { - width: 100%; - } - } + @include respond-below(sm) { + width: 100%; + } + } - .right { - justify-content: flex-end; + .right { + justify-content: flex-end; - .btn { - margin-bottom: 25px; - } + .btn { + margin-bottom: 25px; + } - @include respond-below(sm) { - justify-content: flex-start; - padding-top: 25px; - } + @include respond-below(sm) { + justify-content: flex-start; + padding-top: 25px; + } - .payment-info { - padding-bottom: 25px; - } - } - } + .payment-info { + padding-bottom: 25px; + } + } + } } // @@ -2732,22 +2734,22 @@ ul.pager { // .user-login, .user-register { - display: flex; - justify-content: center; + display: flex; + justify-content: center; - .content { - width: 100%; - max-width: 600px; - } + .content { + width: 100%; + max-width: 600px; + } - .btn { - margin-bottom: 25px; - width: 100%; - } + .btn { + margin-bottom: 25px; + width: 100%; + } - a { - color: $cRed; - } + a { + color: $cRed; + } } // @@ -2758,3535 +2760,3540 @@ ul.pager { // koszyk // .basket-product { - margin-bottom: 10px; + margin-bottom: 10px; - .custom-field { - display: flex; - font-size: 13px; - gap: 10px; + .custom-field { + display: flex; + font-size: 13px; + gap: 10px; - ._name { - font-weight: 700; - } - } + ._name { + font-weight: 700; + } + } - .basket-product-message { - padding: 0 0 10px; - width: 250px; + .basket-product-message { + padding: 0 0 10px; + width: 250px; - @include respond-above(sm) { - padding: 8px 0 0; - } + @include respond-above(sm) { + padding: 8px 0 0; + } - textarea { - font-size: 13px; - padding: 5px 10px; - width: 100%; - } - } + textarea { + font-size: 13px; + padding: 5px 10px; + width: 100%; + } + } - @include respond-above(sm) { - display: flex; - justify-content: flex-start; - } + @include respond-above(sm) { + display: flex; + justify-content: flex-start; + } - @include respond-below(sm) { - padding-bottom: 25px; - border-bottom: 2px solid $cGrayLight; - margin-bottom: 25px; + @include respond-below(sm) { + padding-bottom: 25px; + border-bottom: 2px solid $cGrayLight; + margin-bottom: 25px; - &::after { - content: ''; - display: block; - clear: both; - } - } + &::after { + content: ''; + display: block; + clear: both; + } + } - .image { - height: 110px; - width: 83px; - margin-right: 15px; - min-width: 83px; + .image { + height: 110px; + width: 83px; + margin-right: 15px; + min-width: 83px; - @include respond-below(sm) { - float: left; - } + @include respond-below(sm) { + float: left; + } - img { - height: 100%; - width: 100%; - object-fit: cover; - } - } + img { + height: 100%; + width: 100%; + object-fit: cover; + } + } - .details { - margin-right: 15px; - display: flex; - align-items: center; - flex-wrap: wrap; + .details { + margin-right: 15px; + display: flex; + align-items: center; + flex-wrap: wrap; - > * { - width: 100%; - } + >* { + width: 100%; + } - @include respond-below(sm) { - width: calc(100% - 105px); - float: right; - margin-right: 0; - margin-bottom: 10px; - } + @include respond-below(sm) { + width: calc(100% - 105px); + float: right; + margin-right: 0; + margin-bottom: 10px; + } - .name { - @include respond-below(sm) { - margin-bottom: 10px; - } - } + .name { + @include respond-below(sm) { + margin-bottom: 10px; + } + } - a { - font-weight: 600; - color: $cText; - font-size: 16px; - @include transition; + a { + font-weight: 600; + color: $cText; + font-size: 16px; + @include transition; - @include respond-below(sm) { - font-size: 14px; - } + @include respond-below(sm) { + font-size: 14px; + } - &:hover { - color: $cRed; - text-decoration: none; - } - } + &:hover { + color: $cRed; + text-decoration: none; + } + } - .description { - font-style: italic; - font-size: 15px; - } - } + .description { + font-style: italic; + font-size: 15px; + } + } - .prices { - margin-left: auto; - font-family: $font_nunito; - font-size: 18px; - font-weight: 600; - white-space: nowrap; - display: flex; - align-items: center; + .prices { + margin-left: auto; + font-family: $font_nunito; + font-size: 18px; + font-weight: 600; + white-space: nowrap; + display: flex; + align-items: center; - @include respond-below(sm) { - width: calc(100% - 105px); - float: right; - clear: right; - margin-bottom: 10px; - } + @include respond-below(sm) { + width: calc(100% - 105px); + float: right; + clear: right; + margin-bottom: 10px; + } - .price { - span { - margin-left: 25px; - margin-right: 25px; + .price { + span { + margin-left: 25px; + margin-right: 25px; - @include respond-below(sm) { - margin-left: 10px; - margin-right: 10px; - } - } - } + @include respond-below(sm) { + margin-left: 10px; + margin-right: 10px; + } + } + } - u { - position: relative; - display: inline-block; - margin-left: 15px; + u { + position: relative; + display: inline-block; + margin-left: 15px; - @include respond-below(sm) { - margin-left: 10px; - } + @include respond-below(sm) { + margin-left: 10px; + } - &::before { - width: 100%; - position: absolute; - content: ''; - right: -4px; - top: 32%; - height: 0; - border-bottom: 3px solid #ff0909; - -webkit-transform: rotate(-19deg); - transform: rotate(-19deg); - } - } - } + &::before { + width: 100%; + position: absolute; + content: ''; + right: -4px; + top: 32%; + height: 0; + border-bottom: 3px solid #ff0909; + -webkit-transform: rotate(-19deg); + transform: rotate(-19deg); + } + } + } - .buttons { - display: flex; - align-items: center; + .buttons { + display: flex; + align-items: center; - @include respond-below(sm) { - // width: calc(100% - 98px); - text-align: right; - float: right; - clear: right; - } + @include respond-below(sm) { + // width: calc(100% - 98px); + text-align: right; + float: right; + clear: right; + } - .btn-minus, - .btn-plus { - width: 40px; - min-width: 40px; - height: 40px; - background: #f5f5f5; - position: relative; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - @include transition; - padding: 0; - color: $cText; - margin: 0 15px; + .btn-minus, + .btn-plus { + width: 40px; + min-width: 40px; + height: 40px; + background: #f5f5f5; + position: relative; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + @include transition; + padding: 0; + color: $cText; + margin: 0 15px; - &:hover { - background: $cText; - color: #fff; - } - } + &:hover { + background: $cText; + color: #fff; + } + } - #quantity { - width: 60px; - text-align: center; - margin: 0 5px; - height: 40px; - border: 2px solid #e7e7e7; - } + #quantity { + width: 60px; + text-align: center; + margin: 0 5px; + height: 40px; + border: 2px solid #e7e7e7; + } - .btn-delete { - height: 40px; - padding: 0; - background: $cText; - border: 0; - border-radius: 50%; - @include transition; - display: flex; - width: 40px; - align-items: center; - justify-content: center; + .btn-delete { + height: 40px; + padding: 0; + background: $cText; + border: 0; + border-radius: 50%; + @include transition; + display: flex; + width: 40px; + align-items: center; + justify-content: center; - &:hover { - background: $cPinkDark; - } + &:hover { + background: $cPinkDark; + } - i { - font-size: 14px; - } - } - } + i { + font-size: 14px; + } + } + } } .basket-summary { - display: flex; - justify-content: flex-end; - font-weight: 500; - font-size: 15px; - margin-bottom: 5px; + display: flex; + justify-content: flex-end; + font-weight: 500; + font-size: 15px; + margin-bottom: 5px; - &.left { - justify-content: flex-start; - } + &.left { + justify-content: flex-start; + } - &.big { - margin-top: 15px; - margin-bottom: 15px; - font-size: 22px; - font-family: $font_nunito; - } + &.big { + margin-top: 15px; + margin-bottom: 15px; + font-size: 22px; + font-family: $font_nunito; + } - span { - margin-left: 15px; - font-weight: 600; - } + span { + margin-left: 15px; + font-weight: 600; + } } // // adresy // .addresses { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; - .address { - width: calc(100% / 4 - 50px); - margin: 25px; - padding: 25px; - border: 3px solid $cGrayLight; + .address { + width: calc(100% / 4 - 50px); + margin: 25px; + padding: 25px; + border: 3px solid $cGrayLight; - &.active { - border: 3px solid $cRed; - } + &.active { + border: 3px solid $cRed; + } - .buttons { - padding-top: 15px; + .buttons { + padding-top: 15px; - a { - font-weight: 600; - margin-right: 10px; - @include transition; - color: $cRed; + a { + font-weight: 600; + margin-right: 10px; + @include transition; + color: $cRed; - &.text-danger { - color: $cPinkDark; - } + &.text-danger { + color: $cPinkDark; + } - &:hover { - text-decoration: none; - color: $cTextLight; - } - } - } - } + &:hover { + text-decoration: none; + color: $cTextLight; + } + } + } + } } // // panel klienta // .client-panel { - @extend .mini-content; + @extend .mini-content; - &.address-edit { - .row-flex { - input:first-child { - margin-right: 15px; - } - } - } + &.address-edit { + .row-flex { + input:first-child { + margin-right: 15px; + } + } + } - &.client-addresses { - .btn-big { - max-width: 200px; - margin: 0 0 25px; - padding: 10px; - } + &.client-addresses { + .btn-big { + max-width: 200px; + margin: 0 0 25px; + padding: 10px; + } - .addresses { - @include respond-below(sm) { - justify-content: space-between; - } + .addresses { + @include respond-below(sm) { + justify-content: space-between; + } - .address { - @include respond-above(sm) { - &:nth-child(5n-4) { - margin-left: 0; - } + .address { + @include respond-above(sm) { + &:nth-child(5n-4) { + margin-left: 0; + } - &:nth-child(4n) { - margin-left: 0; - } - } + &:nth-child(4n) { + margin-left: 0; + } + } - @include respond-below(sm) { - width: calc(100% / 2 - 10px); - margin: 10px 5px; - padding: 10px; + @include respond-below(sm) { + width: calc(100% / 2 - 10px); + margin: 10px 5px; + padding: 10px; - &:nth-child(2n-1) { - margin-left: 0; - } + &:nth-child(2n-1) { + margin-left: 0; + } - &:nth-child(2n) { - margin-right: 0; - } - } - } - } - } + &:nth-child(2n) { + margin-right: 0; + } + } + } + } + } - .client-menu { - padding-bottom: 25px; + .client-menu { + padding-bottom: 25px; - ul { - display: flex; - list-style-type: none; - margin: 0; - padding: 0; - justify-content: flex-start; + ul { + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + justify-content: flex-start; - li { - padding: 0; - position: relative; - margin-right: 15px; - margin-left: 15px; + li { + padding: 0; + position: relative; + margin-right: 15px; + margin-left: 15px; - &:first-child { - margin-left: 0; - } + &:first-child { + margin-left: 0; + } - a { - font-size: 16px; - font-weight: 600; - color: #fff; - @include transition; - } - } - } - } + a { + font-size: 16px; + font-weight: 600; + color: #fff; + @include transition; + } + } + } + } } // // jquery confirm // .jconfirm.jconfirm-modern .jconfirm-box { - width: 100% !important; - max-width: 800px !important; + width: 100% !important; + max-width: 800px !important; } @media (min-width: 1281px) and (max-width: 1365px) { - .popular-categories { - #scontainer-8 { - div[class^='col-lg'] { - margin: 0 5px; - max-width: calc(25% - 10px); + .popular-categories { + #scontainer-8 { + div[class^='col-lg'] { + margin: 0 5px; + max-width: calc(25% - 10px); - a { - font-size: 26px; - line-height: 28px; - } - } - } - } + a { + font-size: 26px; + line-height: 28px; + } + } + } + } - .promoted-products { - .content { - .product-mini { - // margin: 10px; - max-width: calc(100% / 4 - 7.5px); - } - } - } + .promoted-products { + .content { + .product-mini { + // margin: 10px; + max-width: calc(100% / 4 - 7.5px); + } + } + } - .product-mini { - .product-details { - .name { - font-size: 21px; - } - } - } + .product-mini { + .product-details { + .name { + font-size: 21px; + } + } + } - .article-list { - .article-title { - font-size: 21px; - } - } + .article-list { + .article-title { + font-size: 21px; + } + } - #product { - #product-options { - padding: 40px 25px; - } - } + #product { + #product-options { + padding: 40px 25px; + } + } } @media (min-width: 992px) and (max-width: 1200px) { - .box { - padding: 30px 0; - } + .box { + padding: 30px 0; + } - .popular-categories { - padding-bottom: 0; - margin-bottom: -10px; + .popular-categories { + padding-bottom: 0; + margin-bottom: -10px; - #scontainer-8 { - div[class^='col-lg'] { - width: 100%; - max-width: calc(50% - 30px); - flex: 0 0 50%; - margin-bottom: 60px; - } - } - } + #scontainer-8 { + div[class^='col-lg'] { + width: 100%; + max-width: calc(50% - 30px); + flex: 0 0 50%; + margin-bottom: 60px; + } + } + } - .mini-banners { - h3 { - font-size: 25px; - } + .mini-banners { + h3 { + font-size: 25px; + } - p { - font-size: 14px; - line-height: 22px; - } - } + p { + font-size: 14px; + line-height: 22px; + } + } - .last-on-blog { - .article-list { - margin-bottom: 25px; - } - } + .last-on-blog { + .article-list { + margin-bottom: 25px; + } + } - .footer { - #newsletter { - margin: 0 auto 50px; - max-width: 600px; - } + .footer { + #newsletter { + margin: 0 auto 50px; + max-width: 600px; + } - > .container { - > .row { - .col-xl-4 { - order: 1; - } + >.container { + >.row { + .col-xl-4 { + order: 1; + } - .col-xl-8 { - order: 2; - } - } - } - } + .col-xl-8 { + order: 2; + } + } + } + } - #product { - #product-options { - padding: 0; + #product { + #product-options { + padding: 0; - h1 { - font-size: 28px; - } - } - } + h1 { + font-size: 28px; + } + } + } - #main-menu { - #menu-container-1 { - ul.level-0 { - > li { - > ul { - padding: 25px; - } - } - } - } - } + #main-menu { + #menu-container-1 { + ul.level-0 { + >li { + >ul { + padding: 25px; + } + } + } + } + } - .basket-summary-address { - .left { - @include respond-below(xs) { - padding-right: 0; - } + .basket-summary-address { + .left { + @include respond-below(xs) { + padding-right: 0; + } - padding-right: 25px; - } + padding-right: 25px; + } - .right { - @include respond-below(xs) { - padding-left: 0; - } + .right { + @include respond-below(xs) { + padding-left: 0; + } - padding-left: 25px; - } + padding-left: 25px; + } - .left, - .right { - .box-title { - font-size: 26px; - margin-bottom: 0; - padding-bottom: 25px; - } - } - } + .left, + .right { + .box-title { + font-size: 26px; + margin-bottom: 0; + padding-bottom: 25px; + } + } + } - .addresses { - .address { - width: calc(100% / 3 - 50px); - } - } + .addresses { + .address { + width: calc(100% / 3 - 50px); + } + } - .basket-summary-address { - > .basket-address-form { - .left { - .addresses { - .address { - margin: 5px 5px 5px 0; - width: calc(100% / 2 - 5px); - } - } - } - } - } + .basket-summary-address { + >.basket-address-form { + .left { + .addresses { + .address { + margin: 5px 5px 5px 0; + width: calc(100% / 2 - 5px); + } + } + } + } + } - #header { - #search-form-big { - .search-big-results { - .product-search { - max-width: calc(100% / 4 - 20px); + #header { + #search-form-big { + .search-big-results { + .product-search { + max-width: calc(100% / 4 - 20px); - &:nth-child(6n-5) { - margin-left: 10px; - } + &:nth-child(6n-5) { + margin-left: 10px; + } - &:nth-child(6n) { - margin-right: 10px; - } + &:nth-child(6n) { + margin-right: 10px; + } - &:nth-child(4n-3), - &:first-child { - margin-left: 0; - } + &:nth-child(4n-3), + &:first-child { + margin-left: 0; + } - &:nth-child(4n), - &:last-child { - margin-right: 0; - } - } - } - } - } + &:nth-child(4n), + &:last-child { + margin-right: 0; + } + } + } + } + } } @media (max-width: 992px) { - .box { - padding: 25px 0; + .box { + padding: 25px 0; - .box-subtitle { - margin-bottom: 15px; - } - } + .box-subtitle { + margin-bottom: 15px; + } + } - .container { - padding-left: 15px; - padding-right: 15px; - } + .container { + padding-left: 15px; + padding-right: 15px; + } - #top { - position: relative; - z-index: 20; + #top { + position: relative; + z-index: 20; - #mobile-menu-open { - position: absolute; - left: 12px; - top: 9px; - font-size: 25px; - z-index: 100; - height: 37px; - width: 37px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; + #mobile-menu-open { + position: absolute; + left: 12px; + top: 9px; + font-size: 25px; + z-index: 100; + height: 37px; + width: 37px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; - &.hidden { - display: none; - } + &.hidden { + display: none; + } - img { - width: 30px; - } - } + img { + width: 30px; + } + } - #mini-login { - text-align: right; - padding-right: 15px; - } - } + #mini-login { + text-align: right; + padding-right: 15px; + } + } - #header { - .logo { - a { - max-width: 200px; - margin: auto; - } - } + #header { + .logo { + a { + max-width: 200px; + margin: auto; + } + } - .header-right { - justify-content: space-between; - margin-top: 10px; - } - } + .header-right { + justify-content: space-between; + margin-top: 10px; + } + } - #main-menu { - #mobile-menu-close { - font-size: 25px; - z-index: 100; - height: 37px; - width: 37px; - display: flex; - align-items: center; - justify-content: center; - margin: 15px; - position: fixed; - top: 0px; - left: 2px; - z-index: 95; - cursor: pointer; + #main-menu { + #mobile-menu-close { + font-size: 25px; + z-index: 100; + height: 37px; + width: 37px; + display: flex; + align-items: center; + justify-content: center; + margin: 15px; + position: fixed; + top: 0px; + left: 2px; + z-index: 95; + cursor: pointer; - &.hidden { - display: none; - } + &.hidden { + display: none; + } - img { - width: 25px; - } - } + img { + width: 25px; + } + } - #menu-container-1 { - display: none; - position: fixed; - left: 0; - top: 0; - width: 100%; - min-height: 100%; - background: $cGray; - padding-top: 45px; - z-index: 90; - min-width: 0 !important; + #menu-container-1 { + display: none; + position: fixed; + left: 0; + top: 0; + width: 100%; + min-height: 100%; + background: $cGray; + padding-top: 45px; + z-index: 90; + min-width: 0 !important; - .mmm { - position: absolute; - overflow: hidden; - min-width: 100%; - min-height: 100%; - margin: 0; - padding: 0; + .mmm { + position: absolute; + overflow: hidden; + min-width: 100%; + min-height: 100%; + margin: 0; + padding: 0; - .levelHolderClass { - position: absolute; - overflow: hidden; - top: 0; - background: $cGray; - width: auto; - min-height: 100%; - padding-top: 15px; - } + .levelHolderClass { + position: absolute; + overflow: hidden; + top: 0; + background: $cGray; + width: auto; + min-height: 100%; + padding-top: 15px; + } - .ltr { - margin-left: -100%; - left: 0; - } + .ltr { + margin-left: -100%; + left: 0; + } - ul { - list-style: none; - padding: 0; - margin: 0; + ul { + list-style: none; + padding: 0; + margin: 0; - li { - cursor: pointer; + li { + cursor: pointer; - i.menu-toggle { - display: none; - } + i.menu-toggle { + display: none; + } - i.floatRight { - order: 1; - } + i.floatRight { + order: 1; + } - a { - font-family: $font_nunito; - font-size: 23px; - color: $cText; - @include transition; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 5px 15px; + a { + font-family: $font_nunito; + font-size: 23px; + color: $cText; + @include transition; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 5px 15px; - @include respond-below(xs) { - font-size: 20px; - padding: 0 15px; - } + @include respond-below(xs) { + font-size: 20px; + padding: 0 15px; + } - &:hover { - color: $cRed; - text-decoration: none; - } - } - } - } - } - } - } + &:hover { + color: $cRed; + text-decoration: none; + } + } + } + } + } + } + } - .popular-categories { - #scontainer-8 { - div[class^='col-lg'] { - max-width: calc(100% - 30px); - margin: 0 15px 30px; - } - } - } + .popular-categories { + #scontainer-8 { + div[class^='col-lg'] { + max-width: calc(100% - 30px); + margin: 0 15px 30px; + } + } + } - .mini-banners { - display: none; - } + .mini-banners { + display: none; + } - .last-on-blog { - .container { - padding-left: 25px; - padding-right: 25px; + .last-on-blog { + .container { + padding-left: 25px; + padding-right: 25px; - .article-list { - margin-bottom: 30px; - } - } - } + .article-list { + margin-bottom: 30px; + } + } + } - .promo-text { - img { - display: none; - } - } + .promo-text { + img { + display: none; + } + } - .footer-contact { - text-align: center; + .footer-contact { + text-align: center; - .col-lg-3 { - margin-bottom: 15px; - } - } + .col-lg-3 { + margin-bottom: 15px; + } + } - .footer { - text-align: center; + .footer { + text-align: center; - .box-title { - text-align: center; - } + .box-title { + text-align: center; + } - .col-lg-4 { - margin-bottom: 15px; - } - } + .col-lg-4 { + margin-bottom: 15px; + } + } - // .footer-bottom { - // text-align: center; + // .footer-bottom { + // text-align: center; - // #copyright { - // text-align: center; - // margin-top: 15px; - // } - // } + // #copyright { + // text-align: center; + // margin-top: 15px; + // } + // } - #product { - #product-options { - padding: 15px 0; + #product { + #product-options { + padding: 15px 0; - h1 { - font-size: 28px; - } - } - } + h1 { + font-size: 28px; + } + } + } - .pager { - .first, - .last { - display: none; - } - } + .pager { + + .first, + .last { + display: none; + } + } } // // historia zamówień // .client-orders-history { - .order-summary-content { - padding-bottom: 25px; - border-bottom: 3px solid $cGrayLight; - margin-bottom: 25px; - } + .order-summary-content { + padding-bottom: 25px; + border-bottom: 3px solid $cGrayLight; + margin-bottom: 25px; + } } // // shopAlert // .shop-alert-overlay { - position: fixed; - top: 0; - left: 0; - background: rgba(0, 0, 0, 0.25); - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - z-index: 999; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.25); + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + z-index: 999; - .shop-alert { - background: #fff; - width: 100%; - max-width: 800px; - box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), - 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); - max-height: 100%; + .shop-alert { + background: #fff; + width: 100%; + max-width: 800px; + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), + 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); + max-height: 100%; - .shop-alert-title { - padding: 20px 20px 15px; - font-size: 18px; - font-weight: 600; - border-bottom: 3px solid $cGrayLight; - display: flex; - justify-content: space-between; - align-items: center; - color: $cRed; + .shop-alert-title { + padding: 20px 20px 15px; + font-size: 18px; + font-weight: 600; + border-bottom: 3px solid $cGrayLight; + display: flex; + justify-content: space-between; + align-items: center; + color: $cRed; - @include respond-above(xs) { - font-size: 20px; - } + @include respond-above(xs) { + font-size: 20px; + } - a { - color: $cText; - @include transition; + a { + color: $cText; + @include transition; - &:hover { - color: $cTextLight; - } - } - } + &:hover { + color: $cTextLight; + } + } + } - .shop-alert-buttons { - display: flex; - justify-content: flex-end; - align-items: center; - padding: 20px; - border-top: 3px solid $cGrayLight; - gap: 15px; + .shop-alert-buttons { + display: flex; + justify-content: flex-end; + align-items: center; + padding: 20px; + border-top: 3px solid $cGrayLight; + gap: 15px; - .btn { - padding: 10px 15px; + .btn { + padding: 10px 15px; - &.btn-default { - color: $cText; - padding: 10px 0; - font-size: 14px; - } - } - } + &.btn-default { + color: $cText; + padding: 10px 0; + font-size: 14px; + } + } + } - .shop-alert-content { - padding: 30px 20px; + .shop-alert-content { + padding: 30px 20px; - h2 { - margin-bottom: 25px; - padding: 0; - font-size: 16px; - } + h2 { + margin-bottom: 25px; + padding: 0; + font-size: 16px; + } - .product-sets { - display: flex; - justify-content: flex-start; - overflow-y: auto; - padding-bottom: 25px; + .product-sets { + display: flex; + justify-content: flex-start; + overflow-y: auto; + padding-bottom: 25px; - &::-webkit-scrollbar { - height: 5px; - } + &::-webkit-scrollbar { + height: 5px; + } - /* Track */ - &::-webkit-scrollbar-track { - background: $cGrayLight; - } + /* Track */ + &::-webkit-scrollbar-track { + background: $cGrayLight; + } - /* Handle */ - &::-webkit-scrollbar-thumb { - background: $cText; - } + /* Handle */ + &::-webkit-scrollbar-thumb { + background: $cText; + } - /* Handle on hover */ - &::-webkit-scrollbar-thumb:hover { - background: $cText; - } + /* Handle on hover */ + &::-webkit-scrollbar-thumb:hover { + background: $cText; + } - .product { - max-width: calc(100% / 2 - 20px); - min-width: calc(100% / 2 - 20px); - margin: 0 10px 0; - position: relative; + .product { + max-width: calc(100% / 2 - 20px); + min-width: calc(100% / 2 - 20px); + margin: 0 10px 0; + position: relative; - .new { - border: 2px solid $cPinkDark; - padding: 3px 5px; - font-weight: 600; - display: inline-block; - position: absolute; - top: 10px; - left: -10px; - z-index: 10; - background: #fff; - } + .new { + border: 2px solid $cPinkDark; + padding: 3px 5px; + font-weight: 600; + display: inline-block; + position: absolute; + top: 10px; + left: -10px; + z-index: 10; + background: #fff; + } - @include respond-above(sm) { - max-width: calc(100% / 4 - 20px); - min-width: calc(100% / 4 - 20px); - } + @include respond-above(sm) { + max-width: calc(100% / 4 - 20px); + min-width: calc(100% / 4 - 20px); + } - @include respond-above(lg) { - max-width: calc(100% / 5 - 20px); - min-width: calc(100% / 5 - 20px); - } + @include respond-above(lg) { + max-width: calc(100% / 5 - 20px); + min-width: calc(100% / 5 - 20px); + } - .a-img { - padding-top: 125%; - display: block; - position: relative; - background: $cGray; + .a-img { + padding-top: 125%; + display: block; + position: relative; + background: $cGray; - &:hover { - .img { - img { - &.first { - opacity: 0; - } + &:hover { + .img { + img { + &.first { + opacity: 0; + } - &.second { - transform: scale(1.2); - opacity: 1; - } - } - } - } + &.second { + transform: scale(1.2); + opacity: 1; + } + } + } + } - .img { - height: 100%; - width: 100%; - display: block; - position: absolute; - overflow: hidden; - top: 0; - left: 0; + .img { + height: 100%; + width: 100%; + display: block; + position: absolute; + overflow: hidden; + top: 0; + left: 0; - img { - height: 100%; - width: 100%; - object-fit: cover; - object-position: top center; - position: absolute; - top: 0; - left: 0; + img { + height: 100%; + width: 100%; + object-fit: cover; + object-position: top center; + position: absolute; + top: 0; + left: 0; - &.first { - transition: all 1s ease; - } + &.first { + transition: all 1s ease; + } - &.second { - transition: all 1s ease; - opacity: 0; - } - } - } - } + &.second { + transition: all 1s ease; + opacity: 0; + } + } + } + } - .product-details { - .prices { - font-family: $font_nunito; - white-space: nowrap; - display: flex; - justify-content: center; + .product-details { + .prices { + font-family: $font_nunito; + white-space: nowrap; + display: flex; + justify-content: center; - .price { - font-size: 24px; - font-weight: 600; - color: $cRed; - } + .price { + font-size: 24px; + font-weight: 600; + color: $cRed; + } - .price-old { - font-size: 24px; - font-weight: 300; - color: #b9b9b9; - position: relative; - margin-right: 15px; + .price-old { + font-size: 24px; + font-weight: 300; + color: #b9b9b9; + position: relative; + margin-right: 15px; - &::before { - width: 100%; - position: absolute; - content: ''; - right: 0; - top: 42%; - height: 0; - border-bottom: 2px solid #b9b9b9; - } - } - } + &::before { + width: 100%; + position: absolute; + content: ''; + right: 0; + top: 42%; + height: 0; + border-bottom: 2px solid #b9b9b9; + } + } + } - h2 { - font-size: 16px; - font-family: $font_nunito; + h2 { + font-size: 16px; + font-family: $font_nunito; - a { - color: $cText; - display: block; - font-weight: 300; - margin: 10px 0 5px; - position: relative; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + a { + color: $cText; + display: block; + font-weight: 300; + margin: 10px 0 5px; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; - &:hover { - text-decoration: none; + &:hover { + text-decoration: none; - &::after { - width: 100%; - } - } + &::after { + width: 100%; + } + } - &::after { - content: ''; - display: block; - height: 1px; - background: $cText; - position: absolute; - bottom: 0; - left: 0; - width: 0; - @include transition; - } - } - } - } - } - } - } - } + &::after { + content: ''; + display: block; + height: 1px; + background: $cText; + position: absolute; + bottom: 0; + left: 0; + width: 0; + @include transition; + } + } + } + } + } + } + } + } } #payment-confirmation { - max-width: 1280px; + max-width: 1280px; - .btn { - max-width: 300px; - float: right; - } + .btn { + max-width: 300px; + float: right; + } } #paypo-promo { - padding: 25px 0; - font-weight: 600; + padding: 25px 0; + font-weight: 600; - img { - height: 30px; - } + img { + height: 30px; + } } #popup-bg { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.75); - z-index: 100; - display: flex; - align-items: center; - justify-content: center; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.75); + z-index: 100; + display: flex; + align-items: center; + justify-content: center; - #popup-content { - height: 90vh; - width: 90vw; - display: flex; - align-items: center; - justify-content: center; + #popup-content { + height: 90vh; + width: 90vw; + display: flex; + align-items: center; + justify-content: center; - img { - height: 100%; - width: 100%; - object-fit: contain; - } - } + img { + height: 100%; + width: 100%; + object-fit: contain; + } + } } #main-banner { - margin-top: 25px; + margin-top: 25px; - img { - width: 100%; - } + img { + width: 100%; + } - @include respond-above(sm) { - .mobile { - display: none; - } - } + @include respond-above(sm) { + .mobile { + display: none; + } + } - @include respond-below(sm) { - .nomobile { - display: none; - } - } + @include respond-below(sm) { + .nomobile { + display: none; + } + } } .producer-list { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; - .producer { - width: calc(100% / 5 - 15px); - margin: 15px 15px 15px 0; + .producer { + width: calc(100% / 5 - 15px); + margin: 15px 15px 15px 0; - @include respond-between(md, lg) { - width: calc(100% / 4 - 15px); - } + @include respond-between(md, lg) { + width: calc(100% / 4 - 15px); + } - @include respond-between(sm, md) { - width: calc(100% / 3 - 15px); - } + @include respond-between(sm, md) { + width: calc(100% / 3 - 15px); + } - @include respond-below(sm) { - width: calc(100% / 3 - 15px); - } + @include respond-below(sm) { + width: calc(100% / 3 - 15px); + } - @include respond-below(xs) { - width: calc(100% / 2 - 15px); - } + @include respond-below(xs) { + width: calc(100% / 2 - 15px); + } - a { - display: block; - width: 100%; + a { + display: block; + width: 100%; - img { - width: 100%; - } - } - } + img { + width: 100%; + } + } + } } .zaufane { - .box-title { - text-align: center; - } + .box-title { + text-align: center; + } - .wrapper-left { - padding: 15px; - background: #fff; - } + .wrapper-left { + padding: 15px; + background: #fff; + } - .client-review { - display: flex !important; - flex-wrap: wrap; - align-items: center; - flex-direction: column; - justify-content: center; - background: #f6f6f6; - padding: 25px !important; - margin: 15px !important; + .client-review { + display: flex !important; + flex-wrap: wrap; + align-items: center; + flex-direction: column; + justify-content: center; + background: #f6f6f6; + padding: 25px !important; + margin: 15px !important; - div, - p { - width: 100%; - } - } + div, + p { + width: 100%; + } + } } //style-mu //main-slider .main-slider { - width: 100%; + width: 100%; } //popular-categories .popular-categories { - display: none; + display: none; - .category-container { - display: flex; - flex-wrap: wrap; + .category-container { + display: flex; + flex-wrap: wrap; - .category { - height: 400px; - position: relative; - padding: 15px; - border-radius: 10px; + .category { + height: 400px; + position: relative; + padding: 15px; + border-radius: 10px; - .link-img { - width: 100%; - height: 100%; - border-radius: 10px; - overflow: hidden; - display: block; + .link-img { + width: 100%; + height: 100%; + border-radius: 10px; + overflow: hidden; + display: block; - .category-img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 10px; - transition: 4s; - } + .category-img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + transition: 4s; + } - &:hover { - .category-img { - transform: scale(1.2); - } - } - } + &:hover { + .category-img { + transform: scale(1.2); + } + } + } - .category-description { - position: absolute; - top: 0; - left: 0; - padding: 60px 0 0 60px; + .category-description { + position: absolute; + top: 0; + left: 0; + padding: 60px 0 0 60px; - .link-title { - font-size: 20px; - text-decoration: none; - color: $cText; - margin-bottom: 20px; - transition: 0.3s; - font-weight: 700; + .link-title { + font-size: 20px; + text-decoration: none; + color: $cText; + margin-bottom: 20px; + transition: 0.3s; + font-weight: 700; - @include respond-above(md) { - font-size: 30px; - } + @include respond-above(md) { + font-size: 30px; + } - &:hover { - color: lighten($color: $cRed, $amount: 15%); - } + &:hover { + color: lighten($color: $cRed, $amount: 15%); + } - .title { - font-weight: 700; - } - } + .title { + font-weight: 700; + } + } - .description { - margin-bottom: 20px; - font-size: 16px; - color: $cTextLight; - display: none; + .description { + margin-bottom: 20px; + font-size: 16px; + color: $cTextLight; + display: none; - @include respond-above(md) { - display: block; - } - } - } + @include respond-above(md) { + display: block; + } + } + } - .category-btn { - padding: 12px 35px; - border-radius: 10px; - background-color: $cGray; - color: $cText; - border: none; - font-weight: 500; - cursor: pointer; - transition: 0.3s; - margin-top: 40px; - font-size: 16px; - display: block; - text-decoration: none; - width: 142px; + .category-btn { + padding: 12px 35px; + border-radius: 10px; + background-color: $cGray; + color: $cText; + border: none; + font-weight: 500; + cursor: pointer; + transition: 0.3s; + margin-top: 40px; + font-size: 16px; + display: block; + text-decoration: none; + width: 142px; - &:hover { - background-color: $cRed; - color: $cGray; - } - } - } + &:hover { + background-color: $cRed; + color: $cGray; + } + } + } - .category:nth-child(1), - .category:nth-last-child(1) { - width: 100%; + .category:nth-child(1), + .category:nth-last-child(1) { + width: 100%; - @include respond-above(sm) { - width: 60%; - } + @include respond-above(sm) { + width: 60%; + } - .category-description { - width: 85%; - } - } + .category-description { + width: 85%; + } + } - .category:nth-child(2), - .category:nth-last-child(2) { - width: 100%; + .category:nth-child(2), + .category:nth-last-child(2) { + width: 100%; - @include respond-above(sm) { - width: 40%; - } + @include respond-above(sm) { + width: 40%; + } - .category-description { - width: 70%; - } - } - } + .category-description { + width: 70%; + } + } + } } .row { - .product-mini { - .new { - @extend .new; - position: absolute; - } - } + .product-mini { + .new { + @extend .new; + position: absolute; + } + } } .promoted-products, .popular-categories, .sale-categories, .last-on-blog { - .container { - .box-title { - font-size: 26px; + .container { + .box-title { + font-size: 26px; - @include respond-above(md) { - font-size: 40px; - } + @include respond-above(md) { + font-size: 40px; + } - font-weight: 700; - text-align: center; - } + font-weight: 700; + text-align: center; + } - .box-description { - font-size: 14px; - display: none; + .box-description { + font-size: 14px; + display: none; - @include respond-above(md) { - font-size: 16px; - } + @include respond-above(md) { + font-size: 16px; + } - text-align: center; - line-height: 25px; - margin: 15px auto 0; - max-width: 850px; - margin-bottom: 30px; - } + text-align: center; + line-height: 25px; + margin: 15px auto 0; + max-width: 850px; + margin-bottom: 30px; + } - .content { - } - } + .content {} + } } //product detail name .product-mini { - .product-details { - .name { - font-size: 14px; + .product-details { + .name { + font-size: 14px; - @include respond-above(md) { - font-size: 16px; - } - } + @include respond-above(md) { + font-size: 16px; + } + } - .prices { - .price { - font-size: 18px; + .prices { + .price { + font-size: 18px; - @include respond-above(md) { - font-size: 20px; - } + @include respond-above(md) { + font-size: 20px; + } - color: $cText; - font-weight: 700; + color: $cText; + font-weight: 700; - span { - color: $cText; - font-size: 20px; - font-weight: 700; - } - } - } - } + span { + color: $cText; + font-size: 20px; + font-weight: 700; + } + } + } + } } //main-image .main-image { - position: relative; - border-radius: 10px; + position: relative; + border-radius: 10px; - @include respond-below(sm) { - height: 300px; - } + @include respond-below(sm) { + height: 300px; + } - @include respond-below(xs) { - height: 250px; - } + @include respond-below(xs) { + height: 250px; + } - .img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 10px; - } + .img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + } - .card-container { - display: flex; - flex-direction: column; - width: 160px; - position: absolute; - align-items: center; - z-index: 11; + .card-container { + display: flex; + flex-direction: column; + width: 160px; + position: absolute; + align-items: center; + z-index: 11; - .main-image-btn { - // position: absolute; - border: none; - color: white; - background-color: $cRed; - border-radius: 50%; - width: 30px; - height: 30px; - text-align: center; - line-height: 20px; - cursor: pointer; - animation: border_animation 1.5s infinite; - margin-left: -25px; - margin-bottom: 5px; - } + .main-image-btn { + // position: absolute; + border: none; + color: white; + background-color: $cRed; + border-radius: 50%; + width: 30px; + height: 30px; + text-align: center; + line-height: 20px; + cursor: pointer; + animation: border_animation 1.5s infinite; + margin-left: -25px; + margin-bottom: 5px; + } - .main-image-btn:active { - border: none; - outline: none; - } + .main-image-btn:active { + border: none; + outline: none; + } - .main-image__card { - // position: absolute; - width: 160px; - height: 200px; - display: none; + .main-image__card { + // position: absolute; + width: 160px; + height: 200px; + display: none; - .row { - width: 100%; - height: 100%; + .row { + width: 100%; + height: 100%; - .product-mini { - max-width: 100%; - width: 100%; - height: 100%; - margin: 0; - padding: 10px; + .product-mini { + max-width: 100%; + width: 100%; + height: 100%; + margin: 0; + padding: 10px; - a { - .img { - padding-top: 80%; + a { + .img { + padding-top: 80%; - img { - object-fit: contain; - } - } - } + img { + object-fit: contain; + } + } + } - .product-details { - padding: 0; + .product-details { + padding: 0; - .name { - font-size: 13px; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - text-align: center; - width: 100%; - margin-bottom: 0; - } + .name { + font-size: 13px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + text-align: center; + width: 100%; + margin-bottom: 0; + } - .prices { - .price-old { - display: none; - } + .prices { + .price-old { + display: none; + } - .price { - font-size: 13px; + .price { + font-size: 13px; - span { - font-size: 13px; - } - } - } - } - } - } + span { + font-size: 13px; + } + } + } + } + } + } - &--active { - display: block; - } - } - } + &--active { + display: block; + } + } + } - .card-container-1 { - top: 38%; - left: 7%; + .card-container-1 { + top: 38%; + left: 7%; - @include respond-below(sm) { - left: 5%; - } + @include respond-below(sm) { + left: 5%; + } - @include respond-below(xxs) { - top: 20%; - } - } + @include respond-below(xxs) { + top: 20%; + } + } - .card-container-2 { - top: 40%; - left: 52%; + .card-container-2 { + top: 40%; + left: 52%; - @include respond-below(sm) { - top: 14%; - left: 42%; - } + @include respond-below(sm) { + top: 14%; + left: 42%; + } - @include respond-below(xxs) { - left: 51%; - } - } + @include respond-below(xxs) { + left: 51%; + } + } - .card-container-3 { - top: 23%; - right: 2%; + .card-container-3 { + top: 23%; + right: 2%; - @include respond-below(sm) { - top: 17%; - right: -5px; - } + @include respond-below(sm) { + top: 17%; + right: -5px; + } - @media (max-width: 440px) { - display: none; - } - } + @media (max-width: 440px) { + display: none; + } + } } @keyframes border_animation { - 0% { - box-shadow: 0 0 0 0 $cRed; - } + 0% { + box-shadow: 0 0 0 0 $cRed; + } - 50% { - box-shadow: 0 0 15px 0 $cRed; - } + 50% { + box-shadow: 0 0 15px 0 $cRed; + } - 100% { - box-shadow: 0 0 0 0 $cRed; - } + 100% { + box-shadow: 0 0 0 0 $cRed; + } } //splide-2 #splide-2 { - max-height: 500px; + max-height: 500px; - @include respond-below(sm) { - max-height: 1200px; - } + @include respond-below(sm) { + max-height: 1200px; + } - .splide__track { - max-height: 500px; - width: 100%; + .splide__track { + max-height: 500px; + width: 100%; - @include respond-below(sm) { - max-height: 1200px; - } + @include respond-below(sm) { + max-height: 1200px; + } - .splide__list { - max-height: 500px; - width: 100%; + .splide__list { + max-height: 500px; + width: 100%; - @include respond-below(sm) { - max-height: 1200px; - } + @include respond-below(sm) { + max-height: 1200px; + } - .splide__slide { - max-height: 500px; - width: 100%; + .splide__slide { + max-height: 500px; + width: 100%; - @include respond-below(sm) { - max-height: 1200px; - } + @include respond-below(sm) { + max-height: 1200px; + } - .article-list { - max-height: 500px; - width: 100%; + .article-list { + max-height: 500px; + width: 100%; - @include respond-below(sm) { - max-height: 1200px; - } + @include respond-below(sm) { + max-height: 1200px; + } - a { - display: flex; - flex-direction: row-reverse; - width: 100%; - height: 100%; - justify-content: start; - gap: 30px; - align-items: center; + a { + display: flex; + flex-direction: row-reverse; + width: 100%; + height: 100%; + justify-content: start; + gap: 30px; + align-items: center; - @include respond-below(sm) { - flex-direction: column; - } + @include respond-below(sm) { + flex-direction: column; + } - .blog-image { - width: 50%; - padding-top: 28%; - margin-bottom: 0; + .blog-image { + width: 50%; + padding-top: 28%; + margin-bottom: 0; - @include respond-below(sm) { - width: 100%; - padding-top: 50%; - } + @include respond-below(sm) { + width: 100%; + padding-top: 50%; + } - @include respond-below(xs) { - padding-top: 70%; - } + @include respond-below(xs) { + padding-top: 70%; + } - @include respond-below(xxs) { - padding-top: 120%; - } + @include respond-below(xxs) { + padding-top: 120%; + } - img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 10px; - } - } + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + } + } - .article-list-text-container { - width: 50%; + .article-list-text-container { + width: 50%; - @include respond-below(sm) { - width: 100%; - } + @include respond-below(sm) { + width: 100%; + } - .slider-btn { - width: 170px; - padding: 12px 35px; - border-radius: 10px; - background-color: $cRed; - color: white; - border: none; - cursor: pointer; - transition: 0.3s; - margin-top: 30px; - font-size: 16px; + .slider-btn { + width: 170px; + padding: 12px 35px; + border-radius: 10px; + background-color: $cRed; + color: white; + border: none; + cursor: pointer; + transition: 0.3s; + margin-top: 30px; + font-size: 16px; - @include respond-below(sm) { - font-size: 14px; - border-radius: 20px; - } + @include respond-below(sm) { + font-size: 14px; + border-radius: 20px; + } - &:hover { - background-color: $cText; - } - } + &:hover { + background-color: $cText; + } + } - .article-title { - font-size: 18px; - margin: 0; - padding-bottom: 15px; - font-weight: 700; + .article-title { + font-size: 18px; + margin: 0; + padding-bottom: 15px; + font-weight: 700; - @include respond-above(md) { - font-size: 26px; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - } - } + @include respond-above(md) { + font-size: 26px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + } + } - .article-entry { - font-size: 14px; - color: $cTextLight; - margin: 0; - padding-bottom: 15px; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 5; - overflow: hidden; + .article-entry { + font-size: 14px; + color: $cTextLight; + margin: 0; + padding-bottom: 15px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; + overflow: hidden; - @include respond-above(md) { - font-size: 16px; - } - } + @include respond-above(md) { + font-size: 16px; + } + } - .date-add { - display: flex; - flex-direction: row-reverse; - gap: 5px; - align-items: center; - font-weight: 600; - font-size: 14px; - color: $cText; + .date-add { + display: flex; + flex-direction: row-reverse; + gap: 5px; + align-items: center; + font-weight: 600; + font-size: 14px; + color: $cText; - @include respond-above(md) { - font-size: 16px; - } - } - } - } - } - } - } - } + @include respond-above(md) { + font-size: 16px; + } + } + } + } + } + } + } + } - .splide__arrow { - border: none; - background-color: white; - width: 42px; - height: 42px; - border-radius: 10px; - box-shadow: 0 0 5px rgba(#0003, 0.5); - transition: 0.3s; + .splide__arrow { + border: none; + background-color: white; + width: 42px; + height: 42px; + border-radius: 10px; + box-shadow: 0 0 5px rgba(#0003, 0.5); + transition: 0.3s; - svg { - transition: 0.3s; - } + svg { + transition: 0.3s; + } - &:hover { - background-color: $cRed; + &:hover { + background-color: $cRed; - svg { - fill: white; - } - } - } + svg { + fill: white; + } + } + } - .splide__arrows--rtl { - .splide__arrow--prev { - top: 100%; - right: 35%; + .splide__arrows--rtl { + .splide__arrow--prev { + top: 100%; + right: 35%; - @include respond-above(xxs) { - right: 38%; - } + @include respond-above(xxs) { + right: 38%; + } - @include respond-above(xs) { - right: 42%; - } + @include respond-above(xs) { + right: 42%; + } - @include respond-above(sm) { - right: 44%; - transform: translateY(30px); - } + @include respond-above(sm) { + right: 44%; + transform: translateY(30px); + } - @include respond-above(md) { - right: 45%; - } + @include respond-above(md) { + right: 45%; + } - @include respond-above(lg) { - transform: translateY(0); - top: -80px; - right: 0; - } + @include respond-above(lg) { + transform: translateY(0); + top: -80px; + right: 0; + } - @include respond-above(xl) { - top: -80px; - right: 10px; - } - } + @include respond-above(xl) { + top: -80px; + right: 10px; + } + } - .splide__arrow--next { - top: 100%; - left: 35%; + .splide__arrow--next { + top: 100%; + left: 35%; - @include respond-above(xxs) { - left: 38%; - } + @include respond-above(xxs) { + left: 38%; + } - @include respond-above(xs) { - left: 42%; - } + @include respond-above(xs) { + left: 42%; + } - @include respond-above(sm) { - transform: translateY(30px); - left: 44%; - } + @include respond-above(sm) { + transform: translateY(30px); + left: 44%; + } - @include respond-above(md) { - left: 45%; - } + @include respond-above(md) { + left: 45%; + } - @include respond-above(lg) { - transform: translateY(0); - top: -80px; - right: 54px; - } + @include respond-above(lg) { + transform: translateY(0); + top: -80px; + right: 54px; + } - @include respond-above(xl) { - top: -80px; - right: 64px; - } - } - } + @include respond-above(xl) { + top: -80px; + right: 64px; + } + } + } } .sale-categories { - display: none; + display: none; - .row { - gap: 10px; - padding: 0 15px; + .row { + gap: 10px; + padding: 0 15px; - .col-12 { - padding-left: 0; - padding-right: 0; - } - } + .col-12 { + padding-left: 0; + padding-right: 0; + } + } } .popular-categories { - .row { - .col-12 { - padding-left: 0; - padding-right: 0; - } - } + .row { + .col-12 { + padding-left: 0; + padding-right: 0; + } + } } //newsletter #newsletter { - display: flex; - justify-content: space-between; - background-color: #f5f5f5; - border-radius: 10px; - width: 100%; - margin: -125px auto 0; - padding: 40px; - height: auto; - transform: translateY(50%); - align-items: center; - gap: 10px; + display: flex; + justify-content: space-between; + background-color: #f5f5f5; + border-radius: 10px; + width: 100%; + margin: -125px auto 0; + padding: 40px; + height: auto; + transform: translateY(50%); + align-items: center; + gap: 10px; - @include respond-below(sm) { - flex-direction: column; - padding: 25px; - } + @include respond-below(sm) { + flex-direction: column; + padding: 25px; + } - .title { - margin-bottom: 0 !important; - line-height: 2; - text-align: center; - padding-right: 40px; - font-size: 20px; - font-weight: 700; - } + .title { + margin-bottom: 0 !important; + line-height: 2; + text-align: center; + padding-right: 40px; + font-size: 20px; + font-weight: 700; + } - #text { - width: 30%; - padding-left: 40px; - border-left: 1px solid $cTextLight; - font-size: 16px; - color: $cText; - font-weight: 700; - } + #text { + width: 30%; + padding-left: 40px; + border-left: 1px solid $cTextLight; + font-size: 16px; + color: $cText; + font-weight: 700; + } - form#newsletter-form { - width: 50%; + form#newsletter-form { + width: 50%; - @include respond-below(md) { - width: 100%; - } + @include respond-below(md) { + width: 100%; + } - .form-group.input { - &::after { - display: none; - } - } + .form-group.input { + &::after { + display: none; + } + } - @include respond-below(sm) { - width: 100%; - } + @include respond-below(sm) { + width: 100%; + } - .form-group { - margin-bottom: 0; - } + .form-group { + margin-bottom: 0; + } - #email { - padding: 25px 10px; - border-bottom: none; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - border: 2px solid lightgray; - } + #email { + padding: 25px 10px; + border-bottom: none; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + border: 2px solid lightgray; + } - #email:focus { - border: 2px solid #000; - box-shadow: none; - } + #email:focus { + border: 2px solid #000; + box-shadow: none; + } - .btn { - border-bottom-right-radius: 10px; - border-top-right-radius: 10px; - padding: 0 25px; - background-color: $cRed; - transition: 0.3s; + .btn { + border-bottom-right-radius: 10px; + border-top-right-radius: 10px; + padding: 0 25px; + background-color: $cRed; + transition: 0.3s; - &:hover { - background-color: $cText; - } - } - } + &:hover { + background-color: $cText; + } + } + } - .agreement { - // display: none; - margin-top: 5px; - margin-left: 5px; - } + .agreement { + // display: none; + margin-top: 5px; + margin-left: 5px; + } } //footer .footer { - background-color: $cRed; - color: white; - padding-top: 140px; - padding-bottom: 50px; + background-color: $cRed; + color: white; + padding-top: 140px; + padding-bottom: 50px; - .row { - justify-content: space-between; - } + .row { + justify-content: space-between; + } - nav { - ul { - li { - a { - color: white; - width: auto; - display: inline; + nav { + ul { + li { + a { + color: white; + width: auto; + display: inline; - &:hover { - color: $cText; - } - } - } - } - } + &:hover { + color: $cText; + } + } + } + } + } - .contact-list { - .contact-item { - p { - i { - font-size: 20px; - margin-right: 10px; - } + .contact-list { + .contact-item { + p { + i { + font-size: 20px; + margin-right: 10px; + } - a { - color: white; - width: auto; - display: inline; + a { + color: white; + width: auto; + display: inline; - &:hover { - color: $cText; - } - } - } - } - } + &:hover { + color: $cText; + } + } + } + } + } - .footer-socials { - display: flex; - flex-direction: row; - gap: 10px; + .footer-socials { + display: flex; + flex-direction: row; + gap: 10px; - .social-item { - width: 40px; - height: 40px; - background-color: white; - border-radius: 10px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - transition: 0.3s; + .social-item { + width: 40px; + height: 40px; + background-color: white; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: 0.3s; - p { - font-size: 18px; - margin-bottom: 0; - font-weight: 700; + p { + font-size: 18px; + margin-bottom: 0; + font-weight: 700; - i { - color: $cText; - transition: 0.3s; - } - } + i { + color: $cText; + transition: 0.3s; + } + } - &:hover { - background-color: $cText; - color: white; + &:hover { + background-color: $cText; + color: white; - i { - color: white; - } - } - } - } + i { + color: white; + } + } + } + } - .box-title { - font-size: 20px; - } + .box-title { + font-size: 20px; + } - li { - padding: 5px 0; - font-size: 16px; + li { + padding: 5px 0; + font-size: 16px; - @include respond-below(sm) { - padding: 3px 0; - } + @include respond-below(sm) { + padding: 3px 0; + } - a { - font-size: 16px; + a { + font-size: 16px; - @include respond-below(sm) { - font-size: 14px; - } - } - } + @include respond-below(sm) { + font-size: 14px; + } + } + } - .footer-left { - display: none; + .footer-left { + display: none; - p { - font-size: 16px; - line-height: 2; - } - } + p { + font-size: 16px; + line-height: 2; + } + } } //footer-bottom .footer-bottom { - #copyright { - font-size: 16px; - text-align: start; - } + #copyright { + font-size: 16px; + text-align: start; + } - .payment-methods { - text-align: end; - } + .payment-methods { + text-align: end; + } - @include respond-below(md) { - #copyright { - text-align: center; - } + @include respond-below(md) { + #copyright { + text-align: center; + } - .payment-methods { - text-align: center; - margin-top: 10px; - } - } + .payment-methods { + text-align: center; + margin-top: 10px; + } + } } //blog view #blog-view { - .site-title { - text-align: center; - font-size: 40px; - margin: 30px 0; + .site-title { + text-align: center; + font-size: 40px; + margin: 30px 0; - @include respond-below(md) { - font-size: 30px; - } - } + @include respond-below(md) { + font-size: 30px; + } + } - //article-entry - .article-entry { - margin-bottom: 30px; + //article-entry + .article-entry { + margin-bottom: 30px; - .blog-image { - overflow: hidden; + .blog-image { + overflow: hidden; - a { - display: block; - height: 100%; - width: 100%; - max-height: 510px; - border-radius: 10px; - overflow: hidden; + a { + display: block; + height: 100%; + width: 100%; + max-height: 510px; + border-radius: 10px; + overflow: hidden; - @media (max-width: 1629px) { - max-height: 430px; - } + @media (max-width: 1629px) { + max-height: 430px; + } - @media (max-width: 1399px) { - max-height: 360px; - } + @media (max-width: 1399px) { + max-height: 360px; + } - @media (max-width: 1199px) { - max-height: 300px; - } + @media (max-width: 1199px) { + max-height: 300px; + } - @media (max-width: 992px) { - max-height: 230px; - } + @media (max-width: 992px) { + max-height: 230px; + } - @media (max-width: 767px) { - max-height: 170px; - } + @media (max-width: 767px) { + max-height: 170px; + } - img { - object-fit: cover; - height: 100%; - width: 100%; - } - } - } + img { + object-fit: cover; + height: 100%; + width: 100%; + } + } + } - .article-title { - text-align: center; - margin-top: 10px; - margin-bottom: 15px; + .article-title { + text-align: center; + margin-top: 10px; + margin-bottom: 15px; - a { - font-size: 20px; + a { + font-size: 20px; - @include respond-below(md) { - font-size: 18px; - } - } - } + @include respond-below(md) { + font-size: 18px; + } + } + } - .entry { - text-align: center; - margin-bottom: 15px; - } + .entry { + text-align: center; + margin-bottom: 15px; + } - .article-entry__bottom { - text-align: center; - } + .article-entry__bottom { + text-align: center; + } - .date-add { - display: flex; - justify-content: center; - align-items: center; - gap: 5px; - font-size: 14px; - } - } + .date-add { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + font-size: 14px; + } + } - //article__content - .article__content { - .social-icons { - display: none; - } + //article__content + .article__content { + .social-icons { + display: none; + } - .article-title { - font-size: 20px; - margin-bottom: 15px; + .article-title { + font-size: 20px; + margin-bottom: 15px; - @include respond-above(xs) { - font-size: 22px; - } - } + @include respond-above(xs) { + font-size: 22px; + } + } - .date-add { - display: flex; - justify-content: center; - align-items: center; - gap: 5px; - text-align: center; - color: $cTextLight; - font-size: 14px; + .date-add { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + text-align: center; + color: $cTextLight; + font-size: 14px; - i { - color: $cTextLight; - } - } + i { + color: $cTextLight; + } + } - .text { - color: $cTextLight; + .text { + color: $cTextLight; - .v-center { - display: flex; - align-items: center; - } + .v-center { + display: flex; + align-items: center; + } - .h-center { - display: flex; - justify-content: center; - } + .h-center { + display: flex; + justify-content: center; + } - p { - img { - border-radius: 10px; - min-height: 350px; - object-fit: cover; - } - } + p { + img { + border-radius: 10px; + min-height: 350px; + object-fit: cover; + } + } - h2 { - color: $cRed !important; - font-size: 1.25rem; - font-weight: 600; - } + h2 { + color: $cRed !important; + font-size: 1.25rem; + font-weight: 600; + } - h3 { - color: $cRed !important; - font-size: 1.1rem; - font-weight: 500; - } + h3 { + color: $cRed !important; + font-size: 1.1rem; + font-weight: 500; + } - section { - h2 { - font-size: 18px !important; + section { + h2 { + font-size: 18px !important; - @include respond-above(md) { - font-size: 20px !important; - } - } - } - } + @include respond-above(md) { + font-size: 20px !important; + } + } + } + } - .col-3 { - max-width: 50%; - flex: 0 0 50%; + .col-3 { + max-width: 50%; + flex: 0 0 50%; - @include respond-above(xs) { - max-width: 25%; - flex: 0 0 25%; - } - } + @include respond-above(xs) { + max-width: 25%; + flex: 0 0 25%; + } + } - .product-mini { - max-width: 100%; - } + .product-mini { + max-width: 100%; + } - .btn-back { - border: none; - background: transparent; - width: auto; - height: auto; - color: $cText; - display: flex; - align-items: center; - gap: 10px; - margin: 25px auto; - transition: 0.3s; + .btn-back { + border: none; + background: transparent; + width: auto; + height: auto; + color: $cText; + display: flex; + align-items: center; + gap: 10px; + margin: 25px auto; + transition: 0.3s; - img { - transform: rotate(180deg); - } + img { + transform: rotate(180deg); + } - &:hover { - color: $cRed; + &:hover { + color: $cRed; - img { - fill: $cRed; - } - } - } - } + img { + fill: $cRed; + } + } + } + } } //pager .pager { - gap: 10px; + gap: 10px; - li.first, - li.last { - display: none; - } + li.first, + li.last { + display: none; + } - li { - background-color: $cGray; - color: $cText; - border-radius: 10px; - font-family: 'Nunito', sans-serif; - transition: 0.3s; + li { + background-color: $cGray; + color: $cText; + border-radius: 10px; + font-family: 'Nunito', sans-serif; + transition: 0.3s; - &:hover { - background-color: $cRed; + &:hover { + background-color: $cRed; - a { - color: white; - } - } + a { + color: white; + } + } - span { - padding: 10px; - display: block; - font-size: 16px; - } + span { + padding: 10px; + display: block; + font-size: 16px; + } - a { - font-size: 16px; - color: $cText; - transition: 0.3s; - font-family: 'Nunito', sans-serif; - transition: 0.3s; - } - } + a { + font-size: 16px; + color: $cText; + transition: 0.3s; + font-family: 'Nunito', sans-serif; + transition: 0.3s; + } + } - li:nth-child(3) { - &:hover { - background-color: $cGray; - } - } + li:nth-child(3) { + &:hover { + background-color: $cGray; + } + } } //category view #category-view { - .left-column { - @media (max-width: 767px) { - display: none; - } - } + .left-column { + @media (max-width: 767px) { + display: none; + } + } - .site-title { - font-size: 40px; - text-align: center; - vertical-align: middle; - margin-bottom: 30px; + .site-title { + font-size: 40px; + text-align: center; + vertical-align: middle; + margin-bottom: 30px; - @include respond-below(md) { - font-size: 30px; - } - } + @include respond-below(md) { + font-size: 30px; + } + } - .shop-categories { - li { - a { - text-transform: uppercase; - font-weight: 600; - font-size: 18px; - } + .shop-categories { + li { + a { + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + } - ul { - li { - a, - .menu-trigger { - text-transform: none; - font-weight: 400; - font-size: 16px; - } - } - } - } - } + ul { + li { - .container { - #category-description { - #visible { - h2 { - font-size: 17px; - font-weight: 600; - } + a, + .menu-trigger { + text-transform: none; + font-weight: 400; + font-size: 16px; + } + } + } + } + } - h3 { - font-size: 15px; - font-weight: 600; - } + .container { + #category-description { + #visible { + h2 { + font-size: 17px; + font-weight: 600; + } - p { - font-size: 14px; - } - } - } - } + h3 { + font-size: 15px; + font-weight: 600; + } + + p { + font-size: 14px; + } + } + } + } } .main { - .product-options { - .prices { - .price { - .small { - font-size: 30px; - font-weight: 600; - } - } - } + .product-options { + .prices { + .price { + .small { + font-size: 30px; + font-weight: 600; + } + } + } - .add-to-basket { - .btn { - border-radius: 10px; - } - } - } + .add-to-basket { + .btn { + border-radius: 10px; + } + } + } - .products-sets, - .products-related { - .owl-item { - padding: 0 10px; + .products-sets, + .products-related { + .owl-item { + padding: 0 10px; - .product-mini { - max-width: 100%; - margin: 0; - } - } + .product-mini { + max-width: 100%; + margin: 0; + } + } - .box-title { - font-size: 32px; - margin-bottom: 30px; - } - } + .box-title { + font-size: 32px; + margin-bottom: 30px; + } + } - #product { - .history-back { - display: none; - } + #product { + .history-back { + display: none; + } - .product-options#product-options { - h1 { - font-size: 28px; - } + .product-options#product-options { + h1 { + font-size: 28px; + } - .short-description { - strong { - color: $cText; - } + .short-description { + strong { + color: $cText; + } - color: $cTextLight; - } - } + color: $cTextLight; + } + } - #description { - .tabs#tabs-menu { - .tab-link { - font-weight: 600; - } - } + #description { + .tabs#tabs-menu { + .tab-link { + font-weight: 600; + } + } - .tab-content { - .tab-title { - font-weight: 600; - } + .tab-content { + .tab-title { + font-weight: 600; + } - p { - color: $cTextLight; + p { + color: $cTextLight; - span { - font-weight: 600; - color: $cText; - } - } + span { + font-weight: 600; + color: $cText; + } + } - ul { - li { - color: $cTextLight; - } - } - } + ul { + li { + color: $cTextLight; + } + } + } - .description-right { - .content { - p { - color: $cTextLight; - } - } + .description-right { + .content { + p { + color: $cTextLight; + } + } - .title { - border-bottom: none; - font-weight: 600; - } - } - } + .title { + border-bottom: none; + font-weight: 600; + } + } + } - .add-to-basket { - // flex-direction: column; - flex-direction: row; - align-items: center; + .add-to-basket { + // flex-direction: column; + flex-direction: row; + align-items: center; - .btn { - padding: 15px 30px; - // margin-top: 15px; - transition: 0.3s; + .btn { + padding: 15px 30px; + // margin-top: 15px; + transition: 0.3s; - &:hover { - background-color: black; - } - } - } - } + &:hover { + background-color: black; + } + } + } + } } //menu #main-menu { - #menu-container-1 { - nav { - ul.level-0 { - justify-content: center; - padding: 10px 0; + #menu-container-1 { + nav { + ul.level-0 { + justify-content: center; + padding: 10px 0; - li { - cursor: pointer; + li { + cursor: pointer; - &:hover { - a { - &::after { - width: 100%; - } - } - } + &:hover { + a { + &::after { + width: 100%; + } + } + } - a { - position: relative; - margin: 10px 0; - font-size: 18px; + a { + position: relative; + margin: 10px 0; + font-size: 18px; - @include respond-above(md) { - font-size: 16px; - } + @include respond-above(md) { + font-size: 16px; + } - @include respond-above(lg) { - font-size: 18px; - } + @include respond-above(lg) { + font-size: 18px; + } - &::after { - position: absolute; - content: ''; - bottom: 0; - left: 0; - height: 2px; - background-color: $cRed; - width: 0; - transition: 0.4s; - } + &::after { + position: absolute; + content: ''; + bottom: 0; + left: 0; + height: 2px; + background-color: $cRed; + width: 0; + transition: 0.4s; + } - &:hover { - &::after { - width: 100%; - } - } - } + &:hover { + &::after { + width: 100%; + } + } + } - ul { - border-radius: 10px; + ul { + border-radius: 10px; - li { - @include respond-above(md) { - width: calc(100% / 4); - } + li { + @include respond-above(md) { + width: calc(100% / 4); + } - a { - &::after { - display: none; - } - } - } - } - } + a { + &::after { + display: none; + } + } + } + } + } - li.parent { - .menu-trigger { - display: flex; - align-items: center; - gap: 5px; + li.parent { + .menu-trigger { + display: flex; + align-items: center; + gap: 5px; - i { - font-weight: 200; - font-size: 10px; - } - } - } - } - } - } + i { + font-weight: 200; + font-size: 10px; + } + } + } + } + } + } } #header { - .header-right { - #search-button { - .btn { - background-color: transparent; - width: auto; - height: auto; + .header-right { + #search-button { + .btn { + background-color: transparent; + width: auto; + height: auto; - img { - fill: $cText; - width: 100%; - height: 100%; - } - } - } + img { + fill: $cText; + width: 100%; + height: 100%; + } + } + } - #basket-mini { - a { - &:hover { - .icon { - background-color: transparent; - } - } + #basket-mini { + a { + &:hover { + .icon { + background-color: transparent; + } + } - .icon { - width: auto; - height: auto; - background-color: transparent; + .icon { + width: auto; + height: auto; + background-color: transparent; - img { - width: 100%; - height: 100%; - } - } - } - } - } + img { + width: 100%; + height: 100%; + } + } + } + } + } } #basket-container { - #btn-basket-summary { - border-radius: 10px; - transition: 0.3s; - margin-top: 20px; + #btn-basket-summary { + border-radius: 10px; + transition: 0.3s; + margin-top: 20px; - &:hover { - background-color: $cText; - } + &:hover { + background-color: $cText; + } - @include respond-below(xxs) { - width: 100%; - } - } + @include respond-below(xxs) { + width: 100%; + } + } - #content { - .mini-box { - .box-title { - font-size: 40px; - font-weight: 700; + #content { + .mini-box { + .box-title { + font-size: 40px; + font-weight: 700; - @include respond-below(md) { - font-size: 28px; - } - } + @include respond-below(md) { + font-size: 28px; + } + } - #basket { - border-bottom: 1px solid rgba(lightgray, 0.4); + #basket { + border-bottom: 1px solid rgba(lightgray, 0.4); - .details { - .name { - a { - font-weight: 400; - } - } - } + .details { + .name { + a { + font-weight: 400; + } + } + } - .buttons { - .btn-delete { - background-color: transparent; + .buttons { + .btn-delete { + background-color: transparent; - img { - width: 22px; - height: 22px; - } - } - } + img { + width: 22px; + height: 22px; + } + } + } - .basket-bottom { - .coupon { - .form-horizontal { - .input-group { - .form-control:focus { - border: 2px solid #000; - box-shadow: none; - } + .basket-bottom { + .coupon { + .form-horizontal { + .input-group { + .form-control:focus { + border: 2px solid #000; + box-shadow: none; + } - .form-control:active { - border: 2px solid #000; - box-shadow: none; - } - } - } + .form-control:active { + border: 2px solid #000; + box-shadow: none; + } + } + } - form { - .form-control { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - } + form { + .form-control { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + } - .btn { - border-bottom-right-radius: 10px; - border-top-right-radius: 10px; - transition: 0.3s; + .btn { + border-bottom-right-radius: 10px; + border-top-right-radius: 10px; + transition: 0.3s; - &:hover { - background-color: black; - } - } - } - } + &:hover { + background-color: black; + } + } + } + } - .basket-message { - textarea { - border-radius: 10px; - } - } - } - } - } - } + .basket-message { + textarea { + border-radius: 10px; + } + } + } + } + } + } } //owl .products-related { - .owl-carousel { - .owl-nav { - .owl-prev, - .owl-next { - span { - transition: 0.3s; + .owl-carousel { + .owl-nav { - &:hover { - color: $cRed; - } - } - } - } - } + .owl-prev, + .owl-next { + span { + transition: 0.3s; + + &:hover { + color: $cRed; + } + } + } + } + } } //basket-summary-container .basket-summary-container { - .user-login { - .content { - form { - .form-group { - input { - border-radius: 10px; - } + .user-login { + .content { + form { + .form-group { + input { + border-radius: 10px; + } - button { - border-radius: 10px; - transition: 0.3s; + button { + border-radius: 10px; + transition: 0.3s; - &:hover { - background-color: $cText; - } - } - } - } - } - } + &:hover { + background-color: $cText; + } + } + } + } + } + } - .basket-address-form { - .form-group { - input { - border-radius: 10px; - } + .basket-address-form { + .form-group { + input { + border-radius: 10px; + } - button { - border-radius: 10px; - transition: 0.3s; + button { + border-radius: 10px; + transition: 0.3s; - &:hover { - background-color: $cText; - } - } - } - } + &:hover { + background-color: $cText; + } + } + } + } - .btn.btn-dark { - background-color: $cRed; - border-radius: 10px; - transition: 0.3s; + .btn.btn-dark { + background-color: $cRed; + border-radius: 10px; + transition: 0.3s; - &:hover { - background-color: $cText; - } - } + &:hover { + background-color: $cText; + } + } } //main .main { - .alert.alert-success { - border-radius: 10px; + .alert.alert-success { + border-radius: 10px; - .close { - color: white; - opacity: 1; - text-shadow: none; - } - } + .close { + color: white; + opacity: 1; + text-shadow: none; + } + } - .order-bottom { - .right { - .content { - button { - border-radius: 10px; - } - } - } - } + .order-bottom { + .right { + .content { + button { + border-radius: 10px; + } + } + } + } - #basket-summary { - .alert.alert-danger { - border-radius: 10px; - } - } + #basket-summary { + .alert.alert-danger { + border-radius: 10px; + } + } } //shop alert .shop-alert { - border-radius: 10px; + border-radius: 10px; - .shop-alert-buttons { - .btn { - border-radius: 10px; - font-size: 14px; - } + .shop-alert-buttons { + .btn { + border-radius: 10px; + font-size: 14px; + } - .btn-success { - transition: 0.3s; + .btn-success { + transition: 0.3s; - &:hover { - background-color: $cText; - } - } + &:hover { + background-color: $cText; + } + } - .btn-default { - transition: 0.3s; + .btn-default { + transition: 0.3s; - &:hover { - color: $cRed; - } - } - } + &:hover { + color: $cRed; + } + } + } } //basket #basket { - .alert.alert-danger { - border-radius: 10px; - } + .alert.alert-danger { + border-radius: 10px; + } } //jconfirm .jconfirm-box { - border-radius: 10px; + border-radius: 10px; - .jconfirm-buttons { - .btn.btn-blue, - .btn.btn-orange { - background-color: $cRed !important; - transition: 0.3s !important; - border-radius: 10px !important; + .jconfirm-buttons { - &:hover { - background-color: $cText !important; - } - } - } + .btn.btn-blue, + .btn.btn-orange { + background-color: $cRed !important; + transition: 0.3s !important; + border-radius: 10px !important; + + &:hover { + background-color: $cText !important; + } + } + } } //iradio_square-blue .iradio_square-blue.checked { - ins { - background-color: $cRed !important; - } + ins { + background-color: $cRed !important; + } } //basket buttons #basket-container { - #basket { - .basket-product { - .buttons { - .int-format.form-control:focus, - .int-format.form-control:active { - border: 2px solid #000; - box-shadow: none; - } - } - } - } + #basket { + .basket-product { + .buttons { - .row { - .col-12 { - } - } + .int-format.form-control:focus, + .int-format.form-control:active { + border: 2px solid #000; + box-shadow: none; + } + } + } + } + + .row { + .col-12 {} + } } //basket bottom, basket message #basket-container { - .mini-box { - #basket { - .basket-bottom { - .basket-message { - .form-control:focus, - .form-control:active { - border: 2px solid #000; - box-shadow: none; - } - } - } - } - } + .mini-box { + #basket { + .basket-bottom { + .basket-message { + + .form-control:focus, + .form-control:active { + border: 2px solid #000; + box-shadow: none; + } + } + } + } + } } //contact .main { - .container { - .row { - .col-12 { - .site-title { - font-size: 40px; + .container { + .row { + .col-12 { + .site-title { + font-size: 40px; - @include respond-below(md) { - font-size: 30px; - } - } + @include respond-below(md) { + font-size: 30px; + } + } - #contact-additional-info { - p { - font-size: 16px; - } - } + #contact-additional-info { + p { + font-size: 16px; + } + } - #contact-form { - #contact-form-send { - border-radius: 10px; - transition: 0.3s; + #contact-form { + #contact-form-send { + border-radius: 10px; + transition: 0.3s; - &:hover { - background-color: $cText; - } - } - } - } - } - } + &:hover { + background-color: $cText; + } + } + } + } + } + } } //search #header { - #search-form-big { - div.input { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + #search-form-big { + div.input { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; - .button--search { - width: 125px; - border: none; - box-shadow: 0 0 5px #0003; - background-color: $cRed; - border-bottom-right-radius: 30px; - border-top-right-radius: 30px; - height: 50px; - cursor: pointer; - transition: 0.3s; + .button--search { + width: 125px; + border: none; + box-shadow: 0 0 5px #0003; + background-color: $cRed; + border-bottom-right-radius: 30px; + border-top-right-radius: 30px; + height: 50px; + cursor: pointer; + transition: 0.3s; - @include respond-below(xxs) { - width: 80px; - } + @include respond-below(xxs) { + width: 80px; + } - &:hover { - background-color: $cText; - } - } + &:hover { + background-color: $cText; + } + } - .search-form-big-close { - color: $cText; - width: 25px; - height: 25px; - margin-left: 20px; + .search-form-big-close { + color: $cText; + width: 25px; + height: 25px; + margin-left: 20px; - img { - width: 100%; - height: auto; - } - } + img { + width: 100%; + height: auto; + } + } - input.form-control { - border: none; - border-bottom-left-radius: 30px; - border-top-left-radius: 30px; - box-shadow: 0 0 5px #0003; - font-size: 16px; - color: $cTextLight; - padding: 20px 0 20px 20px; + input.form-control { + border: none; + border-bottom-left-radius: 30px; + border-top-left-radius: 30px; + box-shadow: 0 0 5px #0003; + font-size: 16px; + color: $cTextLight; + padding: 20px 0 20px 20px; - &::placeholder { - font-size: 16px; - color: $cTextLight; + &::placeholder { + font-size: 16px; + color: $cTextLight; - @include respond-below(xxs) { - font-size: 14px; - } - } - } - } - } + @include respond-below(xxs) { + font-size: 14px; + } + } + } + } + } } //product .main { - #product { - .product-options#product-options { - h1 { - font-size: 24px; + #product { + .product-options#product-options { + h1 { + font-size: 24px; - @include respond-above(md) { - font-size: 30px; - } - } + @include respond-above(md) { + font-size: 30px; + } + } - .prices { - margin: 10px 0; + .prices { + margin: 10px 0; - @include respond-above(md) { - margin: 20px 0; - } + @include respond-above(md) { + margin: 20px 0; + } - .price { - font-size: 24px; + .price { + font-size: 24px; - .small { - font-size: 24px; - font-weight: 800; - } + .small { + font-size: 24px; + font-weight: 800; + } - @include respond-above(md) { - font-size: 28px; + @include respond-above(md) { + font-size: 28px; - .small { - font-size: 28px; - } - } - } - } - } + .small { + font-size: 28px; + } + } + } + } + } - #description { - .tab-title { - font-size: 20px; + #description { + .tab-title { + font-size: 20px; - @include respond-above(md) { - font-size: 22px; - } - } + @include respond-above(md) { + font-size: 22px; + } + } - p { - font-size: 14px; + p { + font-size: 14px; - @include respond-above(md) { - font-size: 16px; - } - } + @include respond-above(md) { + font-size: 16px; + } + } - .tabs { - list-style: none; - display: flex; - justify-content: start; - align-items: center; - border-bottom: 2px solid rgba(lightgray, 0.8); - padding-left: 0; - gap: 10px; + .tabs { + list-style: none; + display: flex; + justify-content: start; + align-items: center; + border-bottom: 2px solid rgba(lightgray, 0.8); + padding-left: 0; + gap: 10px; - .tab-link { - font-size: 18px; - cursor: pointer; - transition: 0.3s; - padding: 10px 25px; + .tab-link { + font-size: 18px; + cursor: pointer; + transition: 0.3s; + padding: 10px 25px; - &.current { - background: $cRed; - color: #fff !important; - } + &.current { + background: $cRed; + color: #fff !important; + } - &:hover { - color: $cRed; - } + &:hover { + color: $cRed; + } - @include respond-above(xs) { - font-size: 20px; - } + @include respond-above(xs) { + font-size: 20px; + } - @include respond-above(md) { - font-size: 24px; - } - } - } + @include respond-above(md) { + font-size: 24px; + } + } + } - .description-right { - .title { - font-size: 20px; + .description-right { + .title { + font-size: 20px; - @include respond-above(md) { - font-size: 22px; - } - } - } - } + @include respond-above(md) { + font-size: 22px; + } + } + } + } - .products-sets { - .box-title { - font-size: 24px; + .products-sets { + .box-title { + font-size: 24px; - @include respond-above(md) { - font-size: 28px; - } - } + @include respond-above(md) { + font-size: 28px; + } + } - .owl-carousel { - .owl-nav { - button { - transition: 0.3s; + .owl-carousel { + .owl-nav { + button { + transition: 0.3s; - &:hover { - color: $cRed; - } - } - } - } - } - } + &:hover { + color: $cRed; + } + } + } + } + } + } } .button-up { - border: none; - background-color: $cRed; - border-radius: 10px; - width: 40px; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - position: fixed; - bottom: 60px; - right: 20px; - cursor: pointer; - transition: 0.3s; - opacity: 0; + border: none; + background-color: $cRed; + border-radius: 10px; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + bottom: 60px; + right: 20px; + cursor: pointer; + transition: 0.3s; + opacity: 0; - &--active { - opacity: 1; - } + &--active { + opacity: 1; + } - &:hover { - background-color: $cText; - } + &:hover { + background-color: $cText; + } - img { - width: 50%; - height: auto; - } + img { + width: 50%; + height: auto; + } } //logowanie .main { - .container { - .user-login { - .content { - form { - .form-group { - input { - border-radius: 10px; - } + .container { + .user-login { + .content { + form { + .form-group { + input { + border-radius: 10px; + } - input:focus { - border: 2px solid #000; - box-shadow: none; - } + input:focus { + border: 2px solid #000; + box-shadow: none; + } - button { - border-radius: 10px; - transition: 0.3s; + button { + border-radius: 10px; + transition: 0.3s; - &:hover { - background-color: $cText; - } - } - } - } - } - } - } + &:hover { + background-color: $cText; + } + } + } + } + } + } + } } //rejestracja .user-register { - .content { - form#f-user-register { - .form-group { - input { - border-radius: 10px; - } + .content { + form#f-user-register { + .form-group { + input { + border-radius: 10px; + } - input:focus { - border: 2px solid #000; - box-shadow: none; - } + input:focus { + border: 2px solid #000; + box-shadow: none; + } - button { - border-radius: 10px; - } - } - } - } + button { + border-radius: 10px; + } + } + } + } } .image-categories { - display: none; + display: none; } #scontainer-12, #scontainer-13 { - background: $cRed; - padding: 25px; - color: #fff; - margin-bottom: 25px; + background: $cRed; + padding: 25px; + color: #fff; + margin-bottom: 25px; - @include respond-below(md) { - padding: 10px; - font-size: 13px; - } + @include respond-below(md) { + padding: 10px; + font-size: 13px; + } - p:last-child { - margin-bottom: 0; - } + p:last-child { + margin-bottom: 0; + } } #scontainer-12 { - display: none !important; + display: none !important; } .main-page-text { - font-size: 13px; + font-size: 13px; - h1 { - font-size: 18px; - } + h1 { + font-size: 18px; + } - h2 { - font-size: 15px; - font-weight: 600; - } + h2 { + font-size: 15px; + font-weight: 600; + } - a { - color: $cRed; - } + a { + color: $cRed; + } } .why-us { - &--wrapper { - position: relative; - padding: 150px 0; - background: #b7174d; + &--wrapper { + position: relative; + padding: 150px 0; + background: #b7174d; - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 60px; - background-image: url('/images/wave-2.svg'); - } + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 60px; + background-image: url('/images/wave-2.svg'); + } - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 60px; - background-image: url('/images/wave-2.svg'); - transform: scale(-1); - } + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 60px; + background-image: url('/images/wave-2.svg'); + transform: scale(-1); + } - @include respond-below(lg) { - padding: 100px 0; - } - } + @include respond-below(lg) { + padding: 100px 0; + } + } - .box-title { - font-size: 26px; + .box-title { + font-size: 26px; - @include respond-above(md) { - font-size: 40px; - } + @include respond-above(md) { + font-size: 40px; + } - font-weight: 700; - text-align: center; - } + font-weight: 700; + text-align: center; + } - #scontainer-15 { - img { - display: block; - width: 64px !important; - max-width: unset !important; - height: 64px; - margin: 0 auto 20px; - } + #scontainer-15 { + img { + display: block; + width: 64px !important; + max-width: unset !important; + height: 64px; + margin: 0 auto 20px; + } - h2 { - color: #fff; - font-size: 1.75rem; - text-align: center; - margin-bottom: 20px; - } + h2 { + color: #fff; + font-size: 1.75rem; + text-align: center; + margin-bottom: 20px; + } - p { - color: #fff; - text-align: center; - } + p { + color: #fff; + text-align: center; + } - .row { - > div { - &:hover { - img { - animation-name: buzz-out-on-hover; - animation-duration: 0.75s; - animation-timing-function: linear; - animation-iteration-count: 1; - } - } - } - } + .row { + >div { + &:hover { + img { + animation-name: buzz-out-on-hover; + animation-duration: 0.75s; + animation-timing-function: linear; + animation-iteration-count: 1; + } + } + } + } - @include respond-below(lg) { - h2 { - font-size: 22px; - } - } - } + @include respond-below(lg) { + h2 { + font-size: 22px; + } + } + } } @keyframes buzz-out-on-hover { - 10% { - -webkit-transform: translateX(3px) rotate(2deg); - transform: translateX(3px) rotate(2deg); - } + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } - 20% { - -webkit-transform: translateX(-3px) rotate(-2deg); - transform: translateX(-3px) rotate(-2deg); - } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } - 30% { - -webkit-transform: translateX(3px) rotate(2deg); - transform: translateX(3px) rotate(2deg); - } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } - 40% { - -webkit-transform: translateX(-3px) rotate(-2deg); - transform: translateX(-3px) rotate(-2deg); - } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } - 50% { - -webkit-transform: translateX(2px) rotate(1deg); - transform: translateX(2px) rotate(1deg); - } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } - 60% { - -webkit-transform: translateX(-2px) rotate(-1deg); - transform: translateX(-2px) rotate(-1deg); - } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } - 70% { - -webkit-transform: translateX(2px) rotate(1deg); - transform: translateX(2px) rotate(1deg); - } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } - 80% { - -webkit-transform: translateX(-2px) rotate(-1deg); - transform: translateX(-2px) rotate(-1deg); - } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } - 90% { - -webkit-transform: translateX(1px) rotate(0); - transform: translateX(1px) rotate(0); - } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } - 100% { - -webkit-transform: translateX(-1px) rotate(0); - transform: translateX(-1px) rotate(0); - } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } } .free-delivery-box { - display: flex; - align-items: flex-end; - gap: 10px; - margin-bottom: 15px; + display: flex; + align-items: flex-end; + gap: 10px; + margin-bottom: 15px; - img { - width: 26px; - height: 26px; - filter: invert(1); - } + img { + width: 26px; + height: 26px; + filter: invert(1); + } - p { - margin-bottom: 0; - } + p { + margin-bottom: 0; + } } .loading-button { - pointer-events: none; - /* Wyłącza możliwość kliknięcia ponownie */ - opacity: 0.7; - /* Lekkie przyciemnienie przycisku */ - transition: opacity 0.3s; + pointer-events: none; + /* Wyłącza możliwość kliknięcia ponownie */ + opacity: 0.7; + /* Lekkie przyciemnienie przycisku */ + transition: opacity 0.3s; } .loading-button::after { - content: ''; - display: block; - margin-left: 10px; - margin-right: auto; - width: 20px; - height: 20px; - border: 3px solid #fff; - border-radius: 50%; - border-top: 3px solid #666; - animation: spin 1s linear infinite; + content: ''; + display: block; + margin-left: 10px; + margin-right: auto; + width: 20px; + height: 20px; + border: 3px solid #fff; + border-radius: 50%; + border-top: 3px solid #666; + animation: spin 1s linear infinite; } @keyframes spin { - 0% { - transform: rotate(0deg); - } + 0% { + transform: rotate(0deg); + } - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } } .instagram-feed { - .box-title { - font-size: 26px; + .box-title { + font-size: 26px; - @include respond-above(md) { - font-size: 40px; - } + @include respond-above(md) { + font-size: 40px; + } - font-weight: 700; - text-align: center; - } + font-weight: 700; + text-align: center; + } - #instagram-feed-box { - .splide__slide { - display: flex; - justify-content: center; - } - } + #instagram-feed-box { + .splide__slide { + display: flex; + justify-content: center; + } + } } .swiper { - .swiper-button-prev, - .swiper-button-next { - width: 40px; - height: 40px; - border-radius: 100%; - background: #b7174d; - &::after { - color: white; - font-size: 16px; - font-weight: bolder; - } - } + .swiper-button-prev, + .swiper-button-next { + width: 40px; + height: 40px; + border-radius: 100%; + background: #b7174d; + + &::after { + color: white; + font-size: 16px; + font-weight: bolder; + } + } } .recommended-presents { - .swiper-slide { - .product-mini { - height: 100%; - } - } + .swiper-slide { + .product-mini { + height: 100%; + } + } } .category-subcategory-tiles { - display: flex; - flex-wrap: wrap; - gap: 5px; - list-style-type: none; - margin: 0 0 25px; - padding: 0; - justify-content: center; + display: flex; + flex-wrap: wrap; + gap: 5px; + list-style-type: none; + margin: 0 0 25px; + padding: 0; + justify-content: center; - li { - a { - display: inline-flex; - padding: 5px 10px; - color: #fff; - font-weight: 600; - transition: 250ms ease all; - background: $cRed; - border: 0; - font-size: 14px; + li { + a { + display: inline-flex; + padding: 5px 10px; + color: #fff; + font-weight: 600; + transition: 250ms ease all; + background: $cRed; + border: 0; + font-size: 14px; - &:hover { - text-decoration: none; - opacity: 0.8; - } - } - } + &:hover { + text-decoration: none; + opacity: 0.8; + } + } + } } #cookieAccept { - .acceptBtnSettingsLabel { - display: none; - } -} + .acceptBtnSettingsLabel { + display: none; + } +} \ No newline at end of file