* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; padding: 0; } :root { --defaultMargin: 20px; --defaultHeaderMargin: 20px; --defaultGap: 20px; --borderWidth: 1px; --borderColor: #c0c0c0; --borderColorActive: #4d4a4a; --defaultFontSize: 16px; --bigFontSize: 22px; --mediumFontSize: 18px; --smallFontSize: 13px; --priceFontSize: 22px; --defaultFontColor: #757373; --fontColorLight: #878585; --fontColorDark: #595757; --headerIconWidth: 60px; --headerIconHeight: 60px; } body { color: #757373; background-color: #efefef; } table { border-collapse: collapse; border: 0; } body, table, input, button, select, option, textarea { font-size: var(--defaultFontSize); font-family: Roboto,arial; } b, strong { font-weight: bold; } h1 { font-size: var(--bigFontSize); font-weight: bold; color: #3f3f3f; } .body { display: flex; flex-direction: column; height: 100%; } .kom { border: var(--borderWidth) solid var(--borderColor) } ul { padding-left: 20px; } a:visited { color: #4d4a4a; text-decoration: none; } a:link { color: #4d4a4a; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .kolor-promocji, .kolor-12, .discountColor { color: #BD0000; } .kolor-komunikatu, .notificationColor { color: #BD0000; } .pogrubienie, .bold { font-weight: bold; } .pochylenie, .italic { font-style: italic; } .podkreslenie, .underline { text-decoration: underline; } textarea, input:focus { outline: 0; } input[type=number], input[type=text], input.text, select { margin-top: 1px; height: 40px; padding: 0 10px; border: var(--borderWidth) solid #c0c0c0; outline: 0; border-radius: 8px; color: #4f4d4d; background-color: #fafafa; } textarea:focus, input[type=text]:focus, input.text:focus { border: #000000 var(--borderWidth) solid; outline: #000000 var(--borderWidth) solid; color: #4f4d4d; background-color: #fafafa } textarea:hover, input[type=text]:hover, input.text:hover { border: #000000 var(--borderWidth) solid; color: #4f4d4d; background-color: #fafafa } button, input[type=button], input[type=submit], input[type=reset], a.button { height: 40px; padding: 0 20px; border: 0; text-decoration: none; font-weight: 500; color: #ffffff; background-color: #1d2361; vertical-align: middle; cursor: pointer; border-radius: 80px; display: inline-flex; align-items: center; } button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, a.button:hover { border: 0; color: #ffffff; background-color: #ff8000 } .header-bg input[type=text], .header-bg input.text, .header-bg select { margin-top: 1px; padding: 10px; border: var(--borderWidth) solid #c0c0c0; outline: 0; border-radius: 8px; color: #c0c0c0; background-color: #ffffff; } .header-bg textarea:focus, .header-bg input[type=text]:focus, .header-bg input.text:focus { border: #4d4a4a var(--borderWidth) solid; outline: #4d4a4a var(--borderWidth) solid; color: #000000; background-color: #ffffff } .header-bg textarea:hover, .header-bg input[type=text]:hover, .header-bg input.text:hover { border: #4d4a4a var(--borderWidth) solid; color: #000000; background-color: #ffffff } .header-bg button, .header-bg input[type=button], .header-bg input[type=submit], .header-bg input[type=reset], .header-bg a.button { padding: 10px 20px; border: 0; text-decoration: none; font-weight: 500; color: #ffffff; background-color: #116db3; vertical-align: middle; cursor: pointer; border-radius: 80px; } .header-bg button:hover, .header-bg input[type=button]:hover, .header-bg input[type=submit]:hover, .header-bg input[type=reset]:hover, .header-bg a.button:hover { border: 0; color: #ffffff; background-color: #ff8000 } .footer-bg input[type=text], .footer-bg input.text, .footer-bg select { margin-top: 1px; padding: 10px; border: var(--borderWidth) solid #ffffff; outline: 0; border-radius: 8px; color: #4f4d4d; background-color: #ffffff; } .footer-bg textarea:focus, .footer-bg input[type=text]:focus, .footer-bg input.text:focus { border: #000000 var(--borderWidth) solid; outline: #000000 var(--borderWidth) solid; color: #4f4d4d; background-color: #ffffff } .footer-bg textarea:hover, .footer-bg input[type=text]:hover, .footer-bg input.text:hover { border: #000000 var(--borderWidth) solid; color: #4f4d4d; background-color: #ffffff } .footer-bg button, .footer-bg input[type=button], .footer-bg input[type=submit], .footer-bg input[type=reset], .footer-bg a.button { padding: 10px 20px; border: 0; text-decoration: none; font-weight: 500; color: #000000; background-color: #ffb148; vertical-align: middle; cursor: pointer; border-radius: 80px; } .footer-bg button:hover, .footer-bg input[type=button]:hover, .footer-bg input[type=submit]:hover, .footer-bg input[type=reset]:hover, .footer-bg a.button:hover { border: 0; color: #ffffff; background-color: #1d2361 } input.inputIlosc { border: #c0c0c0 var(--borderWidth) solid; color: #4f4d4d; background-color: #fafafa; width: 30px; text-align: right; } input.pInputIlosc { border: #c0c0c0 var(--borderWidth) solid; color: #4f4d4d; background-color: #fafafa; width: 50px; padding: 4px; text-align: center; } textarea { padding: 10px; border: var(--borderWidth) solid #c0c0c0; border-radius: 8px; color: #4f4d4d; background-color: #fafafa; } .miniatura { border: 0; cursor: pointer } .tac { text-align: center; } .tar { text-align: right; } .tal { text-align: left; } .taj { text-align: justify; } .p3 { padding: 3px; } .p5 { padding: 5px; } .p10 { padding: 10px; } .p15 { padding: 15px; } .p20 { padding: 20px; } .pi5 { padding-inline: 5px; } .pi10 { padding-inline: 10px; } .pi15 { padding-inline: 15px; } .pi20 { padding-inline: 20px; } .defaultInlinePadding { padding: 0 var(--defaultMargin); } .m0 { margin: 0; } .m3 { margin: 3px; } .m5 { margin: 5px; } .m10 { margin: 10px; } .m15 { margin: 15px; } .m20 { margin: 20px; } .mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; } .mb15 { margin-bottom: 15px; } .mb20 { margin-bottom: 20px; } .mtb5 { margin: 5px 0; } .mtb10 { margin: 10px 0; } .mtb20 { margin: 20px 0; } .defaultTopGap { margin-top: var(--defaultGap); } .defaultBottomGap { margin-bottom: var(--defaultGap); } .defaultTopBottomGap { margin: var(--defaultGap) 0; } .defaultMargin { margin: var(--defaultMargin); } .defaultTopMargin { margin-top: var(--defaultMargin); } .defaultBottomMargin { margin-bottom: var(--defaultMargin); } .defaultTopBottomMargin { margin: var(--defaultMargin) 0; } .defaultInlineMargin { margin: 0 var(--defaultMargin); } .fontSmall { font-size: var(--smallFontSize); } .fontNormal { font-size: var(--defaultFontSize); } .fontMedium { font-size: var(--mediumFontSize); } .fontBig { font-size: var(--bigFontSize); } .f12 { font-size: 12px; } .f13 { font-size: 13px; } .f14 { font-size: 14px; } .f15 { font-size: 15px; } .f16 { font-size: 16px; } .f17 { font-size: 17px; } .f18 { font-size: 18px; } .f19 { font-size: 19px; } .f20 { font-size: 20px; } .f21 { font-size: 21px; } .f22 { font-size: 22px; } .f23 { font-size: 23px; } .f24 { font-size: 24px; } .f25 { font-size: 25px; } .f26 { font-size: 26px; } .f28 { font-size: 28px; } .f30 { font-size: 30px; } .jasny, .light { color: var(--fontColorLight); } .ciemny, .dark { color: var(--fontColorDark); } .pointer { cursor: pointer; } .hidden { display: none; } .uppercase { text-transform: uppercase; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-col-100 { display: flex; flex-direction: column; height: 100%; } .aic { align-items: center; } .aib { align-items: baseline; } .jcc { justify-content: center; } .jcsb { justify-content: space-between; } .flex-400 { flex-basis: 400px; flex-shrink: 0; } .flex-450 { flex-basis: 450px; flex-shrink: 0; } .flex-auto { flex: auto; } .flex-start { align-self: flex-start; } .flex-end { align-self: flex-end; } .gap5 { gap: 5px; } .gap10 { gap: 10px; } .gap20 { gap: 20px; } .noshrink { flex-shrink: 0; } .wrap { flex-wrap: wrap; } .round-corners { border-radius: 10px; } .sort { display: flex; gap: 10px; align-items: center; font-weight: normal; } .main-header .pagination .prev span { display: none; } .main-header .pagination .next span { display: none; } .pagination { display: flex; gap: 15px; align-items: center; justify-content: end; } .pagination a:hover { text-decoration: none; } .pagination .prev, .pagination .next { font-size: 24px; padding: 0 10px; border: 0 solid lightgrey; display: flex; gap: 5px; align-items: center; justify-content: center; } .pagination .prev i, .pagination .next i { margin-top: -3px; } .pagination .prev span, .pagination .next span { font-size: var(--defaultFontSize); text-transform: uppercase; font-weight: 500; } .pagination .pages { display: flex; gap: 15px; align-items: center; } .pagination .pages u { transform: scale(120%); text-decoration: underline; text-decoration-thickness: 2px; } .pagination input[type="number"] { width: 65px; appearance: textfield; text-align: center; } .pagination input[type="number"]::-webkit-outer-spin-button { appearance: none; -webkit-appearance: none; margin: 0; } .pagination input[type="number"]::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; } .select-kat { width: 200px; margin-right: 10px; } .select-podkat { width: 200px; margin-right: 10px; } .select-kategoria { width: 100%; border-radius: 0; margin-bottom: 10px; } .select-producent { width: 100%; } #podpowiedzi { width: 600px !important; z-index: 2000; padding: 0; border: var(--borderWidth) solid #c0c0c0; background-color: #ffffff; border-radius: 8px; margin-top: 6px; } .podpowiedz-iks { width: 24px; height: 24px; position: absolute; cursor: pointer; top: 10px; right: 10px; background: url(img/iks.png) 6px 6px/12px no-repeat; box-sizing: content-box; } .podpowiedz-products { display: grid; grid-template-columns: 50px auto; gap: 10px; padding: 10px; align-items: center; overflow: hidden; max-height: 500px; overflow-y: auto; overscroll-behavior: contain; } .podpowiedz-products .photo { width: 50px; height: 50px; border: 1px solid var(--borderColor); border-radius: 8px; overflow: hidden; } .podpowiedz-products .photo img { max-width: 100%; max-height: 100%; } .podpowiedz-products .photo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .header-top { position: relative; font-size: 14px; background-color: #1d2361; color: #ffffff; padding: 5px 10px; z-index: 1001 } .header-top-container { display: flex; justify-content: space-between; align-items: center; } .header-top select { font-size: 12px; margin: 0; height: auto !important; padding: 5px !important; background-color: transparent; color: #ffffff; border: 0; border-radius: 5px; transition: 0.4s; } .header-top select:hover, .header-top select:focus { background-color: white; color: black; } .header-top-notification { flex: auto; text-align: center; } .header-top-language-currency { display: flex; gap: 10px; align-items: center; } .header-top-language-currency img { margin: 0; } .header-bg { color: #626060; background-color: #ffffff; border-bottom: var(--borderWidth) solid #c0c0c0; z-index: 1000; } .header-width { max-width: 1230px; margin-inline: auto; } .header-flex { height: 80px; display: flex; position: relative; align-items: center; justify-content: space-between; } .header-logo { width: 300px; flex-shrink: 0; display: flex; align-items: center; overflow: hidden; padding-left: var(--defaultMargin); padding-right: 20px; height: 80%; } .header-logo > a { display: flex; align-items: center; } .header-logo img { max-width: 100%; max-height: 100%; } .header-icons { width: max-content; flex-shrink: 0; justify-content: end; display: flex; margin-left: 20px; } .header-icons .gfx { font-size: 32px; font-weight: normal; } .header-search { flex: auto; padding-inline: 20px; } .header-search-input { position: relative; display: flex; max-width: 600px; height: 45px; padding: 0; margin: 0 auto; } .header-search-input input[type="text"] { flex: auto; height: 100%; padding-left: 16px !important; border-radius: 100px !important; } .header-search .gfx { width: 50px; height: 100%; position: absolute; right: 0; padding-left: 10px; } .header-search .chmurka { display: none; position: absolute; right: 0; top: 43px; width: 250px; z-index: 1000; background-color: #ffffff; padding: 10px; border-radius: 8px; border: var(--borderWidth) solid #c0c0c0; } .header-search .gfx:hover .chmurka { display: block; } .header-search .gfx button { display: inline-block; text-align: left; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; background-color: transparent; cursor: pointer; } .header-search .gfx button hr { width: 0; margin: 0; padding: 0; border: 0; } .header-search .gfx button hr:nth-child(1) { display: inline-block; position: relative; width: 15px; height: 15px; border: 2px solid #c0c0c0; border-radius: 100px; } .header-search .gfx button hr:nth-child(2) { display: inline-block; position: relative; width: 0px; height: 6px; border: 1px solid #c0c0c0; rotate: -45deg; top: 5px; right: 1px; } #mPorownywarka { width: var(--headerIconWidth); flex-shrink: 0; height: var(--headerIconHeight); position: relative; } #mPorownywarka .gfx { box-sizing: border-box; position: absolute; right: 0; z-index: 1001; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: var(--borderWidth) solid transparent; border-bottom : 0; color: #4d4a4a; } #mPorownywarka .chmurka { display: none; position: absolute; right: 0; top: 100%; margin-top: -1px; width: 200px; z-index: 1000; background-color: #ffffff; padding: 10px; width: 350px; border-radius: 8px 0 8px 8px; border: var(--borderWidth) solid #c0c0c0; } #mPorownywarka .button-active { color: #000000; background-color: #ffffff; border-radius: 8px 8px 0 0; border: var(--borderWidth) solid #c0c0c0; border-bottom : 0; } #mPorownywarka .products { display: grid; grid-template-columns: auto max-content; gap: 10px; align-items: center; overflow: hidden; } #mPrzechowalnia { width: var(--headerIconWidth); flex-shrink: 0; height: var(--headerIconHeight); position: relative; } #mPrzechowalnia .gfx { box-sizing: border-box; position: absolute; right: 0; z-index: 1001; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; border: var(--borderWidth) solid transparent; color: #4d4a4a; } #mPrzechowalnia .gfx:hover { color: #000000; } .header-fav { width: var(--headerIconWidth); flex-shrink: 0; height: var(--headerIconHeight); position: relative; } .header-fav .gfx { box-sizing: border-box; position: absolute; right: 0; z-index: 1001; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; border: var(--borderWidth) solid transparent; color: #4d4a4a !important; } .header-fav .gfx:hover { color: #000000 !important; } #mKoszyk { width: var(--headerIconWidth); flex-shrink: 0; height: var(--headerIconHeight); position: relative; } #mKoszyk .gfx { box-sizing: border-box; position: absolute; right: 0; z-index: 1001; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; border: var(--borderWidth) solid transparent; border-bottom : 0; color: #4d4a4a; } #mKoszyk .chmurka { display: none; position: absolute; right: 0; top: 100%; margin-top: -1px; width: 600px; z-index: 1000; background-color: #ffffff; padding: 0; border-radius: 8px 0 8px 8px; border: var(--borderWidth) solid #c0c0c0; } #mKoszyk .button-active { background-color: #ffffff; border-radius: 8px 8px 0 0; border: var(--borderWidth) solid #c0c0c0; border-bottom : 0; color: #000000; } #mKoszyk .products { display: grid; grid-template-columns: max-content auto min-content; gap: 20px; padding: 15px; align-items: center; overflow: hidden; max-height: 500px; overflow-y: auto; overscroll-behavior: contain; } #mKoszyk .products .photo img { max-width: 60px; max-height: 60px; } #mKoszyk .products .block { display: grid; grid-template-columns: auto max-content; gap: 20px; } #mKoszyk .products .product { text-align: left; } #mKoszyk .products .price { text-align: right; } #mKoszyk .products .price strong { font-size: var(--bigFontSize); } #mKoszyk .products .price span { display: block; font-size: var(--smallFontSize); } #mKoszyk .value { padding: 15px; display: flex; gap: 20px; align-items: center; justify-content: end; border-bottom: 1px dotted #c0c0c0; } #mKoszyk .value strong { font-size: var(--bigFontSize) } #mKoszyk .link { padding: 15px; text-align: center; text-transform: uppercase; font-size: var(--mediumFontSize); border-top: 1px dotted #c0c0c0; } #mKoszyk strong { font-weight: 500; letter-spacing: -0.03em; } .header-login { width: var(--headerIconWidth); flex-shrink: 0; height: var(--headerIconHeight); position: relative; } .header-login .gfx { box-sizing: border-box; position: absolute; z-index: 1001; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; border: var(--borderWidth) solid transparent; border-bottom : 0; color: #4d4a4a; } .header-login .chmurka { display: none; position: absolute; right: 0; top: 100%; margin-top: -1px; width: 150px; z-index: 1000; background-color: #ffffff; padding: 10px; border-radius: 8px 0 8px 8px; border: var(--borderWidth) solid #c0c0c0; } .header-login .button-active { background-color: #ffffff; border-radius: 8px 8px 0 0; border: var(--borderWidth) solid #c0c0c0; border-bottom : 0; color: #000000; } .header-login .chmurka a { display: block; text-align: center; padding: 10px; text-transform: uppercase; } .header-account { width: 140px; flex-shrink: 0; position: relative; height: var(--headerIconHeight); } .header-account .gfx-flex { box-sizing: border-box; position: absolute; z-index: 1001; display: flex; align-items: center; width: 100%; height: 100%; text-decoration: none; border-style: solid; border-color: transparent; border-width: var(--borderWidth) var(--borderWidth) 0 var(--borderWidth); color: #4d4a4a; } .header-account .gfx { box-sizing: border-box; width: var(--headerIconWidth); flex-shrink: 0; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .header-account .hello { flex: auto; overflow: hidden; text-overflow: ellipsis; } .header-account .chmurka { display: none; position: absolute; right: 0; top: 100%; margin-top: -1px; width: 200px; z-index: 1000; background-color: #ffffff; padding: 10px; border-radius: 8px 0 8px 8px; border: var(--borderWidth) solid #c0c0c0; } .header-account .button-active { background-color: #ffffff; border-radius: 8px 8px 0 0; border-color: #c0c0c0; color: #000000; } .header-account .chmurka a { display: block; text-align: center; padding: 10px; text-transform: uppercase; } #mPorownywarka .gfx b, #mPrzechowalnia .gfx b, .header-fav .gfx b, #mKoszyk .gfx b { position: absolute; right: 5px; bottom: 5px; display: block; border: 0; background-color: #fb5404; color: #ffffff; font-size: 12px; border-radius: 10px; line-height: 16px; min-width: 16px; padding: 0 4px; text-align: center; max-width: 40px; overflow: hidden; text-overflow: ellipsis; } .navigation-bg { position: relative; color: #4d4a4a; background-color: #ffffff; border-bottom: var(--borderWidth) solid #c0c0c0; } .navigation-width { max-width: 1230px; margin-inline: auto; } .navigation-menu { display: flex; position: relative; } .navigation-menu .navigation-label { display: inline-flex; gap: 10px; align-items: center; } .navigation-menu .navigation-button:hover { color: #000000; } .navigation-menu .navigation-content { display: none; position: absolute; color: #626060; background-color: #ffffff; width: 100%; top: 100%; left: 0; right: 0; padding: 20px; border: var(--borderWidth) solid #c0c0c0; z-index: 999; border-radius: 10px } .navigation-menu .navigation-hide { position: absolute; top: 10px; right: 10px; font-size: 20px; cursor: pointer; } .navigation-menu .navigation-button, .navigation-menu .navigation-links > a { font-size: var(--mediumFontSize); font-weight: 500; padding: 15px var(--defaultMargin); text-decoration: none; cursor: pointer; } .navigation-menu .navigation-links { display: flex; } .navigation-menu .navigation-mobile { position: relative; display: none; } .navigation-menu .navigation-mobile-content { display: none; position: absolute; top: 100%; left: 0; margin-left: -0.5px; width: 150px; z-index: 999; border: var(--borderWidth) solid #c0c0c0; background-color: #ffffff; border-radius: 10px } .navigation-menu .navigation-mobile-content a { display: block; padding: 15px; font-weight: 500; } .navigation-menu .navigation-mobile-search { flex: auto; position: relative; display: none; } .navigation-menu .navigation-mobile-search form { width: 100%; height: 100%; } .navigation-menu .navigation-mobile-search input[type=text] { width: 100%; margin: 0; border: 0; outline: 0; border-radius: 0; height: 100%; color: #626060; background-color: #ffffff; } .navigation-menu .navigation-mobile-search input[type=text]:hover { border: 0; outline: 0; } .navigation-menu .navigation-mobile-search input[type=text]:focus { border: 0; outline: 0; } .navigation-menu .navigation-mobile-search button { position: absolute; right: 0; width: 40px; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; border-radius: 0; font-size: 20px; color: #626060; background-color: #ffffff; } .navigation-menu .navigation-mobile-search button:hover { border: 0; outline: 0; } .navigation-menu .navigation-mobile-search button:focus { border: 0; outline: 0; } #navigation-categories-content { column-count: 4; } #navigation-categories-content ul { padding: 0; margin: 0; list-style-type: none; line-height: 1.3; } #navigation-categories-content ul li { padding: 0; margin: 0; break-inside: avoid-column; } #navigation-categories-content > ul > li > ul { margin-bottom: 10px; } #navigation-categories-content > ul ul { margin-left: 5px; list-style: "-" outside; } #navigation-categories-content > ul ul li { margin-left: 5px; padding-left: 5px; } .navigation-bg a:visited { color: #4d4a4a; } .navigation-bg a:link { color: #4d4a4a; } .navigation-bg a:hover { color: #000000; } .header-bg a:visited { color: #4d4a4a; } .header-bg a:link { color: #4d4a4a; } .header-bg a:hover { color: #000000; } .header-top a:visited { color: #ffffff; } .header-top a:link { color: #ffffff; } .header-top a:hover { color: #ffffff; } .navigation-menu .navigation-content a:visited { color: #4d4a4a; } .navigation-menu .navigation-content a:link { color: #4d4a4a; } .navigation-menu .navigation-content a:hover { color: #000000; } .navigation-menu .navigation-mobile-content a:visited { color: #4d4a4a; } .navigation-menu .navigation-mobile-content a:link { color: #4d4a4a; } .navigation-menu .navigation-mobile-content a:hover { color: #000000; } .breadcrumbs-container { padding: 0 var(--defaultMargin); margin-bottom: var(--defaultMargin); } .breadcrumbs-slide { overflow-x: auto; scrollbar-width: none; display: flex; flex-direction: row-reverse; touch-action: auto; } .breadcrumbs { display: flex; margin: 0 auto 0 0; padding:0; list-style: none; text-align: left; flex-wrap: nowrap; } .breadcrumbs li { white-space: nowrap; text-align: left; } .breadcrumbs li+li:before { padding: 0 10px; font-family: FontAwesome; content: "\f105"; font-weight: normal; color: #757373; } .products-grid { --gap: 9px; --cols: 10; } .product-box-simple { --gap: 9px; --cols: 10; } .main-container, .main-container-noheader { container-type: inline-size; container-name: mainContainer; } .product-container { overflow: hidden; } .products-container { container-type: inline-size; container-name: productScroll; } .main-bg { padding: 20px 10px; color: #757373; } .main-width { max-width: 1230px; margin: auto; } .main-flex { display: flex; gap: 20px; } .main-flex-column { display: flex; gap: var(--defaultGap); flex-direction: column; } .main-flex-column .breadcrumbs-container { margin-bottom: 0; } .main-header a:visited { color: #4d4a4a; } .main-header a:link { color: #4d4a4a; } .main-header a:hover { color: #000000; } .content-flex-col { display: flex; gap: var(--defaultMargin); flex-direction: column; } .middle-flex { display: flex; gap: var(--defaultGap); } .middle-flex-column { display: flex; gap: var(--defaultGap); flex-direction: column; } .middle-flex-column .breadcrumbs-container { margin-bottom: 0; } .middle-flex-column > h1 { padding: 0 var(--defaultMargin); } .middle-auto { flex: auto; } .main-container, .main-container-noheader { position: relative; padding: var(--defaultMargin); background-color: #ffffff; border-color: #c0c0c0; border-style: solid; border-width: 0 0 0 0; border-radius: 10px; } .main-container h1, .main-container-noheader h1 { font-weight: 500; font-size: var(--bigFontSize); letter-spacing: -0.02em; } .main-header { display: flex; gap: var(--defaultMargin); justify-content: space-between; color: #3f3f3f; } .main-container > .main-content { margin-top: var(--defaultMargin); } .main-container > .main-content-column { margin-top: var(--defaultMargin); } .main-content-column { display: flex; gap: var(--defaultMargin); flex-direction: column; } .menu-container { padding: var(--defaultMargin); background-color: #ffffff; border-color: #c0c0c0; border-style: solid; border-width: 0 0 0 0; border-radius: 10px; } .menu-container h1 { font-weight: 500; font-size: var(--bigFontSize); letter-spacing: -0.02em; } .menu-header { display: flex; gap: var(--defaultMargin); justify-content: space-between; font-weight: 500; font-size: var(--bigFontSize); cursor: pointer; color: #3f3f3f; } .menu-content { margin-top: var(--defaultMargin); } .small-container, .small-container-noheader { position: relative; padding: var(--defaultMargin); background-color: #ffffff; border-color: #c0c0c0; border-style: solid; border-width: 0 0 0 0; border-radius: 10px; } .small-container h1, .small-container-noheader h1 { font-weight: 500; font-size: var(--mediumFontSize); letter-spacing: -0.02em; } .small-header { display: flex; gap: var(--defaultMargin); justify-content: space-between; color: #3f3f3f; } .small-container > .small-content { margin-top: var(--defaultMargin); } .product-container { position: relative; flex: auto; display: flex; flex-direction: column; padding: var(--defaultMargin); background-color: #ffffff; border-color: #c0c0c0; border-style: solid; border-width: 0 0 0 0; border-radius: 10px; } .product-content { flex: auto; display: flex; flex-direction: column; } .products-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); overflow: hidden; } .products-flex { display: flex; gap: 9px; overflow: auto; scrollbar-width: thin; scrollbar-color: #878585 #ffffff; padding-bottom: 5px; touch-action: auto; } .products-flex::-webkit-scrollbar-track { background: transparent; } .menu-flex-column { display: flex; gap: var(--defaultGap); flex-direction: column; } .menu-left { width: 250px; width: 250px; flex-shrink: 0; flex-grow: 0; } .menu-right { width: 250px; width: 250px; flex-shrink: 0; flex-grow: 0; } .menu-categories ul { padding: 0; margin: 0; list-style-type: none; line-height: 1.5; } .menu-categories ul li { padding: 0; margin: 0; break-inside: avoid-column; } .menu-categories > ul > li > ul { margin-bottom: 10px; } .menu-categories > ul ul { margin-left: 5px; list-style: "-" outside; } .menu-categories > ul ul li { margin-left: 5px; padding-left: 5px; } .menu-filters { display: flex; flex-direction: column; gap: var(--defaultMargin); } .menu-filters .filter-container { break-inside: avoid-column; } .menu-filters .filter-container ul { padding: 0; margin: 0; list-style-type: none; } .menu-filters .filter-container ul li { padding: 0; margin: 3px 0 3px 25px; } .menu-filters .filter-container ul li.chckd { list-style-image: url(img/haczyk.png); } .menu-filters .filter-container .fname { font-weight: bold; color: var(--fontColorDark); } .menu-filters .filter-container .finra { -webkit-appearance: none; width: 100%; height: 10px; border-radius: 5px; background: #f4f4f4; outline: none; } .menu-filters .filter-container .finra::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--mediumFontSize); height: var(--mediumFontSize); border: 0; border-radius: 50%; background: #ff8000; cursor: pointer; } .menu-filters .filter-container .finra::-moz-range-thumb { width: var(--mediumFontSize); height: var(--mediumFontSize); border: 0; border-radius: 50%; background: #ff8000; cursor: pointer; } .menu-filters .filter-container .fin { width: 90px; padding: 5px; } .menu-filters-chosen { margin: 10px 0; } .menu-filters-chosen .fname { font-weight: bold; color: var(--fontColorDark); margin-top: 10px; } .main-container > .middle-categories { margin-top: var(--defaultMargin); } .middle-categories ul { padding: 0; margin: 0 0 0 20px; list-style-type: none; line-height: 1.5; } .middle-categories ul li { padding: 0; margin: 0; break-inside: avoid-column; } .middle-categories > ul > li > ul { margin-bottom: 10px; } .middle-categories > ul ul { margin-left: 5px; list-style: "-" outside; } .middle-categories > ul ul li { margin-left: 5px; padding-left: 5px; } .news-container { display: flex; flex-direction: column; gap: 20px; } .news-container h2 { display: flex; justify-content: space-between; align-items: center; font-size: var(--mediumFontSize); margin: 0; font-weight: 500; } .news-container h2 > i { flex-shrink: 0; font-size: 12px; color: var(--fontColorLight); font-weight: normal; } .news-intro { margin-top: 5px; font-weight: normal; } .footer-bg { padding-inline: 10px; background-color: #1d2361; color: #ffffff; } .footer-width { max-width: 1230px; margin-inline: auto; } .footer-content { padding: 20px 0; } .footer-text { padding-bottom: 20px; } .footer-menu { display: flex; gap: 20px; justify-content: space-between; align-items: start; padding-bottom: 20px; } .footer-menu-left { flex: auto; display: flex; gap: 20px; padding-bottom: 20px; } .footer-menu-right, .footer-menu-newsletter { width: 400px; flex-shrink: 0; } .footer-creator { display: flex; justify-content: space-between; padding-top: 20px; border-top: var(--borderWidth) solid #546798; } .footer-bg a:visited { color: #ffffff; } .footer-bg a:link { color: #ffffff; } .footer-bg a:hover { color: #ffffff; } .labels { display: flex; flex-wrap: wrap; gap: 1px; font-size: 12px; font-weight: 500; } .labels .nowosc, .labels .bestseller, .labels .wyprzedaz, .labels .znizka, .znizka-termin, .labels .bezplatna-dostawa, .labels .zapowiedz , .labels .dostepnosc { padding: 2px 5px; margin: 1px; border-radius: 5px; color: #ffffff; } .labels .nowosc { background-color: #52672e; } .labels .bestseller { background-color: #b32222; } .labels .wyprzedaz { background-color: #005177; } .labels .znizka { background-color: #b32222; } .labels .znizka-termin { background-color: #b32222; } .labels .bezplatna-dostawa { background-color: #005177; } .labels .zapowiedz { background-color: #4f4d4d; } .labels .dostepnosc { background-color: #fb5404; } .product-box { position: relative; display: flex; flex-direction: column; padding: 15px; border: var(--borderWidth) solid transparent; border-radius: 8px; } .glow-box .product-box:hover { border-color: var(--borderColor); } .product-box .labels { position: absolute; top: 5px; left: 5px; margin-right: 50px; } .product-box .icons { position: absolute; top: 5px; right: 5px; width: 35px; font-size: 20px; display: flex; gap: 2px; flex-direction: column; border-radius: 20px; background-color: #ffffff; } .product-box .wish-add, .product-box .wish-rem, .product-box .compare-add, .product-box .compare-rem, .product-box .fav-add, .product-box .fav-rem { cursor: pointer; color: var(--borderColor); display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background-color: #ffffff; border-radius: 20px; transition: all 0.5s ease-in-out; } .product-box .wish-add:hover { color: #4d4a4a; background-color: #f4f4f4; } .product-box .wish-rem { color: #4d4a4a; } .product-box .compare-add:hover { color: #4d4a4a; background-color: #f4f4f4; } .product-box .compare-rem { color: #4d4a4a; } .product-box .fav-add:hover { color: #4d4a4a; background-color: #f4f4f4; } .product-box .fav-rem { color: red; } .product-box .photo { position: relative; overflow: hidden; padding-top: 100%; } .product-box .photo a { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-box .photo a img { border: 0; max-width: 100%; max-height: 100%; transition: all 0.3s ease-in-out; } .product-box .photo .photo-gallery { position: absolute; top: 0; left: 0; display: flex; height: 100%; } .product-box .photo .photo-gallery + a { display: none; } .product-box .photo .photo-gallery a { position: static; flex-shrink: 0; } .product-box .photo:hover .photo-gallery a:nth-child(1) { display: none; } .product-box .product { font-size: var(--mediumFontSize); font-weight: 500; margin-top: 15px; text-align: left; } .product-box .params { display: flex; flex-direction: column; gap: 3px; font-size: var(--smallFontSize); margin-top: 15px; text-align: left; letter-spacing: -0.02em; } .product-box .price { margin-top: 15px; text-align: center; letter-spacing: -0.02em; color: var(--fontColorDark); } .product-box .price i { color: var(--fontColorLight); font-size: var(--smallFontSize); font-style: normal; display: block; } .product-box .price strong { font-size: var(--bigFontSize); } .product-box .price strike { font-size: var(--mediumFontSize); } .product-box .price .gradacja { display: inline-grid; grid-template-columns: max-content min-content max-content; align-items: center; text-align: right; font-size: var(--smallFontSize); color: var(--fontColorLight); } .product-box .price .gradacja strong { font-size: var(--defaultFontSize); color: var(--fontColorDark); font-weight: 500; margin-left: 5px; } .product-box .omnibus { font-size: var(--smallFontSize); text-align: center; } .product-box .opz { margin: 0; } .product-box .desc { font-size: var(--smallFontSize); text-align: justify; max-height: 200px; overflow: hidden; overflow-y: auto; scrollbar-width: thin; } .product-box .bottom { margin-top: auto; } .product-box .basket { text-align: center; margin-top: 15px; } .product-box .basket .niedostepny { width: 100%; padding: 10px 15px; display: inline-block; font-weight: 500; border-radius: 5px; color: #757373; border: var(--borderWidth) solid var(--borderColor); transition: all 0.3s ease-in-out; opacity: 0.5; } .product-box .basket button, .product-box .basket a { display: inline-flex; gap: 8px; align-items: center; justify-content: center; } .product-box .basket .button { font-weight: 500; transition: all 0.3s ease-in-out; color: #757373; border: var(--borderWidth) solid var(--borderColor); background-color: #ffffff; } .product-box:hover .basket .button { color: var(--fontColorDark); border-color: #4d4a4a; background-color: #f4f4f4; } .product-box .basket .button { width: 100%; border-radius: 8px; } .product-box .basket .button-mobile { display: none; font-size: 20px; width: 45px; height: 45px; } .product-box .vline { position: absolute; width: var(--borderWidth); height: 100%; background-color: var(--borderColor); top: 0; right: -6px; background-image: linear-gradient(to bottom, #ffffff, var(--borderColor), var(--borderColor), var(--borderColor), #ffffff); } .product-box .hline { position: absolute; width: 100%; height: var(--borderWidth); background-color: var(--borderColor); bottom: -6px; margin-left: -15px; background-image: linear-gradient(to right, #ffffff, var(--borderColor), var(--borderColor), var(--borderColor), #ffffff); } .glow-box .product-box-simple:hover { border-color: var(--borderColor); border-radius: 8px; } .product-box-simple { position: relative; padding: 5px 5px 15px 5px; border: var(--borderWidth) solid transparent; width: calc((100cqw - var(--gap) * (var(--cols) - 1)) / var(--cols)); text-align: center; display: flex; flex-direction: column; flex-shrink: 0; } .product-box-simple .vline { position: absolute; width: var(--borderWidth); height: 100%; background-color: var(--borderColor); top: 0; left: -6px; background-image: linear-gradient(to bottom, #ffffff, var(--borderColor), var(--borderColor), var(--borderColor), #ffffff); } .product-box-simple .product { margin: 10px 0; } .product-box-simple .price { color: var(--fontColorDark); } .product-box-simple .price strong { font-size: var(--priceFontSize); } .product-box-simple .price strike { font-size: var(--mediumFontSize); } .product-box-simple .price .gradacja { display: inline-grid; grid-template-columns: max-content min-content max-content; align-items: center; text-align: right; font-size: var(--smallFontSize); color: var(--fontColorLight); } .product-box-simple .price .gradacja strong { font-size: var(--defaultFontSize); color: var(--fontColorDark); font-weight: 500; margin-left: 5px; } .product-box-simple .omnibus { font-size: 12px; } .product-box-simple .bottom { margin-top: auto; } .product-box-simple .photo { position: relative; overflow: hidden; padding-top: 100%; } .product-box-simple .photo a { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-box-simple .photo a img { max-width: 100%; max-height: 100%; transition: all 0.3s ease-in-out; } .product-line { position: relative; display: flex; align-items: center; gap: 20px; margin: 0; } .product-line .photo { position: relative; width: 200px; flex-shrink: 0; flex-grow: 0; height: 200px; overflow: hidden; } .product-line .photo a { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; height: 100%; border: var(--borderWidth) solid var(--borderColor); background-color: #ffffff; border-radius: 8px; transition: all 0.5s ease-in-out; } .product-line .photo a img { max-width: 100%; max-height: 100%; transition: all 0.3s ease-in-out; } .product-line .photo:hover > a img { transform: scale(1.1); } .product-line .photo:hover a { border-color: #4d4a4a; } .product-line .photo .photo-gallery { position: absolute; top: 0; left: 0; display: flex; height: 100%; } .product-line .photo .photo-gallery + a { display: none; } .product-line .photo .photo-gallery a { position: static; flex-shrink: 0; } .product-line .photo:hover .photo-gallery a:nth-child(1) { display: none; } .product-line .wish-add, .product-line .wish-rem, .product-line .compare-add, .product-line .compare-rem, .product-line .fav-add, .product-line .fav-rem { position: static; display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; font-size: 20px; cursor: pointer; transition: all 0.5s ease-in-out; background-color: #ffffff; border: var(--borderWidth) solid var(--borderColor); border-radius: 8px; color: var(--borderColor); } .product-line .wish-add:hover { color: #4d4a4a; border-color: #4d4a4a; } .product-line .wish-rem { color: #4d4a4a; } .product-line .compare-add:hover { color: #4d4a4a; border-color: #4d4a4a; } .product-line .compare-rem { color: #4d4a4a; } .product-line .fav-add, .product-line .fav-rem { top: 10px; right: 10px; } .product-line .fav-add:hover { color: #4d4a4a; border-color: #4d4a4a; } .product-line .fav-rem { color: red; } .product-line .product-photo { display: flex; gap: 20px; flex: auto; } .product-line .product { font-size: var(--mediumFontSize); font-weight: 500; } .product-line .product-column { flex: auto; align-self: flex-start; display: flex; gap: 5px; flex-direction: column; } .product-line .price { text-align: right; letter-spacing: -0.02em; color: var(--fontColorDark); } .product-line .price i { color: var(--fontColorLight); font-size: var(--smallFontSize); font-style: normal; display: block; } .product-line .price strong { font-size: var(--priceFontSize); } .product-line .price strike { display: block; font-size: var(--mediumFontSize); } .product-line .price-flex { display: flex; gap: 10px; flex-direction: column; align-items: end; flex-shrink: 0; align-self: flex-end; } .product-line .price-flex-simple { display: flex; gap: 20px; align-items: center; flex-shrink: 0 } .product-line .price .gradacja { display: inline-grid; grid-template-columns: max-content min-content max-content; align-items: center; text-align: right; font-size: var(--smallFontSize); color: var(--fontColorLight); } .product-line .price .gradacja strong { font-size: var(--defaultFontSize); color: var(--fontColorDark); font-weight: 500; margin-left: 5px; } .product-line .params { display: flex; flex-direction: column; gap: 3px; margin: 0; text-align: left; letter-spacing: -0.02em; } .product-line .opz { margin: 0; } .product-line .desc { margin: 0; max-height: 200px; overflow: hidden; overflow-y: auto; scrollbar-width: thin; } .product-line .icons { display: flex; gap: 5px; justify-content: end; } .product-line .basket { text-align: center; } .product-line .basket .niedostepny { display: inline-block; font-weight: 500; padding: 10px 15px; border: var(--borderWidth) solid var(--borderColor); border-radius: 50px; transition: all 0.3s ease-in-out; } .product-line .basket button { display: inline-flex; gap: 10px; align-items: center; justify-content: center; } .product-line .basket .button, .product-line .basket .button-mobile { font-weight: 500; padding: 10px 15px; transition: all 0.3s ease-in-out; } .product-line .basket .button-mobile { display: none; font-size: 20px; width: 50px; height: 50px; } .hline { width: 100%; height: var(--borderWidth); background-color: var(--borderColor); background-image: linear-gradient(to right, #ffffff, var(--borderColor), var(--borderColor), var(--borderColor), #ffffff); } .newsletter-header { font-size: var(--bigFontSize); font-weight: 500; letter-spacing: -0.02em; padding: 0 0 15px 15px; } .newsletter-form { position: relative; padding: 20px; background-color: #38619e; border-radius: 10px; } .newsletter-form input[type="text"] { margin-top: 10px; padding: 10px; border-radius: 10px; } .newsletter-form input[type="submit"] { margin-top: 10px; padding: 10px; border-radius: 10px; } .newsletter-captcha { position: relative; } .newsletter-captcha img { position: absolute; top: 20px; right: 10px; } .product-container .labels { margin-top: 10px; } .product-right-column { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--defaultGap); } .product-name h1 { font-weight: 500; font-size: var(--bigFontSize); letter-spacing: -0.02em; color: #3f3f3f; margin-right: 130px; } .product-icons { position: absolute; top: 20px; right: 20px; display: flex; gap: 5px; justify-content: end; } .product-icons .wish-add, .product-icons .wish-rem, .product-icons .compare-add, .product-icons .compare-rem, .product-icons .fav-add, .product-icons .fav-rem { position: static; display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; font-size: 20px; cursor: pointer; transition: all 0.5s ease-in-out; background-color: #ffffff; border: var(--borderWidth) solid var(--borderColor); border-radius: 8px; color: var(--borderColor); } .product-icons .wish-add:hover { color: #4d4a4a; border-color: #4d4a4a; } .product-icons .wish-rem { color: #4d4a4a; } .product-icons .compare-add:hover { color: #4d4a4a; border-color: #4d4a4a; } .product-icons .compare-rem { color: #4d4a4a; } .product-icons .fav-add, .product-icons .fav-rem { top: 10px; right: 10px; } .product-icons .fav-add:hover { color: #4d4a4a; border-color: #4d4a4a; } .product-icons .fav-rem { color: red; } .product-gallery { display: flex; gap: 5px; max-width: 100%; margin: 0 auto; justify-content: center; flex-wrap: wrap; } .product-gallery div { height: 90px; width: 90px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: var(--borderWidth) solid transparent; cursor: pointer; } .product-gallery img { cursor: pointer; max-height: 80px; max-width: 80px; border: 0; } .product-gallery div:hover { border-color: #4d4a4a; } .product-price { text-align: right; letter-spacing: -0.02em; color: var(--fontColorDark); } .product-price strong { font-size: var(--priceFontSize); } .product-price strike { font-size: var(--mediumFontSize); } .product-price .gradacja { display: inline-grid; gap: 5px; grid-template-columns: max-content min-content max-content; text-align: right; } .product-price .gradacja strong { font-size: var(--defaultFontSize); } .product-omnibus { font-size: var(--smallFontSize); text-align: right; } .product-price-unit { font-size: var(--smallFontSize); text-align: right; } .product-quantity { display: flex; width: 100%; gap: 0; height: 40px; align-items: stretch; margin-top: 10px; background-color: #fafafa; border: var(--borderWidth) solid #c0c0c0; border-radius: 50px; overflow: hidden; } .product-quantity:hover { border-color: #000000; } .product-quantity-button { width: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; outline: 0; border: 0; color: #c0c0c0; border-radius: 50px; } .product-quantity-button:hover { color: #4d4a4a; background-color: #f4f4f4; } .product-quantity-input { flex: auto; display: flex; align-items: center; justify-content: center; } .product-quantity-input input { height: 100%; width: 100%; text-align: center; appearance: textfield; outline: 0; border: 0; background-color: #fafafa; } .product-basket-button-big { width: 100%; height: auto !important; padding: 15px !important; margin-top: 10px; font-size: var(--mediumFontSize); font-weight: bold; cursor: pointer; border: 0; background-color: #1d2361; color: #ffffff; } button.product-basket-button-big { display: flex; align-items: center; justify-content:center; gap: 10px; } .product-basket-button-big:hover { color: #ffffff; background-color: #ff8000; } .product-basket-button-disabled { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; padding: 15px; margin-top: 10px; font-weight: bold; cursor: not-allowed; border: var(--borderWidth) solid var(--borderColor); border-radius: 50px; opacity: 0.5; } .product-attributes { display: flex; flex-direction: column; gap: var(--defaultMargin); } .product-attributes select { width: 100%; } .product-attributes .attr-name { font-weight: 500; } .product-attributes .attr-radio { display: flex; align-items: center; } .product-attributes .attr-radio div { padding: 5px; } .product-variants { display: flex; flex-direction: column; gap: 15px; } .product-variants .variant > div { display: inline; margin-right: 15px; } .product-variants .product-quantity { margin-top: 10px; } .product-accessories { } .product-accessories .atrybuty { display: flex; gap: 5px; flex-wrap: wrap; } .product-accessories .atrybuty select { font-size: var(--smallFontSize); height: auto; padding: 5px; max-width: 100px; } .product-properties { display: flex; flex-direction: column; gap: 10px; } .product-properties > div { display: flex; justify-content: space-between; } .product-properties h1 { font-size: var(--bigFontSize); font-weight: 500; color: var(--fontColorDark); } .product-properties-table { width: 100%; } .product-properties-table tr { border-top: var(--borderWidth) solid var(--borderColor); } .product-properties-table tr:nth-child(1) { border: 0; } .product-properties-table tr:hover { background-image: linear-gradient(to right, #ffffff, #f4f4f4, #f4f4f4, #f4f4f4, #ffffff); } .product-properties-table tr td:nth-child(1) { width: 30%; } .product-properties-table tr td div { padding: 5px 20px; text-align: right; color: var(--fontColorLight); } .product-properties-table tr td p { padding: 5px; margin: 0; font-weight: 500; color: var(--fontColorDark); } .product-description h1, .product-description h2, .product-description h3 { margin-bottom: 20px; } .product-description ul, .product-description ol { margin: 10px 0; padding-inline-start: 20px; } #galeria_podglad { margin: 10px 0; height: 500px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: auto; } #galeria_podglad img { cursor: pointer; max-height: 100%; max-width: 100%; } .stars_1:before { padding-right: 10px; font-family: FontAwesome; content: "\f005\f006\f006\f006\f006"; font-weight: normal; color: orange; letter-spacing: 2px; } .stars_2:before { padding-right: 10px; font-family: FontAwesome; content: "\f005\f005\f006\f006\f006"; font-weight: normal; color: orange; letter-spacing: 2px; } .stars_3:before { padding-right: 10px; font-family: FontAwesome; content: "\f005\f005\f005\f006\f006"; font-weight: normal; color: orange; letter-spacing: 2px; } .stars_4:before { padding-right: 10px; font-family: FontAwesome; content: "\f005\f005\f005\f005\f006"; font-weight: normal; color: orange; letter-spacing: 2px; } .stars_5:before { padding-right: 10px; font-family: FontAwesome; content: "\f005\f005\f005\f005\f005"; font-weight: normal; color: orange; letter-spacing: 2px; } .comment-date { padding-left: 10px; color: var(--fontColorLight); font-size: var(--smallFontSize); } select[name=sort] { border-radius: 5px; margin: 0; padding: 5px; height: auto; } select[name=kraj_dostawy] { border-radius: 10px; padding: 10px; height: auto; } .basket-header { display: flex; gap: var(--defaultMargin); align-items: end; justify-content: space-between; margin-bottom: 10px; padding-inline: var(--defaultMargin); color: #3f3f3f; } .basket-products { display: flex; flex-direction: column; gap: 40px; overflow: hidden; } .basket-product-container { position: relative; } .basket-product-container .hline { position: absolute; bottom: -20px; width: 100%; height: var(--borderWidth); background-color: var(--borderColor); background-image: linear-gradient(to right, #ffffff, var(--borderColor), var(--borderColor), var(--borderColor), #ffffff); } .basket-product { display: flex; align-items: center; gap: 20px; } .basket-product-inner { display: flex; align-items: center; gap: 20px; } .basket-product-left { flex: auto; display: flex; align-items: center; gap: 20px; } .basket-product-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .basket-product-column { flex: auto; display: flex; flex-direction: column; gap: 5px; } .basket-product-photo { width: 100px; } .basket-product-name { font-size: var(--mediumFontSize); font-weight: 500; } .basket-product-qty { width: max-content; max-width: 200px; flex-grow: 0; flex-shrink: 0; } .basket-product-price { width: 210px; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; text-align: right; text-wrap: nowrap; } .basket-product-price strong { font-size: var(--priceFontSize); font-weight: 500; color: var(--fontColorDark); letter-spacing: -0.03em; } .basket-product-price span { font-size: var(--defaultFontSize); } .basket-product-del a { width: max-content; flex-grow: 0; flex-shrink: 0; text-decoration: none; } .basket-product-del a:after { font-family: FontAwesome; content: "\f014"; font-weight: normal; font-size: 24px; text-decoration: none; } .basket-product-del img { display: none; } .basket-list label { display: flex; gap: 20px; align-items: center; cursor: pointer; width: 100%; border: var(--borderWidth) solid transparent; border-radius: 10px; } .basket-list label:hover, .basket-list label.aktywna:hover { border-color: #4d4a4a; } .basket-list label.aktywna { background-color: #f4f4f4; border-color: var(--borderColor); } .basket-list label.aktywna .basket-list-name { color: var(--fontColorDark); font-weight: bold; } .basket-list label.aktywna .basket-list-price { color: var(--fontColorDark); font-weight: bold; } .basket-list-element { display: flex; gap: 20px; align-items: center; width: 100%; padding: 10px; } .basket-list-name { } .basket-list-price { flex-shrink: 0; color: var(--fontColorDark); } .basket-list-desc { font-size: var(--smallFontSize); } .basket-list-photo { width: 100px; } .basket-list-photo img { max-height: 50px; max-width: 100px; } .basket-list-pay { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .basket-list-pay label { position: relative; display: flex; justify-content: center; border: var(--borderWidth) solid var(--borderColor); border-radius: 5px; padding: 10px; width: 150px; height: 100px; cursor: pointer; } .basket-list-pay label div { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; } .basket-list-pay label img { max-width: 100%; max-height: 100%; } .basket-list-pay label input { position: absolute; left: auto; right: auto; bottom: 10px; } .basket-list-pay label:hover { background-color: #f4f4f4; border-color: #4d4a4a; } .basket-list-pay label.aktywny { color: var(--fontColorDark); background-color: #f4f4f4; border-color: #4d4a4a; outline: var(--borderWidth) solid #4d4a4a; } .basket-list-gifts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .basket-list-gifts label { display: flex; gap: 10px; align-items: center; border: var(--borderWidth) solid var(--borderColor); border-radius: 5px; padding: 10px; max-width: 400px; color: #4d4a4a; cursor: pointer; } .basket-list-gifts label input { align-self: center; flex-shrink: 0; flex-grow: 0; } .basket-list-gifts label:hover { border-color: #4d4a4a; color: #000000; } .basket-discount-code-container { display: table; margin: 20px auto 0 auto; border-radius: 10px; width: 350px; } .basket-discount-code-container input { width: 100% !important; margin-top: 5px; } .basket-discount-code-container input.button { margin-top: 5px; } .basket-value { display: flex; gap: 10px; align-items: end; justify-content: center; margin-top: 20px; font-size: var(--mediumFontSize); } .basket-value strong { font-size: 30px; color: var(--fontColorDark); letter-spacing: -0.03em; } .basket-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 20px; } .basket-buttons button, .basket-buttons input[type=button], .basket-buttons input[type=submit] { font-size: var(--bigFontSize); font-weight: 600; padding: 15px 25px; height: auto; } .basket-buttons button { display: inline-flex; gap: 10px; align-items: center; } .order-products { display: flex; flex-direction: column; gap: 40px; overflow: hidden; margin: var(--defaultGap) 0; border: var(--borderWidth) solid var(--borderColor); border-radius: 10px; padding: 15px; } .order-product-container { position: relative; } .order-product-container .hline { position: absolute; bottom: -20px; width: 100%; height: var(--borderWidth); background-color: var(--borderColor); background-image: linear-gradient(to right, #ffffff, var(--borderColor), var(--borderColor), var(--borderColor), #ffffff); } .order-product { display: flex; align-items: center; gap: 20px; } .order-product-inner { display: flex; align-items: center; gap: 20px; } .order-product-left { flex: auto; display: flex; align-items: center; gap: 20px; } .order-product-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .order-product-column { flex: auto; display: flex; flex-direction: column; gap: 5px; } .order-product-photo { width: 100px; } .order-product-name { font-size: var(--mediumFontSize); font-weight: 500; } .order-product-qty { width: max-content; max-width: 200px; flex-grow: 0; flex-shrink: 0; display: flex; gap: 5px; } .order-product-price { width: 210px; flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: column; text-align: right; text-wrap: nowrap; } .order-product-price strong { font-size: var(--priceFontSize); font-weight: 500; color: var(--fontColorDark); letter-spacing: -0.03em; } .order-product-price span { font-size: var(--defaultFontSize); } .toolbox .gfx { display: none } .toolbox .tools { display: flex; gap: 10px; align-items: center; width: max-content; } .toolbox-mobile { position: relative; } .toolbox-mobile .gfx { display: inline-block; cursor: pointer; color: #757373; font-size: 25px; padding-right: 10px; } .toolbox-mobile .tools { display: none; position: absolute; left: 100%; top: -10px; border-radius: 8px; z-index: 10; border: var(--borderWidth) solid var(--borderColor); background-color: #ffffff; } .toolbox-mobile:hover .tools { display: flex; gap: 10px; align-items: center; padding: 10px; width: max-content; } .main-search-form table { border-collapse: separate; border-spacing: 10px; } .main-search-table { margin: 0 auto 10px auto; } .main-search-table .search-filter-name { margin-right: 5px; text-align: right; } textarea[name=uwagi] { width: 100% !important; } .basket-input-table { margin: 10px auto 0 auto; } #kqs-box { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1100; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s linear; } #kqs-box-tlo { position: absolute; width: 100%; height: 100%; background-color: #000000; opacity: 0.2; } #kqs-box-podklad { position: relative; width: 95%; height: 95%; transition: opacity 0.5s linear; color: #000000; background-color: #ffffff; border-radius: 10px; border: 0; box-shadow: 0 5px 20px #808080; } #kqs-box-zawartosc { height: 100%; padding: 30px; } #kqs-box-x { width: 16px; height: 16px; position: absolute; cursor: pointer; top: 10px; right: 10px; background: url(img/iks.png) 0 0/16px no-repeat; box-sizing: content-box; } #galeria-box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; opacity: 0; transition: 0.5s linear; flex-direction: column; align-items: center; padding: 30px 0; color: #000000; background-color: #ffffff; border: 0; } #galeria-box-podklad { flex: auto; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 30px; min-height: 200px; overflow: hidden; } #galeria-box-podklad img { max-width: 100%; max-height: 100%; } #galeria-box-nazwa { text-align: center; margin: 20px } #galeria-box-miniatury { display: flex; margin: 0 auto; } #galeria-box-miniatury div { width: 60px; height: 60px; padding: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; opacity: 0.5; cursor: pointer; } #galeria-box-miniatury div.arrLeft, #galeria-box-miniatury div.arrRight { position: absolute; bottom: 50%; width: 40px; height: 40px; padding: 0; font-size: 20px; line-height: 20px; border: 1px solid grey; background-color: #ffffff; } #galeria-box-miniatury div:hover { opacity: 1; } #galeria-box-miniatury div.arrLeft { left: 20px; } #galeria-box-miniatury div.arrRight { right: 20px; } #galeria-box-miniatury img { max-width: 100%; max-height: 100%; border: 0; } #galeria-box-x { width: 40px; height: 40px; position: absolute; top: 0; right: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 40px; } @media screen and (max-width: 600px) { #galeria-box-miniatury div { width: 50px; height: 50px; } #galeria-box-podklad { padding: 0; } #galeria-box-nazwa { margin: 20px 10px; } #galeria-box-miniatury div.arrLeft { left: 10px; } #galeria-box-miniatury div.arrRight { right: 10px; } } @container mainContainer (width < 2900px) { .products-grid { --cols: 9; } } @container mainContainer (width < 2600px) { .products-grid { --cols: 8; } } @container mainContainer (width < 2300px) { .products-grid { --cols: 7; } } @container mainContainer (width < 2000px) { .products-grid { --cols: 6; } } @container mainContainer (width < 1700px) { .products-grid { --cols: 5; } } @container mainContainer (width < 1400px) { .products-grid { --cols: 4; } } @container mainContainer (width < 1100px) { .products-grid { --cols: 3; } } @container mainContainer (width < 850px) { .products-grid { --cols: 2; } .sort > span { display: none; } } @container mainContainer (width < 700px) { .product-line .photo { width: 150px; height: 150px; } .product-line .product-photo { gap: 10px; } .product-line { flex-wrap: wrap; } .product-line .price-flex { flex-direction: row; gap: 20px; align-items: center; margin-left: auto; } } @container productScroll (width < 2900px) { .product-box-simple { --cols: 9; } } @container productScroll (width < 2600px) { .product-box-simple { --cols: 8; } } @container productScroll (width < 2300px) { .product-box-simple { --cols: 7; } } @container productScroll (width < 2000px) { .product-box-simple { --cols: 6; } } @container productScroll (width < 1700px) { .product-box-simple { --cols: 5; } } @container productScroll (width < 1400px) { .product-box-simple { --cols: 4; } } @container productScroll (width < 1100px) { .product-box-simple { --cols: 3; } } @container productScroll (width < 850px) { .product-box-simple { --cols: 2; } } @media screen and (max-width: 1200px) { .header-account { width: 60px; } .header-account .hello { display: none; } #podpowiedzi { left: 0 !important; width: 100% !important; } } @media screen and (max-width: 1000px) { :root { --headerIconWidth: 50px; --headerIconHeight: 50px; } .header-flex { height: 80px; } .header-logo { width: 200px; } .header-account { width: 50px; } .header-icons .gfx { font-size: 28px; } #navigation-categories-content { column-count: 3; } .main-flex { flex-direction: column; gap: var(--defaultGap); } .product-right-column { width: auto; } .product-container .labels { margin-right: 130px; } .middle-flex { flex-direction: column; } .middle-auto { order: 3; } .menu-left { width: 100%; order: 1; } .menu-right { width: 100%; order: 2; } .potd .product-box .photo { padding-top: 300px; } .mobile-hide { display: none; } .menu-categories { column-count: 2; } .menu-filters { display: block; column-count: 3; } .menu-filters .filter-container .fname { line-height: 2; } .menu-filters .filter-container .fin { width: 40%; } .menu-filters .filter-container ul li { line-height: 1.5; } .main-container, .main-container-noheader, .menu-container, .middle-container, .small-container, .small-container-noheader, .small-container-nobb, .product-container { border-width: 0 0 var(--borderWidth) 0; } .basket-header { margin-top: 10px; } } @media screen and (max-width: 850px) { #navigation-categories-content { column-count: 2; } .footer-menu { flex-direction: column; gap: 20px; } .footer-menu-right { width: 100%; } .footer-menu-newsletter { width: 100%; } .footer-menu-newsletter .newsletter-fields { display: grid; gap: 10px; grid-template-columns: 30% 40% auto; } .product-properties-table tr td div { padding-left: 0; margin-left: 0; } .basket-product-right, .order-product-right { flex-direction: column; gap: 10px; align-items: end; } .basket-product-qty { order: 2; } .order-product-qty { order: 2; flex-direction: column-reverse; align-items: center; } .basket-product-price, .order-product-price { order: 3; width: max-content; } .basket-product-del { order: 1; } .toolbox { position: relative; } .toolbox .gfx { display: inline-block; cursor: pointer; color: #757373; font-size: 25px; padding-right: 10px; } .toolbox .tools { display: none; position: absolute; left: 100%; top: -10px; border-radius: 8px; z-index: 10; border: var(--borderWidth) solid var(--borderColor); background-color: #ffffff; } .toolbox:hover .tools { display: flex; gap: 10px; align-items: center; padding: 10px; width: max-content; } } @media screen and (max-width: 750px) { .header-logo { width: 250px; } .header-search { display: none; } .header-icons { margin-left: auto; } .navigation-menu { height: 40px; align-items: stretch; } .navigation-menu .navigation-label span { display: none; } .navigation-menu .navigation-button { display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; font-size: 20px; border-width: 0 var(--borderWidth) 0 0; } .navigation-menu .navigation-links { display: none; } .navigation-menu .navigation-mobile { display: block; } .navigation-menu .navigation-mobile-search { display: block; } .menu-categories { column-count: 1; } .menu-filters { column-count: 2; } .footer-menu-newsletter .newsletter-fields { display: block; } .pagination .prev span { display: none; } .pagination .next span { display: none; } } @media screen and (max-width: 700px) { .menu-categories { column-count: 1; } .menu-filters { column-count: 2; } .product-properties-table tr td:nth-child(1) { width: 40%; } .product-properties-table tr td div { padding: 5px 10px; } .product-properties-table tr:nth-child(even) { background-image: linear-gradient(to right, #ffffff, #f4f4f4, #f4f4f4, #f4f4f4, #ffffff); } } @media screen and (max-width: 600px) { #navigation-categories-content { column-count: auto; max-height: 600px; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; } #navigation-categories-content ul { line-height: 1.5; } .footer-menu-left { flex-direction: column; gap: 5px; } .footer-creator { flex-direction: column; gap: 5px; text-align: center; } .pagination .pages { gap: 10px; } } @media screen and (max-width: 500px) { :root { --defaultMargin: 10px; --defaultGap: 15px; --borderWidth: 0.5px; --defaultFontSize: 14px; --bigFontSize: 18px; --mediumFontSize: 15px; --smallFontSize: 12px; --priceFontSize: 18px; --headerIconHeight: 40px; --headerIconWidth: 40px; } .products-grid { --gap: 5px; } .header-top { font-size: 10px; padding: 2px; } .header-top select { font-size: 10px; padding: 2px !important; } .header-top .header-top-notification { padding: 2px; text-align: left; text-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: auto; margin-left: 5px; margin-right: 10px; } .header-bg { min-height: 50px; max-height: 50px; } .header-flex { height: 50px; } .header-logo { width: 150px; height: 40px; } .header-account { width: 40px; } .header-icons .gfx { font-size: 20px; } .basket-header { flex-direction: column; align-items: start; } .basket-product-left, .order-product-left { flex-direction: column; gap: 10px; align-items: start; } .main-bg { padding: 10px; } .main-header { flex-wrap: wrap; gap: 0; } .labels { font-size: 8px; gap: 0.5px; } #mPorownywarka .gfx b, #mPrzechowalnia .gfx b, .header-fav .gfx b, #mKoszyk .gfx b { font-size: 10px; line-height: 12px; min-width: 12px; padding: 0 3px; max-width: 30px; } #mPorownywarka .chmurka { width: 300px; right: -120px; margin-top: -0.5px; border-radius: 8px; } #mKoszyk .chmurka { width: 340px; margin-top: -0.5px; margin-right: -30px; border-radius: 8px; } #mKoszyk .products .block { display: block; } #mKoszyk .products .price { display: flex; align-items: end; justify-content: space-between; } #mKoszyk .products .price strong { order: 2; } #mKoszyk .products .price span { order: 1; } #mKoszyk .products .photo img { max-width: 50px; max-height: 50px; } .header-account .chmurka { margin-top: -0.5px; } .header-login .chmurka { margin-top: -0.5px; } #galeria_podglad { height: 300px; } .product-gallery { flex-wrap: nowrap; overflow-x: auto; justify-content: start; } .product-gallery div { height: 50px; width: 50px; } .product-gallery img { max-height: 40px; max-width: 40px; } .product-box { padding: 3px; } .product-box .icons { top: 3px; right: 3px; } .product-box .price { margin-top: 10px; letter-spacing: -0.02em; } .product-box .photo { border-radius: 8px; } .product-box .params { margin-top: 10px; } .product-box .basket { margin-top: 10px; } .product-box .basket .button-mobile { display: inline-flex; margin-bottom: 10px; } .product-box .basket .button { display: none; } .product-box .vline { right: -3px; } .product-box .hline { bottom: -3px; margin-left: -3px; } .product-line .basket .button-mobile { display: inline-flex; } .product-line .basket .button { display: none; } form[name=rejestracja] table table { margin: 5px auto !important } form[name=rejestracja] table table tr { display: block; width: auto !important; } form[name=rejestracja] table table tr td { display: block; width: auto !important; } form[name=rejestracja] table table tr td div { text-align: left !important; margin-left: 10px; margin-top: 10px; } form[name=profil] table table { margin: 10px auto !important } form[name=profil] table table tr { display: block; width: auto !important; } form[name=profil] table table tr td { display: block; width: auto !important; } form[name=profil] table table tr td div { text-align: left !important; margin-left: 10px; margin-top: 10px; } form[name=fkontakt] textarea[name=wiadomosc] { width: 100% !important; } form[name=fkontakt] input[name=kod_obrazka] { width: 120px !important; } .basket-input-table tr { display: block; width: auto; } .basket-input-table tr td { display: block; width: auto; } .basket-input-table tr td div { text-align: left !important; margin-left: 10px; margin-top: 10px; } .basket-list-gifts { flex-direction: column; gap: 10px; } .basket-value { flex-direction: column; gap: 5px; align-items: center; } .main-search-table .search-filter-name { text-align: left; margin-left: 10px; } .main-search-table { width: 100%; } .main-search-table input[type=text] { width: 100% !important; } .main-search-table input[type=number] { width: 100% !important; } .main-search-table select { width: 100% !important; } .main-search-table tr td:nth-child(1) { display: block; } .main-search-table tr td:nth-child(2) { display: block; } } input[type=checkbox]:after, input[type=radio]:after { box-sizing: inherit; } input[type=checkbox], input[type=radio] { box-sizing: border-box; --active: #ff8000; --active-inner: #ffffff; --focus: 2px #c0c0c0; --border: #c0c0c0; --border-hover: #4d4a4a; --background: #f4f4f4; --disabled: #f6f8ff; --disabled-inner: #e1e6f9; appearance: none; height: 19px; outline: none; display: inline-block; vertical-align: top; position: relative; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; } input[type=checkbox]:after, input[type=radio]:after { content: ""; display: block; left: 0; top: 0; position: absolute; transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s); } input[type=checkbox]:checked, input[type=radio]:checked { --b: var(--active); --bc: var(--active); --d-o: 0.3s; --d-t: 0.6s; --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2); } input[type=checkbox]:disabled, input[type=radio]:disabled { --b: var(--disabled); cursor: not-allowed; opacity: 0.9; } input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked { --b: var(--disabled-inner); --bc: var(--border); } input[type=checkbox]:disabled + label, input[type=radio]:disabled + label { cursor: not-allowed; } input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) { --bc: var(--border-hover); } input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: 0 0 0 var(--focus); } input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) { width: 19px; } input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after { opacity: var(--o, 0); } input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked { --o: 1; } input[type=checkbox]:not(.switch) { border-radius: 4px; } input[type=checkbox]:not(.switch):after { width: 7px; height: 12px; border: 3px solid var(--active-inner); border-top: 0; border-left: 0; left: 5px; top: 1px; transform: rotate(var(--r, 20deg)); } input[type=checkbox]:not(.switch):checked { --r: 43deg; } input[type=checkbox].switch { width: 38px; border-radius: 11px; } input[type=checkbox].switch:after { left: 2px; top: 2px; border-radius: 50%; width: 13px; height: 13px; background: var(--ab, var(--border)); transform: translateX(var(--x, 0)); } input[type=checkbox].switch:checked { --ab: var(--active-inner); --x: 19px; } input[type=checkbox].switch:disabled:not(:checked):after { opacity: 0.6; } input[type=radio] { border-radius: 50%; } input[type=radio]:after { width: 17px; height: 17px; border-radius: 50%; background: var(--active-inner); opacity: 0; transform: scale(var(--s, 0.7)); } input[type=radio]:checked { --s: 0.5; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-Regular.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-Italic.ttf"); font-weight: normal; font-style: italic; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-Thin.ttf"); font-weight: 200; font-style: normal; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-ThinItalic.ttf"); font-weight: 200; font-style: italic; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-Light.ttf"); font-weight: 300; font-style: normal; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-LightItalic.ttf"); font-weight: 300; font-style: italic; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-Medium.ttf"); font-weight: 500; font-style: normal; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-MediumItalic.ttf"); font-weight: 500; font-style: italic; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-Bold.ttf"); font-weight: bold; font-style: normal; } @font-face { font-family: "Roboto"; src: url("biblioteka/fonts/Roboto/Roboto-BoldItalic.ttf"); font-weight: bold; font-style: italic; } .header-bg { position: sticky; top: 0; box-shadow: 0 0 20px #e4e4e4; } .navigation-bg { z-index: 999; } .main-container, .main-container-noheader, .menu-container, .small-container, .small-container-noheader, .product-container { box-shadow: 0 1px 2px #afafaf; } @media screen and (max-width: 750px) { .navigation-bg { position: sticky; top: 80px; } } @media screen and (max-width: 500px) { .header-top { position: sticky; top: 0; font-size: 10px; padding: 2px; } .header-bg { top: 20px; } .navigation-bg { position: sticky; top: 70px; z-index: 999; } }