// out: index.css, compress: true, sourceMap: true @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 400; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieRegular.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 400; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieItalic.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 100; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieThin.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 100; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieThinItalic.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 250; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieExtraLight.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 250; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieExtraLightItalic.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 300; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieLight.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 300; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieLightItalic.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 350; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieBook.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 350; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieBookItalic.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 600; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieSemiBold.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 600; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieSemiBoldItalic.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 700; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieBold.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 700; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieBoldItalic.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: normal; font-weight: 800; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieExtraBold.woff') format('woff'); } @font-face { font-family: 'Graphie'; font-style: italic; font-weight: 800; src: local('Graphie'), url('https://fonts.cdnfonts.com/s/20170/GraphieExtraBoldItalic.woff') format('woff'); } //* Variables $cWhite: #fff; $cGray: #ebebeb; $cDarkGray: #a8a8a8; $cPink: #f3a4ff; $cRaspberry: #df1d4b; $cRed: #c20000; $cDarkRed: #6a0000; $cBlack: #000; $cTxt: #061b26; .d-none { display: none !important; } .btn-1 { display: inline-block; color: $cPink; font-style: normal; font-weight: 600; font-size: 15px; padding: 13px 38px 12px 38px; border: 2px solid $cPink; letter-spacing: 0.125em; &:hover { color: $cPink; } @media (max-width: 500px) { font-size: 12px; } } .btn-2 { position: relative; display: inline-block; color: $cWhite; font-style: normal; font-weight: 600; font-size: 15px; padding: 12px 38px; letter-spacing: 0.125em; text-transform: uppercase; z-index: 1; &::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: $cRed; clip-path: polygon(0% -5%, 0% 100%, 105% 100%, 100% 99%); z-index: -1; transition: all 250ms ease; } &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: $cRaspberry; clip-path: polygon(0 0, 100% 0, 100% 100%); z-index: -1; transition: all 250ms ease; } &:hover { color: $cWhite; &::before { clip-path: polygon(0% -5%, 0% 100%, 105% 100%, 100% 0%); } &::after { clip-path: polygon(0 0, 100% 0, 100% 0%); } } @media (max-width: 500px) { font-size: 12px; } } .btn-3 { display: inline-block; color: $cRed; font-style: normal; font-weight: 600; font-size: 15px; padding: 12px 38px; border: 2px solid $cRed; transition: all 250ms ease; &:hover { color: $cWhite; background: $cRed; } @media (max-width: 500px) { font-size: 12px; } } .btn-4 { display: inline-block; color: $cPink; font-style: normal; font-weight: 600; font-size: 15px; padding: 12px 14px; border: none; background: $cRed; border-radius: 0; &:hover { color: $cPink; } @media (max-width: 500px) { font-size: 12px; } } //* radio box .radio-wrap { top: 50% !important; transform: translateY(-50%); background: transparent; border: none; overflow: hidden; input[type='radio'] { &:checked { + label { background: $cRed; &::after { opacity: 1; } &::before { opacity: 1; } } } + label { position: absolute; inset: 0; background: transparent; border: 1px solid $cRed !important; border-radius: 50px; transition: all 250ms ease; &::after { background-color: $cWhite !important; border-radius: 0 !important; width: 2px !important; height: 11px !important; left: calc(50% + 2px); top: calc(50% + 1px); transform: translate(-50%, -50%) rotate(40deg); opacity: 0; transition: all 250ms ease; } &::before { content: ''; position: absolute; background-color: $cWhite; border-radius: 0; width: 2px; height: 5px; left: calc(50% - 3px); top: calc(50% + 2px); transform: translate(-50%, -50%) rotate(-40deg); opacity: 0; transition: all 250ms ease; } } } } //* checkbox input[type='checkbox'].c_checkbox { position: relative; width: 15px !important; height: 15px !important; min-height: unset !important; min-width: unset !important; background: $cPink; appearance: none; border-radius: 3px; overflow: hidden; &:checked { &::before { left: 9px; top: 8px; } &::after { left: 5px; top: 10px; } } &::before { content: ''; position: absolute; width: 2px; height: 10px; background: $cRed; left: 25px; top: -10px; transform: translate(-50%, -50%) rotate(40deg); transition: all 250ms ease; } &::after { content: ''; position: absolute; width: 2px; height: 5px; background: $cRed; left: -5px; top: -5px; transform: translate(-50%, -50%) rotate(-40deg); transition: all 250ms ease; } } //* Select select { &:not(.select__phone) { color: #797979 !important; border-radius: 0 !important; padding: 17px 30px !important; background-color: transparent !important; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/mini_b_arrow.svg') !important; background-size: 15px !important; background-position-x: calc(100% - 10px) !important; &:active { color: #797979 !important; border-color: #d8d8d8 !important; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/mini_b_arrow.svg') !important; background-size: 15px !important; background-position-x: calc(100% - 10px) !important; } &:hover { color: #797979 !important; border-color: #d8d8d8 !important; background-color: transparent !important; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/mini_b_arrow.svg') !important; background-size: 15px !important; background-position-x: calc(100% - 10px) !important; } } } //* tabs news / promo .tags { right: 15px; left: auto !important; z-index: 20; li { background: transparent !important; padding: 0 !important; } .promo { margin: 0; } .new { margin: 0; } } //* Breadcrumbs .breadcrumbs { .innerbreadcrumbs { span { color: #9e9e9e !important; font-style: normal; font-weight: 400; font-size: 14px !important; text-decoration: none !important; } ul { li { .raq { margin: 0; } } } } } html { width: 100vw; } body { font-family: 'Graphie', sans-serif; overflow-x: hidden; } p { line-height: 1.4; } //* Header top .header_top { padding-left: 15px; padding-right: 15px; background: $cBlack; .header_top__wrapper { padding-left: 15px; padding-right: 15px; display: flex; align-items: center; justify-content: center; } .header_top__text { flex-grow: 1; text-align: center; padding: 11px 0; p { color: $cWhite; font-size: 14px; line-height: 16px; padding-left: 50px; text-transform: uppercase; } } .header_top__language { #box_languages { position: relative; #languages_flags { position: absolute; left: -16px; right: 0px; top: 100%; background: $cBlack; padding-bottom: 3px; z-index: 1; } } } .header_top__currencies { margin-right: 20px; #box_currencies { position: relative; #currency_symbols { position: absolute; left: -16px; right: 0px; top: 100%; background: $cBlack; padding-bottom: 8px; z-index: 1; } } } } //* header header { padding-left: 15px; padding-right: 15px; .container { max-width: 1700px; } .login-bar { display: none; } .logo-bar { display: flex; flex-direction: row; justify-content: space-between; &::before { display: none; } &::after { display: none; } .menu { border-bottom: none; } .myaccount-nav-btn { min-width: 20px; margin-left: 5px; padding: 0 10px; background: none transparent; height: 44px; line-height: 42px; float: right; @media (max-width: 767px) { display: none; } } .basket { margin-left: 5px; a { &::before { width: 21px !important; height: 24px !important; } } } .search__container { .search-btn { &::before { display: none; } } } .navmenu_nav_btns { .basket-products { .basket-product-list { li { a { &:hover { color: $cRed; } } } } .remove-product { a { &:hover { color: $cRed; } } } } .basket { a { padding-top: 2px; display: inline-block; &::before { background-size: contain !important; max-width: 19px; } } } .basket-summery { .btn-2 { border: none; } } } } @media screen and (max-width: 767px) { .login-bar { display: none !important; } .logo-bar { justify-content: center; } } } //* menu .menu { border-bottom: none; z-index: 21; .container { max-width: 1700px; } .innermenu { .menu-list { display: flex; justify-content: center; > li { &:hover { > h3 { > a { color: $cRed; } } } } li { &.current { h3 { a { color: $cRed; } } } h3 { a { color: $cBlack; font-weight: 400; font-size: 16px; text-transform: uppercase; &:hover { color: $cRed; } &::after { border-color: transparent $cBlack transparent transparent !important; } } } } .mx_menuboks_FS_CONTAINER_DIV { margin-top: 17px; @media (max-width: 1200px) { margin-top: 0; } .mx_menuboks_FS_BG_DIV { border-top: 1px solid #d1d1d1; .mx_menuboks_WINDOW_DIV { width: 100% !important; max-width: 1000px; margin: 0 auto !important; .mx_megamenu_menu_col { .mx_megamenu_lvl1_container { > .mx_megamenu_label_div { a { font-weight: 700; font-size: 16px; text-transform: uppercase; } } .mx_megamenu_lvl1_children { .mx_megamenu_label_div { a { font-weight: 400; font-size: 16px; } } } } } } } } } .parent { &:hover { > div { > ul { li { h3 { a { &:hover { color: $cRed; } } } } } } } } .menu-mobile { margin-bottom: -1px; li { h3 { a { &.icon-custom-cart { &::before { width: 21px; height: 23px; } } } } } } #rwd-menu { width: 100%; background-color: $cWhite; > li { > a { text-transform: uppercase; } } li { border-bottom: 1px solid rgba($cBlack, 0.3); &:first-child { border-top: 1px solid rgba($cBlack, 0.3); } &::after { color: $cBlack; } a { color: $cBlack; font-weight: 400; font-size: 15px; } ul { background-color: $cWhite; } } } @media screen and (min-width: 768px) and (max-width: 979px) { border: none !important; } @media screen and (max-width: 767px) { border: none !important; position: initial; #rwd-menu { display: block !important; position: fixed; top: 0; right: -100%; height: 100%; width: 80%; padding-top: 60px; transition: all 250ms ease; &.active { right: 0; } } } } .mx_megamenu_menu_col { .mx_megamenu_lvl1_in { > .mx_gr_more_button { > .mx_gr_more_div { display: block !important; position: relative !important; box-shadow: none !important; } } } } @media (max-width: 767px) { .innermenu { .menu-mobile { li { a { &.myaccount { padding: 13px 0 0 0; } } } } } } } //* Wyszukiwarka @media (min-width: 767px) { .search__container { display: flex; width: fit-content !important; padding-right: 2px; .search__content { top: 103px; min-width: 500px; } .search-input { padding-left: 0; border: none; border-right: none !important; .header_search_products_form { display: none; position: absolute !important; top: 57px; right: 0; width: 400px; border: 1px solid #e2e2e2; width: 100%; min-width: 500px; z-index: 11; &.header_search_form_active { display: flex !important; align-items: center; background: $cWhite; .search__input-area-item { .icon-close { padding: 0 5px; } } } } .search-btn { width: 30px !important; } } } } @media screen and (max-width: 767px) { .search__container { .search_open { .search__input-area-item { &:first-child { display: flex; flex-direction: row; align-items: center; } } } } } //* Footer footer { &.footer { background: $cRed; border-bottom: none; .innerfooter { padding-top: 65px; padding-bottom: 65px; background: transparent; } } .container { max-width: 1700px; } .footer_box { display: flex; flex-direction: row; justify-content: space-between; padding: 0 20px; .footer_left_box { display: flex; flex-direction: row; column-gap: 120px; .footer_logo { display: flex; flex-direction: column; gap: 30px; .footer_awards { width: 100%; max-width: 100px; } } .footer_cols { display: flex; flex-direction: row; column-gap: 50px; > li { margin-top: 0; } li { color: $cWhite; font-weight: 400; font-size: 16px; a { color: $cWhite; font-weight: 400; font-size: 14px; text-decoration: none; } } } } .footer_right_box { .footer_signature { text-align: right; display: flex; flex-direction: column; gap: 10px; p { color: $cPink; font-weight: 400; font-size: 20px; line-height: 22px; row-gap: 10px; } .footer_social { display: flex; flex-direction: row; gap: 10px; justify-content: flex-end; } } } } .footer_contact { display: flex; flex-direction: row; justify-content: space-between; row-gap: 30px; margin-top: 60px; padding: 0 20px; flex-wrap: wrap; column-gap: 50px; p { &.title { color: #f3a4ff; font-size: 24px; font-weight: 700; font-style: italic; } color: #fff; font-weight: 400; font-size: 14px; text-decoration: none; } a { color: #fff; font-weight: 400; font-size: 14px; text-decoration: none; } } .footer_bottom { text-align: right; padding-top: 17px; padding-bottom: 40px; border-top: 1px solid rgba($cWhite, 0.3); p { color: $cWhite; font-style: normal; font-weight: 400; font-size: 12px; padding: 0 20px; } } @media screen and (max-width: 1300px) { .footer_box { .footer_right_box { display: none; } } } @media screen and (max-width: 1200px) { .footer_box { .footer_left_box { column-gap: 50px; } } } @media screen and (max-width: 979px) { .footer_box { .footer_left_box { align-items: center; flex-direction: column; row-gap: 30px; .footer_logo { align-items: center; } } } } @media screen and (max-width: 767px) { &.footer { .innerfooter { padding-top: 25px; padding-bottom: 20px; } } .footer_box { .footer_left_box { width: 100%; flex-direction: column-reverse; row-gap: 30px; .footer_cols { flex-direction: column; width: 100%; li { border-left: none; &.head { border-bottom: none; } &:nth-child(1) { ul { padding-top: 20px; border-top: 1px solid rgba($cWhite, 0.3); } } ul { border-bottom: 1px solid rgba($cWhite, 0.3); li { background: transparent; } } } } } } .footer_contact { justify-content: center; } .footer_bottom { text-align: center; border-top: none; padding-top: 0px; padding-bottom: 20px; } } @media screen and (max-width: 500px) { .footer_box { .footer_left_box { .footer_logo { img { width: 100%; max-width: 110px; } .footer_awards { img { width: 100%; max-width: 100px; } } } } } } } //* Bottom footer .bottom-footer { padding-top: 0; background: $cRed; overflow: hidden; .container { max-width: 1700px; } @media screen and (max-width: 767px) { margin: 0 !important; } } //* Box header .box_header { position: relative; padding-left: 32px; margin-bottom: 35px; background: none !important; &::before { content: ''; position: absolute; top: 50%; left: 5px; width: 8px; height: 8px; background: $cPink; border-radius: 10px; transform: translateY(-50%); } h2 { color: $cDarkRed; font-style: normal; font-weight: 300; font-size: 24px; line-height: 1.2; margin: 0; text-transform: uppercase; strong { font-weight: 700; font-style: italic; } } @media (max-width: 767px) { padding-left: 0; margin-bottom: 20px; h2 { font-size: 16px; text-align: center; } &::before { display: none; } } } //* pagination .paginator { display: flex; align-items: center; justify-content: center; gap: 15px; li { display: flex !important; align-items: center; justify-content: center; border: none !important; border-radius: 0 !important; line-height: 0 !important; height: 18px; min-width: 18px; margin: 0 !important; a { display: flex !important; align-items: center; justify-content: center; color: $cDarkRed !important; font-weight: 600 !important; font-size: 0.625rem !important; line-height: 0.75rem !important; padding: 0 !important; height: 18px; min-width: 18px; } &.selected { background: $cRed; span { color: $cPink !important; font-weight: 600 !important; font-size: 0.625rem !important; line-height: 0.75rem !important; padding: 0; } } &.first { ::before { left: 0; top: 0; width: 100% !important; height: 100% !important; } } &.last { ::before { left: 0; top: 0; width: 100% !important; height: 100% !important; } } } } //* Newsletter #box_newsletter { margin-bottom: 0; padding-top: 80px; .newsletter_form { display: flex; flex-direction: row; column-gap: 35px; .left_form { h2 { color: $cPink; font-style: normal; font-weight: 700; font-size: 32px; margin-top: 7px; } } .right_form { flex-grow: 1; .form_inputs { display: flex; flex-direction: row; margin-bottom: 15px; .newsletter-input { border-radius: 0; width: 100%; } .btn-red { color: $cRed; display: flex; align-items: center; justify-content: center; width: 235px; font-style: normal; font-weight: 700; font-size: 15px; letter-spacing: 0.125em; text-transform: uppercase; background: $cPink; border-radius: 0; } } .form_certify { color: $cWhite; display: flex; align-items: center; input[type='checkbox'] { margin-left: 0; margin-right: 15px; } a { color: $cWhite; } } } } @media screen and (max-width: 1200px) { .newsletter_form { .left_form { h2 { margin-top: 0; } } .right_form { width: 100%; } } } @media screen and (max-width: 979px) { .newsletter_form { align-items: center; flex-direction: column; row-gap: 25px; } } @media screen and (max-width: 767px) { padding-top: 40px; .innerbox { padding: 0 20px !important; } } @media screen and (max-width: 500px) { .newsletter_form { row-gap: 15px; .left_form { h2 { font-size: 20px; text-align: center; } } .right_form { .form_inputs { flex-direction: column; row-gap: 15px; .btn-red { padding: 12px; width: 100%; font-size: 12px; } } .form_certify { align-items: flex-start; input[type='checkbox'] { margin-top: 8px; } } } } } } #shoper-foot { display: none; } //* Produkt img hover .box_produkt_img__hover { position: relative; &:hover { .product-front { visibility: hidden; opacity: 0; } .product-back { visibility: visible; opacity: 1; } } .product-front { visibility: visible; opacity: 1; transition: all 150ms ease; } .product-back { visibility: hidden; opacity: 0; position: absolute; inset: 0; } } //* Baner 3 #baner_3 { p { margin: 0; img { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: unset; } } } //* Box slider 33 "Hero" #box_slider_33, #box_slider_42 { width: 100vw; left: 50%; transform: translateX(-50%); .slides { li { > div { width: 100%; padding: 0 15px; } h1 { color: $cPink; font-style: normal; font-weight: 300; font-size: 152px; line-height: 1.3; strong { font-style: italic; font-weight: 700; } } p { color: $cPink; font-style: normal; font-weight: 400; font-size: 75px; line-height: 1.3; } @media (max-width: 1200px) { h1 { font-size: 100px; } p { font-size: 40px; } } @media (max-width: 900px) { h1 { font-size: 100px; } p { font-size: 40px; } } @media (max-width: 767px) { h1 { font-size: 40px; } p { font-size: 20px; } } } } .slider-nav { li { width: 4px; height: 4px; background-color: $cWhite; border-radius: 3px; transition: all 600ms ease; &.active { width: 39px; } } } .pageslider { .ps-arrow-left { left: 1.5em; } .ps-arrow-right { right: 1.5em; } .ps-arrow-right, .ps-arrow-left { border-radius: 50px; width: 50px; height: 50px; background-color: $cWhite; } } } //* Categories slider #categories_slider { width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: 80px; margin-bottom: 80px; .categories_slider { background: $cGray; } .categories_slider__wrapper { position: relative; width: calc(100% - 60px); max-width: 1400px; padding: 0 30px; margin: 0 auto; #categories_swiper { background: $cWhite; border-right: 5px solid $cWhite; border-left: 5px solid $cWhite; .swiper-wrapper { .swiper-slide { img { width: 100%; } p { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 38px; text-align: center; position: absolute; bottom: 20px; left: 0; right: 0; } } @media (max-width: 979px) { .swiper-slide { p { font-size: 26px; } } } @media (max-width: 600px) { .swiper-slide { p { font-size: 16px; } } } } } .swiper-button-prev, .swiper-button-next { width: 60px; height: 60px; border-radius: 50%; background: $cWhite; user-select: none; &::after { position: absolute; color: $cDarkRed; font-size: 30px; font-weight: 900; transform: translateX(-50%); } } .swiper-button-prev { left: 0px; &::after { left: 50%; } } .swiper-button-next { right: 0px; &::after { left: 55%; } } } @media (max-width: 767px) { margin-top: 20px; margin-bottom: 45px; } } //* Box slider 35 and 43 #box_slider_35, #box_slider_43 { margin-bottom: 130px; .pageslider { .ps-arrow-right, .ps-arrow-left { border-radius: 50px; width: 50px; height: 50px; background-color: $cWhite; } } .slides { min-height: 350px; li { position: relative; background-size: cover !important; &::before { content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 50%; min-width: 850px; background: $cRed; mix-blend-mode: multiply; } .slider-text { margin: 0 10% 3% 0; h2 { color: $cPink; font-style: normal; font-weight: 300; font-size: 92px; line-height: 1.3; strong { font-style: italic; font-weight: 700; } } p { color: $cPink; font-style: normal; font-weight: 400; font-size: 45.8495px; &:not(.last_p) { line-height: 1.3; } } .btn-1 { margin-top: 40px; } } } @media (max-width: 979px) { li { &::before { height: 50%; width: 100%; top: auto; bottom: 0; min-height: 190px; } > div { left: 17px; margin-right: 0 !important; } .slider-text { h2 { font-size: 32px; } p { font-size: 16px; &.last_p { a { font-size: 10px; padding: 7px 10px; } } } } } } } } #box_slider_43 { .slides { li { &::before { width: 63%; } .slider-text { margin: 0 5% 3% 0; } } } } //* Box slider 35 Title #box_slider_35_title { width: 100%; max-width: 1400px; margin: 0 auto; } //* Bestseller #box_bestsellers { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; margin-bottom: 80px; .slider-nav-right { right: -35px; width: 50px; height: 50px; border-radius: 50px; } .slider-nav-left { left: -35px; width: 50px; height: 50px; border-radius: 50px; } .product { padding-top: 25px; .box_produkt_img { position: relative; .basket { position: absolute; bottom: 0; right: 16px; padding: 10px; border-radius: 50px; } } .productnamewrap { text-align: left; margin: 10px 0 10px; padding: 0 10px; height: auto; .productname { color: $cBlack; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; } } .price { flex-direction: row-reverse; align-items: center; column-gap: 15px; min-height: auto; del { color: #9a9a9a; font-style: normal; font-weight: 400; font-size: 13px; } em { color: $cBlack; font-style: normal; font-weight: 700; font-size: 16px; } } } @media (max-width: 767px) { margin-bottom: 40px; } } //* Polska Marka #polska_marka { .polska_marka__wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; .left_col { .left_col__txt { width: 100%; max-width: 580px; margin: 0 auto; h2 { color: $cDarkRed; font-style: normal; font-weight: 300; font-size: 74px; margin: 0; strong { font-style: italic; font-weight: 700; } } p { color: $cBlack; font-style: normal; font-weight: 300; font-size: 16px; line-height: 1.4; margin-bottom: 35px; } } } .right_col { img { width: 100%; max-width: 850px; } } @media (max-width: 979px) { grid-template-columns: 1fr; .left_col { background: #f6f6f6; .left_col__txt { padding: 24px 15px; width: calc(100% - 30px); h2 { font-size: 50px; } } } } @media (max-width: 500px) { .left_col { .left_col__txt { text-align: center; h2 { font-size: 25px; } p { font-size: 13px; margin-bottom: 20px; } } } } } } //* Nowe artykuły #box_articlelistsmall { width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: 80px; margin-bottom: 80px; .box_header { position: relative; padding-left: 32px; margin-bottom: 40px; background: none !important; } .articlelist_slider { position: relative; .articlelist_slider_bg { position: absolute; left: 0; top: 0; width: 100%; height: 465px; background: $cGray; } } .articlelist_slider_wrapper { position: relative; width: calc(100% - 60px); max-width: 1400px; padding: 0 30px; margin: 0 auto; #articlelist_swiper { background: $cWhite; border-right: 5px solid $cWhite; border-left: 5px solid $cWhite; .swiper-wrapper { .swiper-slide { .slider_img { margin-bottom: 18px; .article-image { width: 100%; object-fit: cover; height: 465px; } } .article_data { .article-info { color: $cDarkGray; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.6; } .resetcss { p { color: $cBlack; font-style: normal; font-weight: 400; font-size: 20px; } } } } } } .swiper-button-prev, .swiper-button-next { width: 60px; height: 60px; border-radius: 50%; background: $cWhite; user-select: none; top: calc(465px / 2); &::after { position: absolute; color: $cDarkRed; font-size: 30px; font-weight: 900; transform: translateX(-50%); } } .swiper-button-prev { left: 0; &::after { left: 50%; } } .swiper-button-next { right: 0; &::after { left: 55%; } } } @media (max-width: 979px) { .box_header { margin-bottom: 20px; } .articlelist_slider_wrapper { #articlelist_swiper { .swiper-wrapper { .swiper-slide { .slider_img { .article-image { height: 200px; } } } } } .swiper-button-prev, .swiper-button-next { top: calc(200px / 2); } } } @media (max-width: 767px) { margin-top: 45px; .box_header { padding-left: 0; } .articlelist_slider_wrapper { #articlelist_swiper { .swiper-wrapper { .swiper-slide { .article_data { .article-info { font-size: 10px; text-align: center; } .resetcss { text-align: center; p { font-size: 13px; } } } } } } } } } //* ~~~~ pages assets ~~~~ *// .gap-top { padding-top: 70px; } .gap-bottom { padding-bottom: 70px; } .box_title { color: $cDarkRed; font-style: normal; font-weight: 300 !important; font-size: 24px !important; margin-top: 0 !important; margin-bottom: 20px !important; strong { font-weight: 700; font-style: italic; } } //* ~~~~~~~~~~~~~~~~~~~~~~ *// //* ~~~~ Static boxes ~~~~ *// .static_box_t1 { .static_box_data { display: flex; flex-direction: column; align-items: center; gap: 50px; .static_box__tiles { display: flex; justify-content: center; column-gap: 100px; row-gap: 50px; .static_box_tile { text-align: center; img { margin-bottom: 17px; } p { color: $cDarkRed; font-style: normal; font-weight: 300; font-size: 16px; margin: 0; text-transform: uppercase; strong { font-weight: 700; font-style: italic; } } } } } @media (max-width: 767px) { .static_box_data { gap: 20px; .box_title { margin-bottom: 0 !important; font-size: 18px !important; } .static_box__tiles { flex-direction: column; row-gap: 20px; .static_box_tile { p { font-size: 12px; } } } } } } //* ~~~~~~~~~~~~~~~~~~~~~~ *// //* Home page .shop_index { overflow-x: hidden; .container { max-width: 1700px; } } //* O nas #shop_infopage8, #shop_infopage18 { .breadcrumbs { display: none; } #infopage8, #infopage18 { margin-top: 120px; margin-bottom: 50px; .boxhead { display: none; } .container { max-width: 1200px; } .box-01 { display: grid; grid-template-columns: 1fr auto; column-gap: 80px; row-gap: 20px; grid-template-areas: 'box_col_1 box_col_2'; .box_col_1 { grid-area: box_col_1; h1 { color: $cDarkRed; font-weight: 300; font-size: 74px; margin-top: 0; margin-bottom: 20px; line-height: 111%; strong { font-weight: 700; font-style: italic; } } p { color: $cBlack; font-style: normal; font-weight: 300; font-size: 16px; margin: 24px 0; strong { font-weight: 400; font-size: 14px; } } } .box_col_2 { grid-area: box_col_2; text-align: right; } } .box-02 { display: grid; grid-template-columns: minmax(200px, 480px) 1fr; column-gap: 100px; .box_col_1 { p { color: $cBlack; font-style: normal; font-weight: 400; font-size: 14px; } } .box_col_2 { display: flex; flex-direction: row; align-items: center; column-gap: 80px; .box-02__tile-1, .box-02__tile-2 { p { color: #9a9a9a; font-size: 14px; text-align: center; } } } } .box-03 { width: 1400px; margin-left: 50%; transform: translateX(-50%); } .box-04 { display: grid; grid-template-columns: 1fr minmax(200px, 500px); align-items: center; column-gap: 100px; .box_col_1 { p { width: 100%; max-width: 470px; color: $cBlack; font-style: normal; font-weight: 400; font-size: 14px; } } } .box-06 { text-align: center; .box_title { margin-bottom: 30px; } } } @media (max-width: 979px) { #infopage8, #infopage18 { margin-top: 0px; .shop_infopage8__wrapper { display: flex; flex-direction: column; } .box-01 { order: 1; grid-template-columns: 1fr; grid-template-areas: 'box_col_2' 'box_col_1'; padding-bottom: 30px; .box_col_1 { h1 { font-size: 50px; } } .box_col_2 { text-align: center; } } .box-02 { order: 3; grid-template-columns: 1fr; row-gap: 60px; padding-top: 60px; padding-bottom: 0px; .box_col_2 { justify-content: center; flex-direction: column; row-gap: 60px; } } .box-03 { order: 2; padding-bottom: 0; } .box-04 { order: 4; grid-template-columns: 1fr; padding-top: 60px; padding-bottom: 0px; gap: 20px; } .static_box_t1 { order: 5; } .box-06 { order: 6; padding-top: 0; .box_title { text-align: left; } iframe { height: 300px; } } } } @media (max-width: 767px) { #infopage8, #infopage18 { .box-01 { .box_col_1 { h1 { font-size: 30px; } } } } } @media (max-width: 500px) { #infopage8, #infopage18 { .box-06 { iframe { height: 160px; } } } } } //* Blog .shop_news_list { .breadcrumbs { display: none; } #box_articlelist { padding-top: 110px; .articls_list { article { display: grid; align-items: center; column-gap: 60px; &:nth-child(2n + 1) { grid-template-columns: 1fr minmax(300px, 415px); grid-template-areas: 'image text'; } &:nth-child(2n) { grid-template-columns: minmax(300px, 415px) 1fr; grid-template-areas: 'text image'; } .article_img { grid-area: image; img { width: 100%; object-fit: cover; } } .article_data { grid-area: text; .article-date { color: $cDarkGray; font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.6; } .article-name { h2 { color: $cRed; font-style: normal; font-weight: 700; font-size: 24px; line-height: 1.1; margin-top: 14px; margin-bottom: 14px; text-transform: uppercase; } } p { color: $cBlack; font-style: normal; font-weight: 400; font-size: 16px; } .btn-3 { letter-spacing: 0.125em; text-transform: uppercase; margin-top: 15px; } } } } } @media (max-width: 979px) { #box_articlelist { padding-top: 60px; .articls_list { article { grid-template-columns: 1fr !important; grid-template-areas: 'image' 'text' !important; &:not(:last-child) { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #ebebeb; } .article_data { padding-top: 10px; .article-name { h2 { margin-top: 0; } } p { font-weight: 300; } } } } } } @media (max-width: 500px) { #box_articlelist { padding-top: 30px; .articls_list { article { .article_data { .article-name { h2 { font-size: 16px; margin-top: 5px; } } p { font-size: 12px; font-weight: 300; } .btn-3 { font-size: 10px; padding: 8px 26px; } } } } } } //! #box_articlelistsmall { display: none; } } //* Blog (single page) .shop_news { .breadcrumbs { display: none; } #box_article { padding-top: 40px; margin-bottom: 110px; .article-data { display: flex; flex-direction: column; align-items: center; .article-date { color: $cBlack; } .article-image { padding-bottom: 30px; padding-right: 0; } .article_container { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; margin-top: 30px; } .article_title { h2 { color: $cRed; font-style: italic; font-weight: 700; font-size: 32px; line-height: 38px; text-transform: uppercase; text-align: center; margin-bottom: 30px; } } .article_subtitle { p { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; text-align: center; } } h2 { color: $cDarkRed; font-style: normal; font-weight: 300; font-size: 36px; line-height: 1.3; text-transform: uppercase; margin-top: 0; margin-bottom: 40px; strong { font-style: italic; } } p { color: $cTxt; margin: 0; font-weight: 400; font-size: 16px; line-height: 35px; } ul { list-style: none; padding-left: 0; li { position: relative; color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 35px; padding-left: 48px; &::before { content: ''; position: absolute; width: 9px; height: 9px; background: $cPink; top: 13px; left: 0; border-radius: 50%; } } } blockquote { position: relative; background: $cRed; padding: 50px 70px 40px 140px; margin-left: 0; color: $cWhite; font-weight: 400; font-size: 16px; line-height: 1.7; text-align: justify; &::before { content: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/quote-white.svg'); position: absolute; left: 0; top: 50px; left: 40px; } p { color: $cWhite; font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; text-align: right; margin-top: 12px; } } .article_share_in { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 830px; margin-left: auto; margin-right: auto; margin-top: 100px; h3 { color: $cRed; font-style: normal; font-weight: 300; font-size: 33px; line-height: 40px; text-transform: uppercase; width: 100%; max-width: 400px; strong { font-style: italic; } } .article_share_icons { display: flex; flex-direction: row; align-items: center; justify-content: center; column-gap: 50px; row-gap: 25px; width: 100%; max-width: 300px; } } } } #box_articlelistsmall { margin-bottom: 180px; } @media (max-width: 767px) { #box_article { .article-data { .article_container { margin-top: 10px; .article_share_in { flex-direction: column; align-items: center; margin-top: 50px; h3 { text-align: center; } } } .article-date { width: 100%; } .article_title { h2 { text-align: left; margin-bottom: 10px; font-size: 26px; } } .article_subtitle { p { text-align: left; font-size: 16px; } } h2 { font-size: 26px; margin-bottom: 20px; } ul { li { padding-left: 30px; } } p { img { height: auto; } } blockquote { padding: 90px 20px 20px 20px; &::before { top: 10px; left: 10px; transform: scale(0.6); } } } } #box_articlelistsmall { margin-bottom: 100px; } } @media (max-width: 500px) { #box_article { .article-data { .article-date { width: 100%; } .article_title { h2 { text-align: left; font-size: 20px; } } .article_subtitle { p { font-weight: 300; font-size: 14px; } } h2 { font-weight: 300; font-size: 16px; } p { font-size: 14px; } ul { li { font-size: 14px; } } } } #box_articlelistsmall { margin-bottom: 50px; } } } //* Szkolenia #shop_infopage13 { .breadcrumbs { display: none; } #infopage13 { margin-bottom: 100px; overflow: initial; .boxhead { display: none; } .szkolenia_page { .szkolenia_page__wrapper { .box-01 { position: relative; margin-bottom: 70px; display: flex; align-items: center; width: 100vw; margin-left: 50%; transform: translateX(-50%); background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/szkolenia_hero.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 586px; &::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 62%; min-width: 850px; background: $cRed; mix-blend-mode: multiply; opacity: 0.9; } .box-01__wrapper { padding: 0 20px; width: calc(100% - 40px); max-width: 686px; position: relative; &::before { content: ''; position: absolute; width: 21px; height: 21px; border-radius: 50px; background-color: $cPink; top: -35px; left: 25px; } h1 { color: $cPink; font-weight: 300; font-size: 45px; text-transform: uppercase; width: 100%; max-width: 630px; strong { font-style: italic; font-weight: 700; } } p { color: $cPink; font-weight: 400; font-size: 20px; } } } .box-02 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); align-items: center; .box_col_1 { h2 { color: $cRed; font-size: 45px; font-weight: 300; width: 100%; max-width: 400px; strong { font-style: italic; font-weight: 700; } } } .box_col_2 { display: flex; align-items: center; justify-content: center; gap: 20px; .img_box_1, .img_box_2 { position: relative; } } } .box-03 { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); align-items: center; column-gap: 80px; h2 { color: $cDarkRed; font-style: normal; font-weight: 300; font-size: 24px; width: 100%; max-width: 460px; margin-top: 0; strong { display: inline-block; font-weight: 700; font-style: italic; } } p { color: $cBlack; font-style: normal; font-weight: 400; font-size: 14px; margin: 0; } } } } } @media (max-width: 1200px) { #infopage13 { .szkolenia_page { .szkolenia_page__wrapper { .box-03 { display: flex; flex-direction: column-reverse; gap: 30px; } } } } } @media (max-width: 979px) { #infopage13 { .szkolenia_page { .szkolenia_page__wrapper { .box-01 { min-height: 450px; .box-01__wrapper { h1 { font-size: 32px; max-width: 420px; } p { font-size: 16px; max-width: 420px; } } } .box-02 { grid-template-columns: 1fr; gap: 20px; padding-top: 0; .box_col_1 { h2 { margin: 0 auto; font-size: 30px; max-width: 260px; text-align: center; } } } .box-03 { padding-top: 0; padding-bottom: 0; } } } } } @media (max-width: 767px) { #infopage13 { .szkolenia_page { .szkolenia_page__wrapper { .box-02 { .box_col_1 { h2 { font-size: 20px; max-width: 200px; } } .box_col_2 { flex-direction: column; .img_box_1, .img_box_2 { width: 200px; } } } } } } } @media (max-width: 500px) { #infopage13 { .szkolenia_page { .szkolenia_page__wrapper { .box-01 { min-height: 250px; background-position-x: 65%; .box-01__wrapper { h1 { font-size: 20px; max-width: 250px; } p { font-size: 12px; max-width: 250px; } } } .box-02 { .box_col_2 { .img_box_1, .img_box_2 { width: 160px; p { font-size: 18px; } } } } .box-03 { .box_col_1 { width: 100vw; img { width: 100%; } } .box_col_2 { h2 { font-size: 16px; } p { font-size: 12px; } } } } } } } //! #baner_3 { display: none; } } //* Kontakt #shop_infopage24, #shop_infopage9 { .main { background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/kontakt-img.jpg'); background-position: right top; background-repeat: no-repeat; min-height: 844px; background-size: auto 100%; .container { max-width: 1400px; } } #infopage24, #infopage9 { .boxhead { display: none; } .box_contat { margin-top: 120px; .box_contat__wrapper { position: relative; width: 100%; max-width: 1000px; background: $cRed; padding: 45px 45px 80px 45px; margin-bottom: 90px; &::after { content: ''; position: absolute; right: 45px; top: 0; height: 100%; width: 107px; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/logo_pink_vertical.svg'); background-repeat: no-repeat; background-position: center; } .box_contat__title { width: 100%; max-width: 605px; margin-bottom: 60px; h1 { color: $cPink; font-size: 74px; font-weight: 300; margin: 0; strong { font-style: italic; font-weight: 700; } } } .box_cols { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 130px; row-gap: 70px; .box_col_1, .box_col_2 { .mini_title { position: relative; padding-left: 20px; margin-bottom: 12px; &::before { content: ''; position: absolute; width: 10px; height: 10px; left: 0; top: 50%; background: $cPink; border-radius: 50%; transform: translateY(-50%); } h2 { color: $cPink; font-style: italic; font-weight: 700; font-size: 24px; margin: 0; } } ul { list-style: none; padding-left: 20px; li { color: $cPink; font-style: normal; font-weight: 350; font-size: 16px; padding: 10px 0; a { color: $cPink; font-style: normal; font-weight: 350; font-size: 16px; } } } } } } .box_share { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 80px; row-gap: 40px; padding: 0 50px; .box_col_1 { h2 { color: $cRaspberry; font-style: normal; font-weight: 400; font-size: 24px; margin: 0; strong { font-weight: 800; font-style: italic; } } } .box_col_2 { .box_share_icons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 33px; img { max-width: 50px; } } } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 1200px) { .main { position: relative; background-image: none; &::before { position: absolute; left: 0; top: 0; width: 100%; height: 550px; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/kontakt-img.jpg'); background-position: right top; background-repeat: no-repeat; background-size: cover; } } #infopage24, #infopage9 { .box_contat { .box_contat__wrapper { max-width: 800px; } } } } @media (max-width: 979px) { .main { min-height: unset; &::before { height: 330px; } } #infopage24, #infopage9 { .box_contat { .box_contat__wrapper { width: calc(100% - 40px); padding: 20px; margin-bottom: 60px; &::after { display: none; } .box_contat__title { margin-bottom: 40px; h1 { font-size: 50px; } } .box_cols { column-gap: 50px; .box_col_1, .box_col_2 { .mini_title { h2 { font-size: 22px; } } ul { li { font-size: 14px; padding: 5px 0; a { font-size: 14px; padding: 5px 0; } } } } } } .box_share { row-gap: 15px; justify-content: center; flex-direction: column; padding: 0; .box_col_1 { h2 { text-align: center; font-size: 20px; strong { font-weight: 800; font-style: italic; } } } .box_col_2 { .box_share_icons { justify-content: center; gap: 30px; } } } } } } @media (max-width: 767px) { .main { &::before { left: -20px; width: calc(100% + 40px); height: 400px; } } #infopage24, #infopage9 { .box_contat { .box_contat__wrapper { margin-bottom: 30px; width: fit-content; margin-left: auto; margin-right: auto; .box_contat__title { margin-bottom: 25px; h1 { font-size: 25px; } } .box_cols { row-gap: 10px; flex-direction: column; .box_col_1, .box_col_2 { .mini_title { h2 { font-size: 17px; } } ul { li { font-size: 12px; a { font-size: 12px; } } } } } } .box_share { .box_col_1 { h2 { font-size: 18px; } } } } } } } //* Regulamin #shop_infopage3, #shop_infopage19 { .container { max-width: 1400px; .s-row { .s-grid-12 { width: 100%; } } } #infopage3, #infopage19 { margin-bottom: 150px; padding-top: 60px; .boxhead { background: none; text-align: center; margin-bottom: 0; line-height: 0; span { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 36px; line-height: 43px; letter-spacing: normal; padding: 0; } } .box_regulamin { > h2 { margin: 12px 0; } h2 { color: $cDarkRed; font-style: normal; font-weight: 300; font-size: 20px; line-height: 24px; text-align: center; a { color: $cDarkRed; font-style: normal; font-weight: 300; font-size: 20px; line-height: 24px; text-align: center; } } .regulamin_data { h2 { font-weight: 400; } ul { list-style: decimal; padding-left: 20px; margin: 0; li { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; a { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; } ul { list-style: none; padding: 0; } } } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 979px) { #infopage3, #infopage19 { .boxhead { span { font-size: 28px; font-style: italic; font-weight: 800; } } .box_regulamin { h2 { font-size: 17px; } } } } @media (max-width: 767px) { #infopage3, #infopage19 { margin-bottom: 70px; .boxhead { span { font-size: 24px; } } .box_regulamin { .regulamin_data { h2 { font-size: 14px; } ul { li { font-size: 12px; line-height: 24px; a { font-size: 12px; line-height: 24px; } } } } } } } } //* Zwroty i reklamacje #shop_infopage7, #shop_infopage20 { .container { max-width: 1400px; .s-row { .s-grid-12 { width: 100%; } } } #infopage7, #infopage20 { padding-top: 60px; margin-bottom: 100px; .boxhead { background: none; text-align: center; margin-bottom: 0; line-height: 0; span { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 36px; line-height: 43px; letter-spacing: normal; padding: 0; } } .box_complaints { p { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; margin: 0; strong { font-weight: 600; } } a { display: block; color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; text-decoration: underline; } .complaints_data { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 50px; .complaints_tile { h2 { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 20px; line-height: 24px; text-transform: uppercase; } } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 979px) { #infopage7, #infopage20 { .boxhead { span { font-size: 28px; font-style: italic; font-weight: 800; } } .box_complaints { h2 { font-size: 17px; } } } } @media (max-width: 767px) { #infopage7, #infopage20 { margin-bottom: 70px; .boxhead { span { font-size: 24px; line-height: 26px; } } .box_complaints { ul { li { font-size: 12px; line-height: 24px; a { font-size: 12px; line-height: 24px; } } } p { font-size: 12px; line-height: 24px; } a { font-size: 12px; line-height: 24px; } .complaints_data { grid-template-columns: 1fr; .complaints_tile { h2 { font-size: 14px; text-align: center; } } } } } } } //* Polityka prywatności #shop_infopage11, #shop_infopage21 { .container { max-width: 1400px; .s-row { .s-grid-12 { width: 100%; } } } #infopage11, #infopage21 { padding-top: 60px; margin-bottom: 100px; .boxhead { background: none; text-align: center; margin-bottom: 0; line-height: 0; span { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 36px; line-height: 43px; letter-spacing: normal; padding: 0; } } .box_policy { p { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; margin: 0; strong { font-weight: 600; } } a { display: block; color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; text-decoration: underline; } .policy_data { h2 { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 20px; line-height: 24px; text-transform: uppercase; text-align: center; } ul { list-style: decimal; padding-left: 20px; margin: 0; li { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; a { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; } ul { list-style: none; padding: 0; } } } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 979px) { #infopage11, #infopage21 { .boxhead { span { font-size: 28px; font-style: italic; font-weight: 800; } } .box_policy { h2 { font-size: 17px; } } } } @media (max-width: 767px) { #infopage11, #infopage21 { margin-bottom: 70px; .boxhead { span { font-size: 24px; } } .box_policy { .policy_data { h2 { font-size: 14px; } ul { li { font-size: 12px; line-height: 24px; a { font-size: 12px; line-height: 24px; } } } p { font-size: 12px; line-height: 24px; } } } } } } //* Formy płatności #shop_infopage10, #shop_infopage22 { .container { max-width: 1400px; .s-row { .s-grid-12 { width: 100%; } } } #infopage10, #infopage22 { padding-top: 60px; margin-bottom: 100px; .boxhead { background: none; text-align: center; margin-bottom: 0; line-height: 0; span { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 36px; line-height: 43px; letter-spacing: normal; padding: 0; } } .box_payment { p { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; margin: 0; strong { font-weight: 600; } } a { display: block; color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; text-decoration: underline; } img { width: 100%; } .payment_data { ul { list-style: decimal; padding-left: 20px; margin: 0; li { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; strong { color: $cDarkRed; } a { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; } ul { list-style: none; padding: 0; } } } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 979px) { #infopage10, #infopage22 { .boxhead { span { font-size: 28px; font-style: italic; font-weight: 800; } } .box_payment { h2 { font-size: 17px; } } } } @media (max-width: 767px) { #infopage10, #infopage22 { margin-bottom: 70px; .boxhead { span { font-size: 24px; } } .box_payment { .payment_data { h2 { font-size: 14px; } ul { li { font-size: 12px; line-height: 24px; a { font-size: 12px; line-height: 24px; } } } p { font-size: 12px; line-height: 24px; } } } } } } //* STREFA WIEDZY #shop_infopage15, #shop_infopage25 { .container { max-width: 1400px; .s-row { .s-grid-12 { width: 100%; } } } #infopage15, #infopage25 { padding-top: 60px; margin-bottom: 100px; .boxhead { background: none; text-align: center; margin-bottom: 0; line-height: 0; span { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 36px; line-height: 43px; letter-spacing: normal; padding: 0; } } .box_payment { p { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; margin: 0; strong { font-weight: 600; } } a { display: block; color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; text-decoration: underline; } img { width: 100%; } .payment_data { ul { list-style: decimal; padding-left: 20px; margin: 0; li { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; strong { color: $cDarkRed; } a { color: $cTxt; font-style: normal; font-weight: 400; font-size: 16px; line-height: 36px; } ul { list-style: none; padding: 0; } } } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 979px) { #infopage15, #infopage25 { .boxhead { span { font-size: 28px; font-style: italic; font-weight: 800; } } .box_payment { h2 { font-size: 17px; } } } } @media (max-width: 767px) { #infopage15, #infopage25 { margin-bottom: 70px; .boxhead { span { font-size: 24px; } } .box_payment { .payment_data { h2 { font-size: 14px; } ul { li { font-size: 12px; line-height: 24px; a { font-size: 12px; line-height: 24px; } } } p { font-size: 12px; line-height: 24px; } } } } } } //* Czas i koszty dostawy #shop_infopage4, #shop_infopage23 { .container { max-width: 1400px; .s-row { .s-grid-12 { width: 100%; } } } #infopage4, #infopage23 { padding-top: 60px; margin-bottom: 100px; .boxhead { background: none; text-align: center; margin-bottom: 0; line-height: 0; span { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 36px; line-height: 43px; letter-spacing: normal; padding: 0; } } .box_delivery { .delivery_data { text-align: center; p { color: $cTxt; font-style: normal; font-weight: 400; font-size: 20px; line-height: 36px; margin: 0; } h2 { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 20px; line-height: 36px; margin: 0; strong { font-style: italic; } } img { margin-top: 15px; margin-bottom: 15px; } } .delivery_table { table, td { border: 1px solid #c4c4c4; border-collapse: collapse; } th { border-left: 1px solid #c4c4c4; border-right: 1px solid #c4c4c4; border-collapse: collapse; } table { position: relative; margin-top: 5px; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; border-collapse: collapse; &::before { content: ''; position: absolute; top: -6px; left: -1px; right: 0; height: 6px; background: $cRed; } thead { th { color: $cDarkRed; font-style: normal; font-weight: 700; font-size: 16px; line-height: 36px; text-transform: uppercase; padding: 5px 10px; &:nth-child(1) { width: 39%; } &:nth-child(2) { width: 28%; } &:nth-child(3) { width: 33%; } } } tbody { tr { td { color: $cBlack; font-style: normal; font-weight: 400; font-size: 14px; line-height: 17px; text-align: center; padding: 15px 10px; } } } } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 979px) { #infopage4, #infopage23 { .boxhead { span { font-size: 28px; font-style: italic; font-weight: 800; } } .box_delivery { h2 { font-size: 17px; } } } } @media (max-width: 767px) { #infopage4, #infopage23 { margin-bottom: 70px; .boxhead { span { font-size: 24px; } } .box_delivery { .delivery_data { h2 { font-size: 14px; } p { font-size: 12px; line-height: 24px; } } .delivery_table { table { thead { th { font-size: 10px; } } tbody { tr { td { font-size: 9px; } } } } } } } } @media (max-width: 400px) { #infopage4, #infopage23 { .box_delivery { .delivery_table { table { thead { th { // font-size: 10px; padding: 5px; line-height: 1.1; } } tbody { tr { td { // font-size: 9px; padding: 5px; } } } } } } } } } //* Produkty powiązane #box_productrelated { .innerbox { padding: 0; } .product { padding-top: 25px; .box_produkt_img { position: relative; .basket { position: absolute; bottom: 0; right: 16px; padding: 10px; border-radius: 50px; } } .productnamewrap { text-align: left; margin: 10px 0 10px; padding: 0 10px; .productname { color: $cBlack; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; } } .price { flex-direction: row-reverse; align-items: center; column-gap: 15px; min-height: auto; em { color: $cBlack; font-style: normal; font-weight: 700; font-size: 16px; } del { color: #9a9a9a; font-style: normal; font-weight: 400; font-size: 13px; } } } &.slider { .slider-nav-left { background-color: $cWhite; border-radius: 50%; } .slider-nav-right { background-color: $cWhite; border-radius: 50%; } } } //* box_recommendations_39 #box_recommendations_39 { .innerbox { padding: 0; } .product { padding-top: 25px; max-width: 313px; .box_produkt_img { position: relative; .basket { position: absolute; bottom: 0; right: 16px; padding: 10px; border-radius: 50px; } } .productnamewrap { text-align: left; margin: 10px 0 10px; padding: 0 10px; height: auto; .productname { color: $cBlack; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; } } .price { flex-direction: row-reverse; align-items: center; column-gap: 15px; min-height: auto; em { color: $cBlack; font-style: normal; font-weight: 700; font-size: 16px; } del { color: #9a9a9a; font-style: normal; font-weight: 400; font-size: 13px; } } } &.slider { .slider-nav-left { background-color: $cWhite; border-radius: 50%; } .slider-nav-right { background-color: $cWhite; border-radius: 50%; } } @media (max-width: 1200px) { .product { max-width: 313px; } } @media (max-width: 979px) { .product { max-width: 350px; } } @media (max-width: 600px) { .product { max-width: unset; } } } //* Pojedynczy produkt .shop_product { #box_productfull { .scrollmagic-pin-spacer { float: left; .productimg { width: 100%; } } .product_image_box { position: relative; display: flex; flex-direction: row-reverse; gap: 25px; .tags { li { img { width: 100px; } } } .product_image { position: relative; width: calc(100% - 100px); margin-top: 50px; .product_swiper { .swiper-slide { text-align: center; .photo { width: 100%; height: 100%; object-fit: contain; } } } .product_swiper_arrows { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 35px; margin-top: 30px; margin-bottom: 15px; .swiper-button-prev { position: relative; height: auto; margin-top: 0; left: auto; &::after { color: $cDarkRed; font-size: 14px; font-weight: 900; } } .swiper-button-next { position: relative; height: auto; margin-top: 0; right: auto; &::after { color: $cDarkRed; font-size: 14px; font-weight: 900; } } } } .product_thumbs { width: 100%; max-width: 81px; .product_swiper_thumbs { height: 400px; .swiper-wrapper { flex-direction: column; .swiper-slide { position: relative; cursor: pointer; opacity: 0.4; transition: all 250ms ease; overflow: hidden; &.swiper-slide-thumb-active { opacity: 0.9; } &::before { content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid $cGray; z-index: 10; } .photo { position: relative; height: 100%; width: 100%; object-fit: contain; } } } } } } .boxhead { &.mb-0 { margin-bottom: 0; line-height: 0; } .product_name { color: $cRed; font-style: normal; font-weight: 400; font-size: 32px; letter-spacing: 0; line-height: 1.1; } h3 { color: $cDarkRed; font-style: normal; font-weight: 700; font-size: 16px; letter-spacing: 0; } } .basket { margin-bottom: 45px; .price { flex-direction: row; align-items: center; gap: 15px; float: none; margin-bottom: 40px; del { color: #9a9a9a; font-size: 24px; } } .availability, .delivery, .code { color: $cBlack; font-style: normal; font-weight: 350; font-size: 12px; margin: 10px 0; .first { min-width: unset; } } .form-basket { .label { color: $cBlack; font-weight: 350; font-size: 12px; } .stock-options { .option_color { a { position: relative; width: 37px; height: 37px; border-radius: 50px !important; border: none; box-shadow: none !important; margin-right: 7px; &::before { content: ''; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 50px; transition: 200ms ease; opacity: 0; box-shadow: inset 0 0 0 4px #d7d5d5 !important; } &.current { &::before { opacity: 1; } } } } } .addtobasket-container { display: flex; flex-direction: row; align-items: center; gap: 16px; .quantity_wrap { float: none; width: auto; .number-wrap { display: grid; grid-template-areas: 'number plus' 'number minus'; border: 1px solid #ccc; input { grid-area: number; margin-bottom: 0; border-radius: 0; border-left: none; border-top: none; border-bottom: none; color: $cDarkGray; font-style: normal; font-weight: 400; font-size: 13px; height: 39px; min-height: 39px; &:focus { border-color: #ccc; } &.short { visibility: hidden; } &.short_placeholder { padding: 13px; } } .minus { grid-area: minus; display: flex; align-items: center; justify-content: center; padding: 0 4px; cursor: pointer; min-width: 12px; } .plus { grid-area: plus; display: flex; align-items: center; justify-content: center; padding: 0 4px; cursor: pointer; min-width: 12px; } } .unit { display: none; } } .button_wrap { min-width: fit-content; float: none; width: auto; .btn-2 { &.fixed { position: fixed; bottom: 0; left: 40px; width: calc(100% - 80px); } span { display: flex; align-items: flex-start; justify-content: center; height: 17px; position: relative; padding-left: 30px; &::before { content: ''; position: absolute; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/koszyk-icon.svg'); background-size: 17px 17px; left: 0; top: 0; width: 17px; height: 17px; filter: invert(1); } } } } } } } .productdetails-more-details { .innerbox { padding: 0; } p { color: $cBlack; font-style: normal; font-weight: 300; font-size: 14px; &.inci_text { font-size: 12px; line-height: 1.3; } } } } #box_custom38 { margin: 100px 0; } @media (max-width: 979px) { #box_productfull { .product_image_box { .product_image { width: 100%; margin-top: 0; } .product_thumbs { display: none; } } } } @media (max-width: 767px) { #box_productfull { margin-bottom: 20px; .boxhead { .product_name { font-size: 24px; } } .basket { width: 100%; margin-top: 10px; margin-bottom: 30px; .price { margin-bottom: 30px; em { font-size: 18px; } } .form-basket { .addtobasket-container { .quantity_wrap { display: none; } .button_wrap { width: 100%; .addtobasket { font-size: 14px; padding: 12px 50px; width: 100%; } } } } } } #box_custom38 { margin: 50px 0; } } @media (max-width: 500px) { #box_productfull { margin-bottom: 20px; .boxhead { .product_name { color: $cBlack; font-size: 18px; } } .basket { .price { em { font-size: 14px; } } .form-basket { .addtobasket-container { .button_wrap { .addtobasket { padding: 12px 20px; } } } } } } } } //* Lista produktów .shop_product_list { #box_mainproducts { margin-bottom: 100px; .boxhead { .category-name { display: none; } .sort-and-view { .gotourl { color: $cDarkRed !important; padding: 0; border: none; padding-right: 35px !important; background-position-x: right; font-family: 'Graphie', sans-serif; text-align: right; font-style: normal; font-weight: 400; font-size: 14px; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/mini_b_arrow.svg'); background-size: 10px !important; &:focus { outline: none; } &:active { background-color: transparent; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/mini_b_arrow.svg'); } } } } .products { &.viewphot { .product { padding-top: 25px; .box_produkt_img { position: relative; .basket { position: absolute; bottom: 0; right: 16px; padding: 10px; border-radius: 50px; } } .prodname { .productname { text-align: left; margin: 10px 0 10px; padding: 0 10px; height: auto; color: $cBlack; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; } } .price { flex-direction: row-reverse; align-items: center; column-gap: 15px; min-height: auto; em { color: $cBlack; font-style: normal; font-weight: 700; font-size: 16px; } del { color: #9a9a9a; font-style: normal; font-weight: 400; font-size: 13px; } } .box_product_mobile_btn { float: left; width: 100%; .basket { float: left; width: 100%; fieldset { width: 100%; } .btn-2 { padding: 12px 30px; font-size: 12px; width: 100%; span { position: relative; padding-left: 30px; &::before { content: ''; position: absolute; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/koszyk-icon.svg'); background-size: 17px 17px; left: 0; top: 0; width: 17px; height: 17px; filter: invert(1); } } } } } } } } @media (max-width: 1200px) { .products { &.viewphot { .product { .prodimage { span { min-height: unset; } } } } } } @media (min-width: 768px) { .products { &.viewphot { .product { .box_product_mobile_btn { display: none; } } } } } @media (max-width: 767px) { .products { &.viewphot { display: grid; grid-template-columns: 1fr 1fr; &::before { display: none; } &::after { display: none; } .product { .box_produkt_img { .basket { display: none; } } } } } } @media (max-width: 500px) { .products { &.viewphot { grid-template-columns: 1fr; .product { padding-top: 0; } } } } } #box_recommendations_39 { margin-bottom: 100px; } #produkts_text_1 { margin-bottom: 60px; } #box_custom38 { margin-bottom: 100px; } #box_newsletter { @media screen and (min-width: 767px) { padding-top: 70px; } } } //* Koszyk etapy .basket-steps { ol { li { a, span { color: #797979 !important; font-weight: 400; font-size: 12px; line-height: 16px; } &::after { width: 60%; left: 70%; } &::before { display: none; } &.active-step { img { filter: invert(136%) sepia(97%) saturate(6571%) hue-rotate(26deg) brightness(90%) contrast(137%); } span { color: $cRed !important; font-weight: 700; } } } } } //* Koszyk title .basket-page-title { color: $cRed; font-style: italic; font-weight: 800; font-size: 20px; line-height: 24px; text-align: center; text-transform: uppercase; margin-bottom: 30px; margin-top: 40px; @media (min-width: 481px) { display: none; } } //* Koszyk .shop_basket { .basket_head { margin: 40px 0 40px; h2 { color: $cRed; font-style: normal; font-weight: 600; font-size: 36px; line-height: 43px; text-align: center; text-transform: uppercase; } } .alert-info { background-color: transparent; .basket_empty_box { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 180px; h2 { color: $cRed; font-style: normal; font-weight: 300; font-size: 20px; line-height: 22px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } p { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 12px; line-height: 20px; } @media (max-width: 979px) { margin-bottom: 100px; } } } #box_basketlist { margin-bottom: 100px; .boxhead { display: none; } .productlist { thead { border-bottom: 1px solid #c2c2c2; tr { td { border-right: none; color: $cBlack; font-style: normal; font-weight: 400; font-size: 14px; } } } tbody { border-bottom: 1.1px solid #c2c2c2; tr { height: 130px; * { color: $cBlack; } td { &.name { a { font-style: normal; font-weight: 400; font-size: 14px; text-decoration: none; } } &.time { font-weight: 700; } &.price { font-weight: 700; } &.sum { font-weight: 700; } &.quantity { .quantity_wrapper { display: flex; align-items: center; border: 1px solid #c2c2c2; * { color: #c2c2c2; } .unit { display: none; } .minus { padding: 10px 7px; font-size: 16px; cursor: pointer; } .plus { padding: 10px 7px; font-size: 14px; cursor: pointer; } input { width: 100% !important; border: none; padding: 10px 1px; margin: 0; min-width: 55px; &.short { display: none; } } } } } } } @media (max-width: 767px) { thead { display: none; } tbody { border-bottom: none; tr { display: grid; grid-template-areas: 'img name actions' 'img quantity sum'; grid-template-columns: 100px auto 100px; height: auto; &:not(:last-child) { border-bottom: 1px solid $cDarkGray; margin-bottom: 11px; padding-bottom: 11px; } td { border-bottom: none; &.img { grid-area: img; display: block !important; } &.name { grid-area: name; } &.quantity { grid-area: quantity; width: min-content; .quantity_wrapper { input { height: 30px; min-height: 30px; } .plus, .minus { padding: 5px 7px; } } } &.price { display: none; } &.sum { grid-area: sum; } &.actions { grid-area: actions; } } } } } @media (max-width: 500px) { tbody { tr { td { &.name { a { font-weight: 600; font-size: 11px; line-height: 1; } } &.quantity { .quantity_wrapper { input { font-size: 12px; min-width: 40px; } } } } } } } } #cart-options { .delivery-container { border-right: none; padding-right: 0; .deliverycountry { margin-bottom: 45px; select { color: #797979; border-radius: 0; padding: 17px 30px; background-color: transparent; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/mini_b_arrow.svg'); background-size: 15px; &:active { color: #797979; border-color: #d8d8d8; background-image: url('https://sklep744813.shoparena.pl/skins/user/rwd_primary_1/images/user/mini_b_arrow.svg'); background-position-x: 90%; background-size: 15px; } } } .delivery_choices { .delivery_choices_list { display: flex; flex-direction: column; gap: 10px; > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 25px; border: 1px solid #cbcbcb; .name { color: $cDarkRed; } .value { margin: 0; color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; } } } } } .payment-container { border-right: none; .payment_choice_list { display: flex; flex-direction: column; gap: 10px; > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 25px; border: 1px solid #cbcbcb; .name { color: $cDarkRed; } .value { margin: 0; color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; } } } } .summary-container { width: 32%; margin-top: 0; .summary_title { color: $cDarkRed; font-style: normal; font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: 0; text-transform: uppercase; margin: 10px 0; text-align: start; } .summary-wrapper { background: #f0f0f0; padding: 30px; .promo-container { .promocode { display: grid; align-items: center; grid-template-areas: 'promoTitle promoTitle' 'promoInput promoBtn'; .desc { grid-area: promoTitle; text-align: left; label { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 16px; } } .input { grid-area: promoInput; width: 100%; .shaded_inputwrap { width: 100%; input { border-radius: 0; height: 44px; padding: 10px 14px; color: $cBlack; font-style: normal; font-weight: 400; font-size: 14px; text-transform: uppercase; &:focus { border-color: #d8d8d8; } } } } .action { grid-area: promoBtn; } } } .recount { margin-bottom: 10px; #recalc { display: none; } > span { width: 100%; text-align: initial; display: flex; flex-direction: row; justify-content: space-between; .sum { margin: 0; } } .desc { color: $cDarkRed; font-weight: 400; font-size: 16px; margin-right: 5px; } .sum { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 20px; } } .deliveryhead { width: 100%; text-align: initial; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 10px; .cost { color: $cDarkRed; font-weight: 400; font-size: 16px; margin-right: 5px; } .value { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 20px; } } > .sum { width: 100%; text-align: initial; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 10px; margin-top: 0; .desc { color: $cDarkRed; font-weight: 400; font-size: 16px; margin-right: 5px; } .value { color: $cDarkRed; font-style: normal; font-weight: 700; font-size: 20px; } } } .buttons { display: flex; flex-direction: column; align-items: center; margin: 30px 0 0; .back { display: none; } .forward { width: 100%; max-width: 230px; .btn-2 { width: 100%; } } } } @media (max-width: 1200px) { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; .delivery-container { width: 100%; max-width: 100%; } .payment-container { width: 100%; max-width: 100%; } .summary-container { width: 100%; max-width: 100%; } } @media (max-width: 979px) { .summary-container { .summary-wrapper { .recount { .desc { font-size: 14px; } > span { .sum { font-size: 14px; } } } .deliveryhead { .cost, .value { font-size: 14px; } } > .sum { .desc, .value { font-size: 14px; } } } } } @media (max-width: 767px) { grid-template-columns: 1fr; .summary-container { .summary-wrapper { .promo-container { .promocode { .action { button { width: 100%; text-align: center; } } } } } } } @media (max-width: 500px) { .summary-container { .summary-wrapper { .promo-container { .promocode { grid-template-areas: 'promoTitle' 'promoInput' 'promoBtn'; .input { .shaded_inputwrap { input { margin-bottom: 0; } } } } } } } } } .delivery_title { color: $cDarkRed !important; font-style: normal; font-weight: 600 !important; font-size: 15px !important; line-height: 22px !important; letter-spacing: 0 !important; } @media (max-width: 500px) { .innerbox { padding: 0; } } } #box_custom38 { margin-bottom: 100px; } #box_recommendations_39 { margin-bottom: 95px; } @media (max-width: 767px) { #box_recommendations_39 { margin-bottom: 50px; } .basket_head { h2 { font-style: italic; font-weight: 800; font-size: 20px; line-height: 24px; } } } } //* Koszuk (Krok - 2) .shop_basket_step2 { #box_basketstep2 { margin-bottom: 110px; margin-top: 75px; .box_basketstep2__wrapper { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 830px; margin: 0 auto; column-gap: 70px; row-gap: 40px; align-items: center; .box_basketstep2__col { &.box_basketstep2__col_1 { .box_basketstep2__login { .basketstep2_login__title { margin-bottom: 25px; h3 { color: $cRed; font-size: 24px; line-height: 1.1; text-align: center; strong { font-style: italic; font-weight: 800; } } } .basketstep2_login__form { .login { input { border-radius: 0; } .shaded_inputwrap { color: #707070; text-align: center; font-weight: 400; font-size: 14px; } .form_btns { text-align: center; margin-top: 30px; } } } } } &.box_basketstep2__col_2 { background: #f2f2f2; .box_basketstep2__col_2__wrapper { padding: 90px 40px 70px 40px; } .basketstep2_info__title { margin-bottom: 25px; h3 { color: $cRed; font-size: 24px; line-height: 1.1; text-align: center; strong { font-style: italic; font-weight: 800; } } } .basketstep2_info_data { margin-bottom: 30px; ul { li { color: #707070; font-weight: 400; font-size: 14px; margin-left: 20px; list-style: disc; &:not(:last-child) { margin-bottom: 7px; } } } } form { &.register { margin-bottom: 0; fieldset { text-align: center; .btn-3 { width: 100%; max-width: 272px; border-radius: 0; } } } } .box_buy_no_reg { background: $cRed; form { margin-bottom: 0; padding: 45px 40px; text-align: center; .btn-1 { text-transform: uppercase; border-radius: 0; padding: 12px 12px; } } } } } } } //! .breadcrumbs { display: none; } #box_custom38 { display: none; } #baner_3 { display: none; } .footer { display: block; } @media (max-width: 979px) { #box_basketstep2 { margin-bottom: 50px; margin-top: 40px; .box_basketstep2__wrapper { grid-template-columns: 1fr; .box_basketstep2__col { &.box_basketstep2__col_2 { background: transparent; .box_basketstep2__col_2__wrapper { padding: 0 30px 40px 30px; } } } } } } } //* Koszuk (Krok - 3) .shop_basket_address { #box_basketaddress { .basket-step-border { .col_left__wrapper { padding: 20px; border: 1px solid #cbcbcb; .separator { color: #707070; font-weight: 600; font-size: 14px; line-height: 22px; } table { width: 100%; tbody { tr { display: flex; flex-direction: column; .label { width: 100%; text-align: start; } .input { input { width: 100%; border-radius: 0; margin-bottom: 15px; } select { width: 100%; border-radius: 0; margin-bottom: 15px; } .shaded_inputwrap { &::before { top: 14px; left: 8px; } } } } } .address_type { .input { display: flex; align-items: center; .radio-wrap { transform: translateY(-10%); } } } .select__phone { border-bottom: none; } } } .col_right { table { width: 100%; tbody { tr { display: flex; flex-direction: column; .label { width: 100%; text-align: start; } } } } textarea { resize: none; width: 100%; border-radius: 0; } } .col_title { h3 { color: $cDarkRed; font-weight: 600; font-size: 15px; line-height: 22px; text-transform: uppercase; } } } .other_addres_box { &.col_left__wrapper { margin-top: 36px; } } .bottombuttons { padding: 0 1.5em; .btn-3 { color: #757575; border-color: #757575; padding: 8px 38px; border-radius: 0; &:hover { color: $cWhite; border-color: $cRed; } } } } //! .logo-bar { display: flex; flex-direction: column; align-items: center; .link-logo { margin-bottom: 90px; } .basket-steps { margin-bottom: 90px; } } #box_custom38 { display: none; } #baner_3 { display: none; } .footer { display: block; .innerfooter { padding-top: 30px; padding-bottom: 30px; } .footer_box { .footer_cols { display: none; } .footer_right_box { .footer_signature { .footer_social { display: none; } } } } .footer_bottom { display: none; } } @media (max-width: 480px) { #box_basketaddress { .basket-step-border { .col_title { border-bottom: 1px solid #c2c2c2; margin-bottom: 20px; } .col_left__wrapper { border: none; padding: 0 0 20px 0; } } } } } //* Koszuk (Krok - 4) .shop_basket_step3 { #box_basketsummary { margin-bottom: 100px; .productlist { margin-bottom: 60px; thead { border-bottom: 5px solid $cRed; tr { td { border-right: none; color: $cDarkRed; font-style: normal; font-weight: 700; font-size: 16px; &:not(.name) { text-align: center; } } } } tbody { border-bottom: 1.1px solid #c2c2c2; tr { height: 130px; * { color: $cBlack; } td { &.name { a { font-weight: 600; font-size: 16px; text-decoration: none; } } &.quantity { text-align: center; } } } } @media (max-width: 767px) { thead { display: none; } tbody { border-bottom: none; tr { display: grid; grid-template-areas: 'img name sum' 'img quantity quantity'; grid-template-columns: 100px auto 100px; height: auto; &:not(:last-child) { border-bottom: 1px solid $cDarkGray; margin-bottom: 11px; padding-bottom: 11px; } td { border-bottom: none; &.img { grid-area: img; display: block !important; } &.name { grid-area: name; } &.time { display: none; } &.quantity { grid-area: quantity; width: fit-content; } &.price { display: none; } &.sum { grid-area: sum; } } } } } @media (max-width: 500px) { tbody { tr { td { &.name { a { font-weight: 600; font-size: 11px; line-height: 1; } } &.quantity { .quantity_wrapper { input { font-size: 12px; min-width: 40px; } } } } } } } } .order_summary_wrapper { display: grid; grid-template-columns: 1fr 450px; column-gap: 150px; .order_summary_tiles { display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 70px; column-gap: 20px; .separator { color: $cDarkRed; font-weight: 700; font-size: 16px; margin-top: 0; margin-bottom: 20px; } > .address { p, li { color: $cBlack; font-weight: 400; font-size: 14px; line-height: 1.6; a { color: $cDarkRed; text-decoration: none; } strong { color: $cDarkRed; font-weight: 700; font-size: 16px; } } } > .delivery { width: calc(50% - 10px); margin-right: 0; border-right: none; padding-left: 20px; border-left: 2px solid $cRed; } > .invoice { width: calc(50% - 10px); margin-right: 0; border-right: none; padding-left: 20px; border-left: 2px solid $cRed; } > .information { width: 100%; padding-left: 20px; border-left: 2px solid $cRed; } } .order_summary_information { .order_summary_information__wrapper { background-color: #f0f0f0; padding: 35px; .taxes { display: flex; flex-direction: revert; justify-content: space-between; margin-top: 0; text-align: start; margin-bottom: 10px; color: $cDarkRed; font-weight: 400; font-size: 16px; } .sum { display: flex; flex-direction: revert; justify-content: space-between; margin-top: 0; text-align: start; color: $cDarkRed; margin-bottom: 0; .label { margin-right: 0; top: 0; font-weight: 400; font-size: 16px; } .sum { padding: 0; font-weight: 700; font-size: 20px; } } form { margin-bottom: 0; .bottombuttons { text-align: center; margin-top: 30px; .btn-2 { float: none; } } } } } > form { margin-bottom: 0; margin-top: 50px; .btn-3 { color: #757575; border-color: #757575; border-radius: 0; text-transform: uppercase; letter-spacing: 0.125rem; &:hover { color: $cWhite; border-color: $cRed; } } } } @media (max-width: 1200px) { .order_summary_wrapper { column-gap: 50px; grid-template-columns: 1fr 400px; } } @media (max-width: 979px) { .order_summary_wrapper { grid-template-columns: 1fr; row-gap: 70px; .order_summary_tiles { .address { border-bottom: none; } } } } @media (max-width: 600px) { .productlist { margin-bottom: 30px; } .order_summary_wrapper { row-gap: 20px; .order_summary_tiles { flex-direction: column; gap: 20px; .address { width: 100%; padding: 0; border-left: none; .separator { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #c2c2c2; text-transform: uppercase; } } } .order_summary_information { .order_summary_information__wrapper { padding-top: 20px; background-color: transparent; padding: 20px 0 0 0; border-top: 1px solid #c2c2c2; .taxes { font-size: 14px; } .sum { .label { font-size: 14px; } .sum { font-size: 16px; } } } } > form { margin-top: 0; .bottombuttons { margin-top: 0; } } .order_summary_tiles { > .address { p { font-size: 12px; } } > .address { li { font-size: 12px; strong { font-size: 14px; } } } } } } @media (min-width: 481px) { .box_basketsummary_title { display: none; } } @media (max-width: 480px) { .box_basketsummary_title { color: $cDarkRed; font-weight: 600; font-size: 14px; line-height: 22px; text-transform: uppercase; margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid #a8a8a8; } } } //! .logo-bar { display: flex; flex-direction: column; align-items: center; .link-logo { margin-bottom: 90px; } .basket-steps { margin-bottom: 90px; } } #box_custom38 { display: none; } #box_recommendations_39 { display: none; } #baner_3 { display: none; } .footer { display: block; .innerfooter { padding-top: 30px; padding-bottom: 30px; } .footer_box { .footer_cols { display: none; } .footer_right_box { .footer_signature { .footer_social { display: none; } } } } .footer_bottom { display: none; } } } //* Koszyk POTWIERDZENIE .shop_basket_done { #box_basketfinal { margin-bottom: 120px; .box_basketfinal__wrapper { text-align: center; .box_basketfinal__img { margin-bottom: 25px; } .box_basketfinal__title { margin-bottom: 20px; h3 { margin-top: 0; color: $cRed; font-size: 20px; line-height: 22px; strong { font-style: italic; font-weight: 800; } } } .box_basketfinal__data { margin-bottom: 40px; p { color: $cRed; font-weight: 400; font-size: 12px; line-height: 20px; } } .box_basketfinal__btns { display: flex; flex-direction: row; justify-content: center; gap: 30px; .btn-3 { padding: 10px 38px; text-transform: uppercase; letter-spacing: 0.125rem; } } } } //! .logo-bar { display: flex; flex-direction: column; align-items: center; .link-logo { margin-bottom: 90px; } .basket-steps { margin-bottom: 90px; } } #box_custom38 { display: none; } #box_recommendations_39 { display: none; } #baner_3 { display: none; } .footer { display: block; .innerfooter { padding-top: 30px; padding-bottom: 30px; } .footer_box { .footer_cols { display: none; } .footer_right_box { .footer_signature { .footer_social { display: none; } } } } .footer_bottom { display: none; } } @media (max-width: 480px) { #box_basketfinal { .box_basketfinal__wrapper { .box_basketfinal__btns { flex-direction: column; gap: 15px; .btn-2, .btn-3 { min-width: 140px; margin: 0 auto; } } } } } } //* Logowanie .shop_login { #box_login { margin-bottom: 150px; margin-top: 70px; .f-row { display: flex; justify-content: center; column-gap: 100px; } .login-inner { max-width: 380px; .login-head { color: $cRed; line-height: 1.1; text-align: center; text-transform: uppercase; strong { font-style: italic; font-weight: 800; } } label { color: #707070; font-weight: 400; font-size: 14px; } input { border-radius: 0; width: 100%; } .login { color: $cWhite; } .login_form_btns { text-align: center; margin: 30px 0 20px; } .form_forgotten_password { color: #707070; text-align: center; font-weight: 400; font-size: 14px; a { &:hover { color: $cRed; } } } } .register-inner { max-width: 300px; .register-head { color: $cRed; line-height: 1.1; text-align: center; text-transform: uppercase; strong { font-style: italic; font-weight: 800; } } .register-sub-head { color: $cDarkRed; font-weight: 400; font-size: 14px; text-align: center; margin-bottom: 20px; } .register-addons { padding-top: 0; padding-left: 0; margin-bottom: 40px; li { list-style: disc; &::before { display: none; } } } .reg_form_btns { text-align: center; .btn-3 { border-radius: 0; text-transform: uppercase; } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 979px) { #box_login { margin-top: 35px; margin-bottom: 100px; .f-row { flex-direction: column; align-items: center; } .login-inner { input { width: 100%; } } .register-inner { form { fieldset { text-align: center; } } } } } @media (max-width: 767px) { #box_login { margin-bottom: 50px; .login-head, .register-head { font-size: 16px; } .login-inner { label { font-size: 10px; line-height: 1.5; } #mail_input_long { margin-bottom: 15px; } .login { width: 100%; font-size: 12px; padding: 10px 30px; } .form_forgotten_password { a { font-size: 10px; } } } .register-inner { max-width: 380px; .register-addons { margin-bottom: 20px; li { font-size: 10px; } } .register-sub-head { text-align: left; } .reg_form_btns { .btn-3 { width: 100%; font-size: 12px; padding: 10px 30px; } } } } } } //* Resetowanie hasła .shop_login_passremind { #box_passchange { margin-bottom: 120px; margin-top: 70px; .boxhead { background: none; h2 { color: $cRed; font-size: 24px; text-align: center; strong { font-style: italic; font-weight: 800; } } } .innerbox { form { width: 100%; max-width: 380px; margin: 0 auto; .shaded_inputwrap { margin-bottom: 13px; input { width: 100%; border-radius: 0; } } .form-text { text-align: center; p { color: $cDarkRed; font-weight: 400; font-size: 14px; } } .bottombuttons { margin-top: 35px; text-align: center; } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 767px) { #box_passchange { .boxhead { h2 { font-size: 16px; line-height: 1.2; } } .innerbox { form { label { font-size: 10px; line-height: 1.1; } .form-text { p { font-size: 12px; } } .bottombuttons { margin-top: 15px; .btn-2 { width: 100%; font-size: 12px; padding: 10px 30px; } } } } } } } //* Założenie nowego konta .shop_login_register { #box_register { margin-top: 70px; margin-bottom: 100px; form { h3 { color: $cRed; font-weight: 400; font-size: 24px; text-align: center; margin-bottom: 30px; strong { font-style: italic; font-weight: 800; } } .address-handler { width: 100%; max-width: 390px; margin: 0 auto; > div { display: flex; flex-direction: column; &:not(:first-child) { margin-top: 15px; } .login-label { text-align: start; width: 100%; margin: 0 0.2em; line-height: 1.2; label { line-height: 1.2; } } input { width: 100%; border-radius: 0; } .hint { display: none; } .input { a { text-decoration: underline; &:hover { color: $cRed; } } } } .separator.additional { display: none; } .bottombuttons { margin-top: 30px !important; } .input_error { margin-left: 0; } } } } //! .breadcrumbs { display: none; } #baner_3 { display: none; } @media (max-width: 767px) { #box_register { margin-top: 30px; margin-bottom: 50px; form { h3 { font-size: 16px; line-height: 1.1; } .login-label { label { font-size: 10px; } } .input { label { font-size: 12px; } } span { font-size: 10px; } .address-handler { .bottombuttons { margin-top: 15px !important; .btn-2 { font-size: 12px; padding: 10px 30px; } } } } } } } //* Modal mask .mask { background: rgba($cBlack, 0.8) !important; } //* Modal .modal { .modal-header { background: transparent; h3 { color: $cDarkRed; font-weight: 300; font-size: 24px; } } .modal-body { .ajax-product-block-info { flex-direction: column-reverse; h3 { color: $cRed; font-style: normal; font-weight: 400; font-size: 16px; } span { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 14px; } } .ajax-cart-block { span { color: $cDarkRed; font-style: normal; font-weight: 400; font-size: 14px; strong { color: $cDarkRed; font-style: normal; font-weight: 700; font-size: 14px; } } } } .modal-footer { .ajax-product-block { display: flex; flex-direction: column; align-items: center; gap: 15px; } .btn { width: 100%; &.left { @extend .btn-3; border-radius: 0; letter-spacing: 0.125em; max-width: 196px; } &.right { @extend .btn-2; background: transparent; border: none; padding: 14px 38px; max-width: 200px; } } } @media (max-width: 600px) { height: calc(100% - 60px) !important; width: calc(100% - 60px) !important; top: 30px !important; left: 30px !important; .modal-header { h3 { font-size: 16px; } } .modal-footer { .btn { font-size: 13px !important; padding: 10px 30px !important; } } } } //* Panel użytkownika .shop_panel { #box_panel { margin-top: 30px; margin-bottom: 70px; .boxhead { background: none; margin-bottom: 60px; h2 { color: $cDarkRed; text-align: center; font-weight: 300; font-size: 36px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } } .innerbox { .separator { color: $cDarkRed; font-weight: 700; font-size: 20px; text-transform: uppercase; &.separator_addresses { margin-top: 50px; } } .orders.table { margin-bottom: 40px; td { border-right: none; } thead { border-bottom: 5px solid $cRed; tr { td { color: $cDarkRed; font-weight: 700; font-size: 16px; line-height: 36px; &.id { text-align: left; } } } } tbody { border-bottom: none; tr { border-bottom: 1px solid #797979; td { color: $cBlack; font-weight: 400; font-size: 14px; &.id { padding: 22px 5px; a { color: $cBlack; font-size: 16px; font-weight: 700; text-decoration: none; } } &.data { text-align: center; } &.parcels { text-align: center; } } } } } .account_setting { padding-left: 20px; margin-bottom: 40px; border-left: 2px solid $cRed; p { color: $cBlack; font-weight: 400; font-size: 14px; &.name { margin-bottom: 10px; } } } .address { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); row-gap: 50px; column-gap: 20px; margin-bottom: 40px; li { border-left: 2px solid $cRed; margin-right: 0; margin-bottom: 0; width: 100%; b.title { color: $cDarkRed; font-style: normal; font-weight: 700; font-size: 16px; border-bottom: none; } } } } .btn-3 { text-transform: uppercase; letter-spacing: 0.125em; margin-right: 15px; } .btn-2.logout { display: block; width: fit-content; margin-top: 60px; } } //! #baner_3 { display: none; } @media (max-width: 767px) { #box_panel { .boxhead { margin-bottom: 30px; h2 { font-size: 16px; line-height: 1.1; } } .innerbox { .separator { font-size: 14px; line-height: 1.5; font-weight: 600; padding-left: 0.5em; padding-right: 0.5em; margin-bottom: 0; &:not(.first) { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #c2c2c2; } &.separator_addresses { margin-top: 30px; } } .orders.table { thead { tr { td { font-size: 10px; line-height: 1.1; } } } tbody { tr { td { font-size: 10px; &.id { a { font-size: 12px; } } } } } } .account_setting { margin-bottom: 20px; } .btn-3 { min-width: 150px; text-align: center; &.editprofile { margin-bottom: 15px; } } .btn-2 { &.logout { margin-top: 20px; } } } .address { li { b { &.title { margin-bottom: 0; } } p { color: $cBlack; } } } } } } //* Panel użytkownika -> zmiana hasła .shop_panel_password { #box_passchange { margin-top: 30px; margin-bottom: 70px; .boxhead { margin-bottom: 40px; background: none; h2 { color: $cDarkRed; text-align: center; font-weight: 300; font-size: 36px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } } .innerbox { h4 { color: $cDarkRed; font-weight: 700; font-size: 20px; margin-bottom: 30px; text-transform: uppercase; } form { width: 100%; max-width: 440px; .shaded_inputwrap { margin-bottom: 10px; input { border-radius: 0; width: 100%; } } } .bottombuttons { display: flex; flex-direction: column; align-items: baseline; gap: 15px; .btn-2.save { min-width: 180px; } .btn-3.cancel { text-align: center; min-width: 100px; text-transform: uppercase; letter-spacing: 0.125em; } } } } //! #baner_3 { display: none; } @media (max-width: 979px) { #box_passchange { .innerbox { form { max-width: unset; } } } } @media (max-width: 767px) { #box_passchange { .boxhead { margin-bottom: 30px; h2 { font-size: 16px; line-height: 1.1; } } .innerbox { h4 { font-size: 12px; font-weight: 600; margin-bottom: 20px; } form { label { font-size: 10px; line-height: 1.1; } .bottombuttons { .btn-2 { width: 100%; text-align: center; font-size: 12px; padding: 10px 30px; } .btn-3 { width: calc(100% - 64px); text-align: center; font-size: 12px; padding: 10px 30px; } } } } } } } //* Panel użytkownika -> edycja profilu .shop_panel_edit { #box_useredit { margin-top: 30px; margin-bottom: 70px; .boxhead { margin-bottom: 40px; background: none; h2 { color: $cDarkRed; text-align: center; font-weight: 300; font-size: 36px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } } .innerbox { h4 { color: $cDarkRed; font-weight: 700; font-size: 20px; margin-bottom: 30px; text-transform: uppercase; } form { width: 100%; max-width: 440px; .shaded_inputwrap { margin-bottom: 10px; input { border-radius: 0; width: 100%; } } } .separator { display: none; } .shaded_inputwrap { label { display: inline; } } .clear { .input { label { display: inline; a { &:hover { color: $cRed; } } } } } .bottombuttons { display: flex; flex-direction: column; align-items: baseline; gap: 15px; .btn-2.save { min-width: 180px; } .btn-3.cancel { text-align: center; min-width: 100px; text-transform: uppercase; letter-spacing: 0.125em; } } } } //! #baner_3 { display: none; } @media (max-width: 979px) { #box_useredit { .innerbox { form { max-width: unset; } } } } @media (max-width: 767px) { #box_useredit { .boxhead { margin-bottom: 30px; h2 { font-size: 16px; line-height: 1.1; } } .innerbox { h4 { font-size: 12px; font-weight: 600; margin-bottom: 20px; } form { label { font-size: 10px; line-height: 1.1; } .bottombuttons { .btn-2 { width: 100%; text-align: center; font-size: 12px; padding: 10px 30px; } .btn-3 { width: calc(100% - 64px); text-align: center; font-size: 12px; padding: 10px 30px; } } } } } } } //* Panel użytkownika -> lista adresów .shop_panel_addresses { #box_addresses { margin-top: 30px; margin-bottom: 70px; .boxhead { margin-bottom: 40px; background: none; h2 { color: $cDarkRed; text-align: center; font-weight: 300; font-size: 36px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } } .innerbox { h4 { color: $cDarkRed; font-weight: 700; font-size: 20px; margin-bottom: 30px; text-transform: uppercase; } .addresses { li { padding-left: 25px; border-left: 2px solid $cRed; &.even { } &.odd { position: relative; margin: 74px 0; border-top: none; border-bottom: none; background: none; &::before { content: ''; position: absolute; top: calc(-74px / 2); left: 0; width: 100%; height: 1px; background: $cDarkGray; } &::after { content: ''; position: absolute; bottom: calc(-74px / 2); left: 0; width: 100%; height: 1px; background: $cDarkGray; } } &:last-child { position: relative; margin-bottom: 74px; &::after { content: ''; position: absolute; bottom: calc(-74px / 2); left: 0; width: 100%; height: 1px; background: $cDarkGray; } } .links { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; max-width: fit-content; .btn-2 { font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; } .btn-3 { font-size: 12px; text-align: center; text-transform: uppercase; letter-spacing: 0.125em; } } } } .bottombuttons { display: flex; flex-direction: column; align-items: baseline; gap: 15px; .btn-2.add { text-align: center; min-width: 125px; } .btn-3.cancel { text-align: center; min-width: 125px; text-transform: uppercase; letter-spacing: 0.125em; } } } } //! #baner_3 { display: none; } @media (max-width: 767px) { #box_addresses { .boxhead { margin-bottom: 20px; h2 { font-size: 16px; line-height: 1.1; } } .innerbox { h4 { font-size: 12px; margin-bottom: 20px; } .addresses { li { padding-left: 15px; &:last-child { &::after { bottom: none; } } &.odd { margin: 41px 0; &::before { top: -21px; } &::after { bottom: -20px; } } p { color: $cBlack; } .links { grid-template-columns: 1fr; gap: 10px; em { color: $cBlack; } } } } .bottombuttons { .btn-2 { font-size: 12px; padding: 10px 30px; } .btn-3 { font-size: 12px; padding: 10px 30px; } } } } } @media (max-width: 500px) { #box_addresses { .innerbox { .bottombuttons { .btn-2 { width: calc(100% - 60px); } .btn-3 { width: calc(100% - 64px); } } } } } } //* Panel użytkownika -> lista adresów -> nowy adres .shop_panel_address { #box_address { margin-top: 30px; margin-bottom: 70px; .boxhead { margin-bottom: 40px; background: none; h2 { color: $cDarkRed; text-align: center; font-weight: 300; font-size: 36px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } } .innerbox { h4 { color: $cDarkRed; font-weight: 700; font-size: 20px; margin-bottom: 30px; text-transform: uppercase; } .bottombuttons { display: flex; flex-direction: column; align-items: baseline; gap: 15px; .btn-2.add { text-align: center; min-width: 125px; } .btn-3.undo { text-align: center; min-width: 125px; text-transform: uppercase; letter-spacing: 0.125em; border-radius: 0; } } } } } //* Panel użytkownika -> edycja adresu #shop_panel_address3 { #box_address { margin-top: 30px; margin-bottom: 70px; .boxhead { margin-bottom: 40px; background: none; h2 { color: $cDarkRed; text-align: center; font-weight: 300; font-size: 36px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } } .innerbox { h4 { color: $cDarkRed; font-weight: 700; font-size: 20px; margin-bottom: 30px; text-transform: uppercase; } form { table { width: fit-content; tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 10px; tr { display: flex; flex-direction: column; td { &.label { text-align: left; padding-right: 0; label { font-weight: 400; font-size: 10px; line-height: 1; margin-bottom: 3px; } } &.input { input { width: 100%; max-width: 440px; border-radius: 0; } select { width: 100%; max-width: 440px; padding: 13px 30px !important; } } &.hint { display: none; } } } } } .bottombuttons { margin-top: 35px; } } .bottombuttons { display: flex; flex-direction: column; align-items: baseline; gap: 15px; .btn-2 { text-align: center; min-width: 180px; } .btn-3 { text-align: center; min-width: 180px; text-transform: uppercase; letter-spacing: 0.125em; border-radius: 0; } } } } //! #baner_3 { display: none; } @media (max-width: 767px) { #box_address { .boxhead { margin-bottom: 20px; h2 { font-size: 16px; line-height: 1.1; } } .innerbox { h4 { font-size: 12px; margin-bottom: 20px; } form { table { width: 100%; tbody { grid-template-columns: 1fr; tr { td { &.input { input { width: 100%; max-width: unset; } select { width: 100%; max-width: unset; } } } } } } } } } } @media (max-width: 500px) { #box_address { .innerbox { form { .bottombuttons { .btn-2 { width: 100%; } .btn-3 { width: 100%; } } } } } } } //* Panel użytkownika -> szczegóły zamówienia #shop_panel_order6 { #box_order { margin-top: 30px; margin-bottom: 70px; .boxhead { margin-bottom: 40px; background: none; h2 { color: $cDarkRed; text-align: center; font-weight: 300; font-size: 36px; text-transform: uppercase; strong { font-weight: 800; font-style: italic; } } } .innerbox { h4 { color: $cDarkRed; font-weight: 700; font-size: 20px; margin-bottom: 30px; text-transform: uppercase; &.products { display: none; } } .order-details { margin-bottom: 100px; .details { border-right: 2px solid $cRed; } .address { &:not(:last-child) { border-right: 2px solid $cRed; } } ul { li { color: $cBlack; font-weight: 400; font-size: 14px; strong { color: $cDarkRed; padding-right: 12px; } b { display: block; color: $cDarkRed; font-size: 14px; margin-bottom: 20px; margin-bottom: 20px; } p { color: $cBlack; font-weight: 400; font-size: 14px; } } } } .products.table { thead { border-bottom: 5px solid $cRed; tr { td { color: $cDarkRed; font-weight: 700; font-size: 16px; border-right: none; &.name { text-align: left; } } } } tbody { border-bottom: none; tr { border-bottom: 1px solid $cDarkGray; td { border-right: none; color: $cBlack; font-size: 14px; &.name { padding: 26px 8px; a { color: $cBlack; font-size: 16px; text-decoration: none; font-weight: 700; margin-left: 30px; } } } } } } .products-info { display: none; } .bottombuttons { margin-top: 50px; .btn-3 { text-transform: uppercase; letter-spacing: 0.125em; } } } } //! #baner_3 { display: none; } @media (max-width: 979px) { #box_order { .innerbox { .order-details { margin-bottom: 50px; .details { border-right: none; } .address { &:not(:last-child) { border-right: none; } } } } } } @media (max-width: 767px) { #box_order { .boxhead { margin-bottom: 20px; h2 { font-size: 16px; line-height: 1.1; } } .innerbox { h4 { font-size: 14px; margin-bottom: 20px; } .order-details { margin: 20px 0px 0px; .address { li { padding-left: 15px; border-left: 2px solid $cRed; b { margin-bottom: 10px; } } } } .products { &.table { thead { tr { td { font-size: 10px; } } } tbody { tr { td { &.name { img { display: none; } a { font-size: 12px; margin-left: 0; } } font-size: 12px; } } } } } .bottombuttons { margin-top: 30px; .btn-3 { font-size: 12px; padding: 10px 30px; } } } } } @media (max-width: 500px) { #box_order { .innerbox { .bottombuttons { .btn-3 { text-align: center; width: calc(100% - 60px); } } } } } } //* Language #box_languages { width: fit-content; margin-bottom: 0; .boxhead { display: none; } .innerbox { padding: 0; } #active_language_flags { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; .language_flags_arrow { margin-left: 5px; } } #languages_flags { padding-top: 5px; display: none; li { &:not(:last-child) { margin-bottom: 5px; } } } } //* Currencies #box_currencies { width: fit-content; margin-bottom: 0; .boxhead { display: none; } .innerbox { padding: 0; } #active_currency_symbols { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; .currency_symbols_arrow { margin-left: 5px; } } #currency_symbols { padding-top: 5px; display: none; li { &:not(:last-child) { margin-bottom: 5px; } } } } //* Page 404 .page_404 { min-height: 100vh; #box_404 { min-height: 100vh; margin-bottom: 0; display: flex; align-items: flex-start; justify-content: center; .innerbox { text-align: center; margin-bottom: 100px; p { color: $cRed; font-style: normal; font-weight: 600; font-size: 20px; line-height: 24px; text-transform: uppercase; line-height: 1.5; margin-bottom: 30px; margin-top: 80px; } .btns_box { display: flex; gap: 25px; justify-content: center; margin-bottom: 50px; } } @media (max-width: 767px) { .innerbox { p { font-size: 18px; } .btns_box { flex-direction: column; width: 100%; max-width: 240px; margin-left: auto; margin-right: auto; gap: 15px; .btn-2 { padding: 12px 8px; } } } } } } :lang(pl) { #box_slider_42 { display: none; } #box_slider_43 { display: none; } #box_slider_44 { display: none; } } :lang(en) { #box_slider_33 { display: none; } #box_slider_35 { display: none; } #box_slider_41 { display: none; } } #box_basketfinal button.important { position: relative; display: inline-block; color: #fff; font-style: normal; font-weight: 600; font-size: 15px; padding: 12px 38px; letter-spacing: 0.125em; text-transform: uppercase; z-index: 1; background: #c20000 !important; border: 0 !important; border-radius: 0; &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #df1d4b; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); z-index: -1; transition: all 250ms ease; } } //* Calc .delivery-types { display: flex; flex-direction: row; border: 1px solid $cRed; width: fit-content; margin-bottom: 20px; .delivery-type { &:not(:last-child) { border-right: 1px solid $cRed; } input[type='radio']:checked + label { background: $cRed; color: $cWhite; } input[type='radio'] { appearance: none; display: none; } label { display: block; padding: 10px; } &-eco { } } } .delivery-country-list { select { color: #3a302c !important; border-color: $cRed !important; &:hover { border-color: $cRed !important; } &:focus, &:active { outline: none !important; } } }