footer{width:100%}.footer-ui{z-index:999;border:none;height:100px;left:0;width:100%;overflow:hidden;background-color:#0a2540}.footer-ui.with-social-media-ui{height:183px}.footer-ui ul li{display:inline-block;z-index:12;color:#c5d0dc;margin-right:22px}.footer-ui ul li a{display:inline;font-size:14px;font-family:"Roboto",sans-serif;font-weight:400;color:#FFFFFF;line-height:1.714;text-align:left;text-decoration:none}.footer-ui .links-ui ul{list-style-type:none;margin:24px 50px 24px 50px}.footer-ui .go-to-top-ui{width:70px;float:right;margin-right:30px;border:none !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.footer-ui .go-to-top-ui span{border:none !important;color:#fff;font-size:50px;padding:0px 0px 10px 0px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.footer-ui .go-to-top-ui #top-button-ui{z-index:100;display:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;bottom:21px;right:5%;border:none;width:62px;height:62px;position:fixed;background-color:#0a2540;cursor:pointer}.footer-ui .go-to-top-ui #top-button-ui:hover{background:#0a2540}.copyright-ui{text-align:right;float:right;margin-right:80px;opacity:.75 !important;font-size:12px}.copyright-ui a{font-size:12px}.copyright-link-ui{color:#c5d0dc !important}.modal-open-ui #top-button-ui{display:none !important}@media only screen and (max-width: 1279px){footer{position:static}footer .footer-ui{height:auto;width:100%}footer .footer-ui.with-social-media-ui{height:auto}footer .footer-ui .links-ui ul{margin:15px 0 0 0}footer .footer-ui .links-ui ul .copyright-ui{width:100%;margin:15px 0 0 0;padding:17px 20px;background:rgba(255,255,255,.2);opacity:1 !important;text-align:left;line-height:1.3}footer .footer-ui #top-button-ui{width:50px;height:50px;bottom:20px;right:20px}footer .footer-ui #top-button-ui.higher-ui{bottom:100px}}.cartItemsList-btn{position:relative}.cartItemsList-wrapper{position:absolute;background-color:#ffffff;width:645px;max-height:768px;box-shadow:0 10px 30px 10px rgba(0,0,0,.12);margin-top:5px;z-index:99}@media screen and (max-width: 768px){.cartItemsList-wrapper{display:none}}@media screen and (min-width: 769px)and (max-width: 1600px){.cartItemsList-wrapper{right:0}}@media screen and (min-width: 1601px){.cartItemsList-wrapper{right:-50px}}.cartItemsList-wrapper .change-cart-ui{width:100%;min-height:unset;top:60px;right:0}.cartItemsList-wrapper .change-cart-ui .cart-change-popup-ui{width:fit-content;background:unset;outline-offset:-2px !important}.cartItemsList-wrapper .change-cart-ui .change-cart-list-ui{position:absolute;width:100%}.cartItemsList-wrapper .amount-stepper-ui{height:65px}.cartItemsList-wrapper .amount-stepper-ui button{width:32px;height:28px}.cartItemsList-wrapper .amount-stepper-ui input{width:48px;height:28px}.cartItemsList-title,.cartItemsList-editCartTitle{display:flex;height:60px;width:100%;align-items:center;background-color:#0a2540;justify-content:flex-start;padding-left:20px}.cartItemsList-title span,.cartItemsList-title i,.cartItemsList-editCartTitle span,.cartItemsList-editCartTitle i{color:#ffffff;font-size:16px;font-style:normal;font-weight:500}.cartItemsList-title i:not(.cartItemsList-close i),.cartItemsList-editCartTitle i:not(.cartItemsList-close i){margin-right:10px;cursor:pointer}.cartItemsList-title button,.cartItemsList-editCartTitle button{background:unset;padding:0}.cartItemsList-close{margin-left:auto;margin-right:20px;background:unset}.cartItemsList-close i{color:#ffffff !important;margin-right:0;cursor:pointer !important}.cartItemsList-labels{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;height:40px;background-color:#f6f6f6}.cartItemsList-labels--label{color:#1f2933;text-align:left;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cartItemsList-labels--label_product{padding-left:17px;width:286px}.cartItemsList-labels--label_quantity{width:162px}.cartItemsList-labels--label_value{width:calc(100% - 475px)}.cartItemsList-productsList{max-height:280px;overflow-y:auto;margin-top:54px}.cartItemsList-productsList::-webkit-scrollbar{width:0;background:rgba(0,0,0,0)}.cartItemsList-productsList--empty{padding:32px;text-align:center}.cartItemsList-productsList--empty .empty-cart-notice-ui{width:90%;margin:auto;text-align:center;font-size:16px}.cartItemsList-productsList--empty .empty-cart-notice-ui i{font-size:40px;padding:0;color:#d2d2d2;margin-right:10px}.cartItemsList-productsList--no-margin{margin-top:0}.cartItemsList-informations{padding:24px}.cartItemsList-product{display:flex;width:100%;height:70px;background-color:#ffffff;transition:300ms;border-bottom:1px solid #d3dbe3;padding-left:17px;position:relative}.cartItemsList-product.setElement{margin-left:5% !important;width:calc(95% - 48px) !important}.cartItemsList-product--image{display:flex;align-items:center;justify-content:center;width:60px;height:100%;margin-right:20px}.cartItemsList-product--image img{width:auto;height:auto;max-width:60px;max-height:60px}.cartItemsList-product--details{width:calc(100% - 96px);height:auto;min-height:120px;position:relative;display:flex}.cartItemsList-product--details_name{color:#0a2540;display:block;width:166px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-style:normal;font-weight:500;margin-bottom:8px;margin-right:20px;padding-top:16px;transition:200ms;line-height:normal;cursor:pointer}.cartItemsList-product--details_name-setChild{width:136px !important}.cartItemsList-product--details_close{position:inherit;padding:0;margin-left:25px;width:16px;transition:300ms;fill:#1f2933;line-height:24px;cursor:pointer;margin-top:-25px;height:0}.cartItemsList-product--details_close:focus-within{outline:none !important}.cartItemsList-product--details_close:focus-within::before{outline-style:solid !important;outline-color:#166de0 !important;outline-width:1px !important;outline-offset:2px !important}.cartItemsList-product--details_close:hover{fill:#0a2540}.cartItemsList-product--details_setQuantity{width:112px;color:#1f2933;text-align:right;background-color:#ffffff;font-size:16px;font-style:normal;font-weight:500;line-height:65px}.cartItemsList-product--details_setChildQuantity{width:112px}.cartItemsList-product--details_price{color:#1f2933;text-align:right;background-color:#ffffff;font-size:16px;font-style:normal;font-weight:500;line-height:65px;width:123px;margin-left:10px;position:relative}.cartItemsList-product--details_price .deposit-ui{position:absolute;bottom:-22px;right:0;font-size:11px;color:#1f2933;width:max-content}.cartItemsList-product--details_description{color:#1f2933;font-size:12px;font-style:normal;font-weight:400;line-height:14px;max-width:90%;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}.cartItemsList-product--details_remove{display:flex;align-items:center;justify-content:center}.cartItemsList-product .change-quantity-in-cart-lq{position:relative;width:167px}.cartItemsList-product .change-quantity-in-cart-lq .multiplicity-info-js{font-size:12px;line-height:1;margin-top:-20px}.cartItemsList-product .change-quantity-in-cart-lq .cartItemsList-product--saleUnit{font-size:12px;line-height:1;margin-left:5px;display:inline-block;color:#1f2933}.cartItemsList-product .change-quantity-in-cart-lq .change-quantity-js{position:relative}.cartItemsList-product .change-quantity-in-cart-lq .change-quantity-js:before{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:16px}.cartItemsList-product .quantity-error-ui{position:absolute;font-size:12px;left:50%;bottom:-4px;width:300px;text-align:center;transform:translateX(-50%)}.cartItemsList-summary{width:100%;display:flex;align-items:center;justify-content:space-between;color:#1f2933;margin-bottom:8px}.cartItemsList-summary span{font-size:14px;font-style:normal;font-weight:400;line-height:20px}.cartItemsList-value{width:100%;display:flex;align-items:center;justify-content:space-between;color:#1f2933;margin-top:12px;margin-bottom:4px}.cartItemsList-value span{font-size:16px;font-style:normal;font-weight:700;line-height:24px}.cartItemsList-button{padding:8px 35px;text-align:center;display:block;font-size:14px !important;font-style:normal;font-weight:400;margin-left:auto;margin-right:auto !important;line-height:24px !important;cursor:pointer;width:50% !important}.notfound-container{display:block;max-width:1400px;margin:auto}.notfound-image{display:block;margin:130px auto 50px;max-width:650px;width:auto;height:auto}.notfound-svgMainColor{fill:#0a2540}.notfound-text{margin:0 auto 80px;max-width:350px}.notfound-header{display:block;margin:0 auto 30px;font-size:36px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-align:center;color:#1f2933}.notfound-info{display:block;margin:0 auto 25px;font-size:18px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;text-align:center;color:#1f2933}.notfound-button{display:block;min-width:250px;margin:25px auto 0;padding:13px 15px;text-transform:uppercase;font-size:14px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.71 !important;letter-spacing:1.2px;text-align:center}@media screen and (max-width: 768px){.notfound-image{max-width:80%;margin-top:80px}.notfound-text{max-width:80%}.notfound-header{font-size:24px}.notfound-info{font-size:14px}.notfound-button{min-width:calc(100% - 30px)}}.open360{border-radius:50%;background:#dadce0;color:#222;font-weight:600;width:50px;height:30px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:200ms}.open360:hover{background:#b9bac0;color:#000}@media screen and (max-width: 1279px){.open360.open360-pd{padding:20px 0;width:70px}}.imageContainerPopup{width:fit-content !important;height:80vh;min-height:unset;min-width:unset;overflow:unset !important;max-height:unset !important;max-width:unset !important;padding:35px}@media screen and (max-width: 1279px){.imageContainerPopup{width:100%;min-height:fit-content;top:50% !important;transform:translate(0, -50%) !important;max-height:100% !important}.imageContainerPopup .imageContainer360{display:flex;align-items:center;justify-content:center}}.imageContainerPopup .close-button{right:-10px;top:-10px;cursor:pointer}.imageContainerPopup .img360{position:relative;height:100%;width:100%;user-select:none;-webkit-user-select:none}.imageContainerPopup .img360 img{width:auto;height:auto;display:block;margin:0 auto;max-height:100%;max-width:100%;user-select:none;-webkit-user-select:none}.imageContainerPopup .img360 .imageContainer--360btns{position:absolute;bottom:25px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}.imageContainerPopup .img360 .imageContainer--360btn{width:35px;height:35px;border-radius:50%;background-color:#dadce0;margin:0 10px;position:relative;transition:300ms;cursor:pointer;display:flex;align-items:center;justify-content:center}.imageContainerPopup .img360 .imageContainer--360btn:not(.btn-auto):active{background-color:#0a2540}.imageContainerPopup .img360 .imageContainer--360btn i{fill:#000;color:#000;font-size:20px}.imageContainerPopup .img360 .imageContainer--360btn.btn-active{background-color:#0a2540}.report-review{color:#0a2540;font-size:12px;font-style:normal;font-weight:400;line-height:18px;text-decoration-line:underline;cursor:pointer;position:absolute;right:0;bottom:18px}.report-review-popup{display:block;position:fixed;background-color:rgba(0,0,0,.5);top:0;left:0;width:100%;height:100%;z-index:998}.report-review-popup .form-container{background-color:#ffffff;padding:40px 40px 40px 70px;position:fixed !important;top:50%;left:50%;transform:translate(-50%, -50%);overflow-y:auto;max-height:90vh}@media screen and (min-width: 769px){.report-review-popup .form-container{width:740px}}@media screen and (max-width: 768px){.report-review-popup .form-container{width:100% !important;height:100vh !important;max-height:unset !important}}.report-review-popup .form-container .svgIcon{position:absolute;left:0;top:50%;transform:translateY(-50%)}.report-review-popup .form-container .form__header{font-size:18px;font-style:normal;font-weight:500;line-height:26px;text-align:left;position:relative;margin-bottom:50px;top:0 !important}.report-review-popup .form-container .form__header .main-title{color:#1f2933;font-weight:600}.report-review-popup .form-container .form__header .close-button{background:unset;position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;transition:200ms;fill:#1f2933}.report-review-popup .form-container .form__header .close-button:hover{fill:#0a2540}.report-review-popup .form-container .form__input-wrapper{margin-bottom:32px;position:relative}.report-review-popup .form-container .form__input-wrapper input{height:36px;margin-bottom:0;font-size:14px}.report-review-popup .form-container .form__input-wrapper input::placeholder{font-size:14px}.report-review-popup .form-container .form__input-wrapper .form__invalid-input{position:absolute;bottom:-20px;left:0}.report-review-popup .form-container .form__input-wrapper.form__validation-error-js input{border-bottom:1px solid #da2442}.report-review-popup .form-container .form__input-wrapper label{margin-bottom:5px;height:unset !important;min-height:20px}.report-review-popup .form-container textarea{font-size:14px;height:140px;padding:5px}.report-review-popup .form-container textarea:-moz-placeholder,.report-review-popup .form-container textarea::-moz-placeholder,.report-review-popup .form-container textarea:-ms-input-placeholder,.report-review-popup .form-container textarea::-webkit-input-placeholder,.report-review-popup .form-container textarea::placeholder{font-size:14px !important}.report-review-popup .form-container .form__required-fields-info{color:#1f2933;font-size:12px;font-style:normal;font-weight:300;line-height:18px}.report-review-popup .form-container .reportReviewBtn{margin:32px auto 0;text-align:center;display:block}@media screen and (min-width: 769px){.report-review-popup .form-container .reportReviewBtn{width:400px}}.report-review-statementTop .error-ui{display:block;width:100%;margin-top:5px;position:absolute;bottom:-25px}.report-review-statementTop input{height:unset !important}.report-review-statementTop label{padding-bottom:0 !important;display:flex !important;flex-direction:row;align-items:center;width:fit-content !important}.report-review-statementTop label::before{left:0 !important}.report-review-statementTop p{bottom:-25px !important}.report-review-statementBottom{margin-bottom:16px !important}.report-review-statementBottom label::before{left:0 !important}.report-review-statementTop input,.report-review-statementBottom input{display:none}.report-review-statementTop label,.report-review-statementBottom label{margin-top:10px;margin-bottom:10px;color:#1f2933;font-size:12px;font-style:normal;font-weight:400;line-height:inherit}.report-review-statementTop .label-ui::before,.report-review-statementBottom .label-ui::before{border-radius:0 !important;content:"" !important;font-size:.8rem;width:1.5em;height:1.5em;line-height:1.5;background:#ffffff}.report-review-statementText{color:#1f2933;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.reportContent{background-color:#ffffff}.reportContent-form{height:fit-content;margin:60px auto 90px;border:1px solid #d3dbe3;background-color:#ffffff}@media screen and (min-width: 769px){.reportContent-form{width:fit-content;max-width:744px;padding:32px 64px}}@media screen and (max-width: 768px){.reportContent-form{width:calc(100% - 66px);border:none;padding:20px 32px 32px;margin-top:0}}.reportContent-header{display:block;width:100%;color:#1f2933;text-align:left;font-size:32px;font-style:normal;font-weight:500;line-height:42px;letter-spacing:.8px;margin-bottom:24px}.reportContent-description{display:block;color:#1f2933;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:1.2px;margin-bottom:32px}.reportContent input,.reportContent textarea{width:100%}.reportContent label{margin-bottom:5px;height:unset !important;min-height:20px}.reportContent select{width:100%;border:1px solid #d3dbe3;padding:12px;color:#1f2933;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:1.2px;-webkit-appearance:none !important;-moz-appearance:none !important;background-repeat:no-repeat;background-image:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.9.0-web/svgs/solid/caret-down.svg);background-position:center right 12px;background-size:10px;margin-bottom:24px;text-overflow:ellipsis;overflow:hidden !important;white-space:nowrap;padding-right:25px}.reportContent select *{color:#1f2933;padding:15px;text-align:left;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:1.2px;white-space:normal;word-break:break-all}@media screen and (max-width: 768px){.reportContent select *{width:100%}}.reportContent .select-wrapper{position:relative;margin-bottom:23px !important}.reportContent .select-wrapper .form__invalid-input{bottom:5px !important}.reportContent .select-wrapper select.form__validation-error-js{border:1px solid #da2442}.reportContent .select-label{background-color:#ffffff;padding:5px;color:#1f2933;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.143px;position:absolute}.reportContent .select-label--choosen{left:10px;top:-10px;font-size:10px}.reportContent .select-label--notChoosen{left:5px;top:20%;font-size:14px}.reportContent .form__input-wrapper{margin-bottom:32px;position:relative}.reportContent .form__input-wrapper input{height:36px;margin-bottom:0;font-size:14px}.reportContent .form__input-wrapper input::placeholder{font-size:14px}.reportContent .form__input-wrapper .form__invalid-input{position:absolute;bottom:-20px;left:0}.reportContent .form__input-wrapper.form__validation-error-js input{border-bottom:1px solid #da2442}.reportContent textarea{font-size:14px;height:150px;padding:5px}.reportContent textarea:-moz-placeholder,.reportContent textarea::-moz-placeholder,.reportContent textarea:-ms-input-placeholder,.reportContent textarea::-webkit-input-placeholder,.reportContent textarea::placeholder{font-size:14px !important}.reportContent textarea.form__validation-error-js{border:1px solid #da2442}.reportContent .form__required-fields-info{color:#1f2933;font-size:12px;font-style:normal;font-weight:300;line-height:18px}.reportContent .reportReviewBtn{margin:32px auto 0;text-align:center;display:block}@media screen and (min-width: 769px){.reportContent .reportReviewBtn{width:400px}}@media screen and (max-width: 768px){.reportContent .reportReviewBtn{width:60%}}.reportContent-statementTop .error-ui{display:block;width:100%;margin-top:5px;position:absolute;bottom:-25px}.reportContent-statementTop input{height:unset !important}.reportContent-statementTop label{padding-bottom:0 !important;display:flex !important;flex-direction:row;align-items:center;width:fit-content !important}.reportContent-statementTop label::before{left:0 !important}.reportContent-statementTop p{bottom:-25px !important}.reportContent-statementBottom{margin-bottom:16px !important}.reportContent-statementBottom label::before{left:0 !important}.reportContent-statementTop input,.reportContent-statementBottom input{display:none}.reportContent-statementTop label,.reportContent-statementBottom label{margin-top:10px;margin-bottom:10px;color:#1f2933;font-size:12px;font-style:normal;font-weight:400;line-height:inherit}.reportContent-statementTop .label-ui::before,.reportContent-statementBottom .label-ui::before{border-radius:0 !important;content:"" !important;font-size:.8rem;width:1.5em;height:1.5em;line-height:1.5;background:#ffffff}.reportContent-statementText{color:#1f2933;font-size:12px;font-style:normal;font-weight:400;line-height:18px}@media screen and (min-width: 769px){.homepage-slider-ui .slider-caption-ui{top:auto;bottom:10%}}@media screen and (min-width: 769px)and (min-width: 1641px){.homepage-slider-ui .slider-caption-ui{bottom:20%}}@media screen and (min-width: 769px){.homepage-slider-ui .slider-container-ui.lazy{position:relative;display:block;background-image:url("../css/img/alo.gif");background-repeat:no-repeat;background-position:center center}.homepage-slider-ui .slider-container-ui.lazy img{opacity:0;transition:opacity .3s ease-in-out}}@media screen and (min-width: 769px)and (min-width: 1280px){.homepage-slider-ui .slider-container-ui.lazy img{aspect-ratio:auto 3/1}}@media screen and (min-width: 769px){.homepage-slider-ui .slider-container-ui.loaded{background-image:none}.homepage-slider-ui .slider-container-ui.loaded img{opacity:1}.homepage-slider-ui .desktopLink{text-align:center;text-transform:uppercase;font-size:14px;font-weight:500;cursor:pointer}.homepage-slider-ui a{text-decoration:none;width:230px;box-sizing:border-box;padding:16px;display:inline-block}.homepage-slider-ui .homepage-slider-heading-ui,.homepage-slider-ui .homepage-slider-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.homepage-slider-ui .homepage-slider-heading-ui{font-size:60px;color:#FFFFFF;-webkit-line-clamp:1}.homepage-slider-ui .homepage-slider-text{font-size:35px;color:#FFFFFF;-webkit-line-clamp:2}}@media screen and (min-width: 769px)and (max-width: 1640px){.homepage-slider-ui .homepage-slider-heading-ui{font-size:51px}.homepage-slider-ui .homepage-slider-text{font-size:30px}}@media screen and (min-width: 769px)and (max-width: 1000px){.homepage-slider-ui .homepage-slider-heading-ui{font-size:42px}.homepage-slider-ui .homepage-slider-text{font-size:25px}}@media screen and (min-width: 769px)and (max-width: 900px){.homepage-slider-ui .homepage-slider-heading-ui{font-size:33px}.homepage-slider-ui .homepage-slider-text{font-size:20px}}@media screen and (min-width: 769px){.homepage-slider-ui .banner1-image-placeholder{background-color:#f2f2f2}}@media screen and (min-width: 769px)and (min-width: 1280px){.homepage-slider-ui .banner1-image-placeholder{min-height:480px}}@media screen and (min-width: 769px){.homepage-slider-ui .banner1-image-placeholder img{max-height:480px;width:auto;margin:auto;aspect-ratio:4/3}}@media screen and (min-width: 769px)and (max-width: 768px){.homepage-slider-ui .banner1-image-placeholder img{max-height:240px}}@media screen and (min-width: 769px){.homepage-slider-ui .banner1-image-placeholder .slider-caption-ui{top:27%}.homepage-slider-ui .banner1-image-placeholder__size{position:absolute;font-size:30px;color:gray;text-align:center;top:50%;left:50%;transform:translate(-50%, 100%)}}.homepage-slider-ui .btn-ui{color:#FFFFFF;border:1px solid #0a2540;background-color:#0a2540}.homepage-slider-ui .btn-ui:hover{color:#0a2540;border:1px solid #bdd027;background-color:#bdd027}.banner6{width:100%;margin:0 auto;height:auto;overflow-x:hidden}.banner6__list{width:100%;height:100%}.banner6__wrapper{width:50%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.banner6__wrapper .banner6__info{top:0;bottom:unset}.banner6 a{display:block;position:relative;left:50%;transform:translate(-50%, -50%);text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.banner6 figure{margin:0}.banner6__image img{box-sizing:border-box;padding:0;margin:0 auto}.banner6__image.lazy{position:relative;display:block;background-image:url("../css/img/alo.gif");background-repeat:no-repeat;background-position:center center}.banner6__image.lazy img{opacity:0;transition:opacity .3s ease-in-out}@media screen and (min-width: 1280px){.banner6__image.lazy img{aspect-ratio:auto 480/385}}.banner6__image.loaded{background-image:none}.banner6__image.loaded img{opacity:1}.banner6__image_placeholder{background-color:#f2f2f2}.banner6__image_placeholder img{max-height:680px}.banner6__info{background-color:rgba(73,73,73,.4);color:#f2f2f2;padding:20px;text-align:center;position:absolute;width:100%}.banner6__info2{position:absolute;width:100%;top:unset;bottom:0 !important;padding:20px}.banner6__title{margin:0;padding:0;position:relative;font-weight:300;font-size:30px;line-height:1.5;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;color:#FFFFFF}@media screen and (min-width: 1200px)and (max-width: 1500px){.banner6__title{font-size:20px}}@media screen and (min-width: 769px)and (max-width: 950px){.banner6__title{font-size:20px}}.banner6__title2{margin:0;padding:0;position:relative;visibility:hidden;text-overflow:ellipsis;overflow:hidden}.banner6__text{margin:0;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;min-height:60px;color:#FFFFFF}@media screen and (max-width: 1500px){.banner6__text{font-size:15px}}@media screen and (min-width: 769px)and (max-width: 850px){.banner6__text{font-size:13px}}.banner6__text2{margin:0;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;min-height:60px;visibility:hidden}.banner6__wrapperBottom .banner6__info{top:unset;bottom:0 !important}.banner6__wrapperBottom .banner6__title{margin-bottom:30px !important}.banner6__wrapperBottom a{display:block;position:relative;left:50%;transform:translate(-50%, -50%);text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.banner6__size{position:absolute;font-size:30px;color:gray;text-align:center;top:50%;left:50%;transform:translate(-50%, -50%);margin:0}.banner6 .desktopLink{text-align:center;text-transform:uppercase;font-size:14px;font-weight:500;cursor:pointer}.banner6 .btn-ui{color:#FFFFFF;border:1px solid #0a2540;background-color:#0a2540}.banner6 .btn-ui:hover{color:#0a2540;border:1px solid #bdd027;background-color:#bdd027}
/* ===== EL-MAX: minimalistyczna nakładka banner6 ===== */
/* 1. Tło nakładki - całkowicie usunięte */
.banner6 .banner6__info {
background: transparent !important;
padding: 0 !important;
height: auto !important;
bottom: 12px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: auto !important;
right: auto !important;
}
/* 2. Heading - ukryj (FOTOWOLTAIKA, KABLE, itd. zniknie) */
.banner6 .banner6__title {
display: none !important;
}
/* 3. Text - ukryj (609+ produktów, itd. zniknie) */
.banner6 .banner6__text {
display: none !important;
}
/* 4. Przycisk SPRAWDŹ - mały, granatowy z limonkową obwódką */
.banner6 .banner6__link {
background: #0a2540 !important;
color: #ffffff !important;
border: 2px solid #bdd027 !important;
padding: 8px 22px !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 1.5px !important;
text-decoration: none !important;
text-transform: uppercase !important;
border-radius: 2px !important;
margin: 0 !important;
display: inline-block !important;
}
/* 5. Hover przycisku - zamiana kolorów */
.banner6 .banner6__link:hover {
background: #bdd027 !important;
color: #0a2540 !important;
}
/* ===== KONIEC EL-MAX ===== */
/* ===== EL-MAX: nagłówek, wyszukiwarka, menu, stopka (propozycje 15.10) ===== */
/* A. Stopka: wysokość wg treści. Było height:183px + overflow:hidden, więc na desktopie
ucięty był cały wiersz z danymi firmy (adres, telefon, e-mail, Powered by Comarch). */
footer .footer-ui,
footer .footer-ui.with-social-media-ui {
height: auto;
padding-bottom: 16px; /* poprawka sceptyka B7: odstęp pod wierszem z danymi firmy */
}
/* B. Podpowiedzi wyszukiwarki: nazwa w dwóch liniach zamiast „Wyłączni…”, widoczna cena. */
.quick-search-form-js .autocomplete-ui .product-ui > div:last-child {
display: inline-block;
width: 90px;
}
.quick-search-form-js .autocomplete-ui .product-ui .names-ui {
width: calc(100% - 50px - 90px - 25px);
}
.quick-search-form-js .autocomplete-ui .product-ui .name-ui {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
}
/* C. Szersze pole wyszukiwania na laptopach 1280–1570 px (było 259 px przy 1280–1450 px). */
@media screen and (min-width: 1280px) and (max-width: 1570px) {
.header-nav-ui .search-ui {
width: 480px;
}
}
/* D. Strona główna: bez pustego pasa pod banerem (min-height 490px przy banerze ~355 px wysokości). */
@media screen and (min-width: 1280px) {
.homepage-ui .homepage-slider-ui {
min-height: 0;
}
}
/* F. Menu mobilne (< 1280 px): Producenci, Kontakt, Konfigurator PV pod listą kategorii. */
.elmax-mobile-links-ui {
display: none;
}
@media screen and (max-width: 1279px) {
.elmax-mobile-links-ui {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
border-top: 3px solid #bdd027;
}
.elmax-mobile-links-ui:not(:has(li)) {
display: none;
}
.elmax-mobile-links-ui a {
display: block;
padding: 14px 20px;
border-bottom: 1px solid #e6e6e6;
color: #0a2540;
font-weight: 600;
text-decoration: none;
}
}
/* H. Brak wyników wyszukiwania: podpowiedź kontaktu. */
.elmax-no-results-help-ui {
margin: 10px 0 0;
text-align: center;
}
/* ===== KONIEC EL-MAX: nawigacja ===== */
/* ===== EL-MAX: kategorie — nagłówek z opisem i kafle podkategorii (pakiet 3, paleta B) ===== */
/* Do dołączenia na końcu css/layout0.css (zastępuje blok „EL-MAX: opis kategorii i kafle podkategorii (propozycja 15.10)” z kategorie-razem.diff).
HTML: elements/categoryDescription/categoryDescription-1.html (.elx-kat), elements/subcategories/subcategories-1.html (.elx-pod).
Kolory palety B: granat #0a2540, niebieski #166de0 (najechanie, fokus), limonka #bdd027 (tylko akcent), tekst #1f2933 / #586674, ramki #d3dbe3. */
/* A. Nagłówek kategorii: H1 + wstęp zawsze widoczny, reszta opisu pod „Więcej o kategorii”. */
.elx-kat { margin: 0 0 20px; }
.elx-kat__h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; font-weight: 700; color: #0a2540; text-transform: none; }
.elx-kat__lead, .elx-kat__opis { max-width: 1200px; font-size: 16px; line-height: 1.55; color: #1f2933; }
.elx-kat__lead { max-width: none; } /* właściciel 16.10: krótki opis na całą szerokość */
.elx-kat__lead p, .elx-kat__opis p { margin: 0 0 8px; }
/* opis z edytora Optimy/panelu przychodzi z czcionkami i kolorami wpisanymi w style="" — wyrównujemy do sklepu */
.elx-kat__lead *, .elx-kat__opis * { font-family: inherit !important; font-size: inherit !important; color: inherit !important; background: transparent !important; }
.elx-kat__lead a, .elx-kat__opis a { color: #0a2540 !important; text-decoration: underline; text-underline-offset: 2px; }
.elx-kat__lead a:hover, .elx-kat__opis a:hover { color: #166de0 !important; }
.elx-kat__opis img { max-width: 100%; height: auto; }
.elx-kat__wiecej { max-width: 1200px; }
.elx-kat__wiecej > summary { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border-bottom: 2px solid #bdd027; color: #0a2540; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.elx-kat__wiecej > summary::-webkit-details-marker { display: none; }
.elx-kat__wiecej > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.elx-kat__wiecej > summary:hover { color: #166de0; border-bottom-color: #166de0; }
.elx-kat__wiecej[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.elx-kat__wiecej[open] > summary { margin-bottom: 10px; }
/* B. Kafle podkategorii: kwadratowe zdjęcie na białym tle, granatowa nazwa (link na cały kafel), 1 zdanie opisu, do 4 linków niższego poziomu. */
.elx-pod { margin: 0 0 28px; }
.elx-pod__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.elx-pod__kafel { position: relative; display: grid; grid-template-columns: 80px 1fr; grid-template-areas: "img tekst" "l3 l3"; align-items: center; align-content: start; gap: 0 14px; margin: 0; padding: 14px; border: 1px solid #d3dbe3; border-radius: 6px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.elx-pod__kafel:hover { border-color: #b8c6d5; box-shadow: 0 6px 20px rgba(10, 37, 64, .10); transform: translateY(-1px); }
.elx-pod__kafel:focus-within { border-color: #166de0; }
/* pole zdjęcia: kwadrat, białe tło; bez zdjęcia (zanim dojdzie zdjęcie towaru albo cecha ZDJĘCIE GRUPY) szary kwadrat z ikoną kategorii */
.elx-pod__img { grid-area: img; display: block; width: 80px; height: 80px; overflow: hidden; border: 1px solid #eef2f6; border-radius: 6px;
background: #f4f6f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b1c0' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 7.5 12 12l9-4.5L12 3Z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5M3 16.5 12 21l9-4.5'/%3E%3C/svg%3E") center / 30px no-repeat; }
.elx-pod__img img { display: block; width: 100%; height: 100%; padding: 6px; box-sizing: border-box; object-fit: contain; background: #fff; animation: elx-pojaw .25s ease-out; }
@keyframes elx-pojaw { from { opacity: 0; } to { opacity: 1; } }
.elx-pod__tekst { grid-area: tekst; min-width: 0; }
/* globalny styl h2 sklepu (pasek z lewej, odstępy, wersaliki) tu nie pasuje */
.elx-pod__nazwa { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 16px; line-height: 1.3; font-weight: 700; text-transform: none; letter-spacing: 0; }
.elx-pod__nazwa::before, .elx-pod__nazwa::after { display: none !important; }
.elx-pod__nazwa a { padding-right: 16px; color: #0a2540; text-decoration: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E") right 1px center / 11px no-repeat; }
.elx-pod__nazwa a::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.elx-pod__kafel:hover .elx-pod__nazwa a, .elx-pod__nazwa a:focus-visible { color: #166de0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23166de0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E"); }
.elx-pod__opis { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #586674; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.elx-pod__l3 { grid-area: l3; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #eef2f6; list-style: none; }
.elx-pod__l3 li { margin: 0; padding: 0; list-style: none; }
.elx-pod__l3 li::before { display: none; }
/* .elx-pod przed: globalna reguła a:not(:has(*)):not(.btn-ui) z desktop1.css (pogrubienie) ma tę samą wagę i wygrywa kolejnością */
.elx-pod .elx-pod__l3 a { position: relative; z-index: 1; display: inline-block; padding: 3px 10px; border: 1px solid #d3dbe3; border-radius: 6px; background: #f6f6f6; color: #0a2540; font-size: 13px; font-weight: 400; line-height: 1.4; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.elx-pod .elx-pod__l3 a:hover, .elx-pod .elx-pod__l3 a:focus-visible { border-color: #166de0; background: #fff; color: #166de0; }
@media (prefers-reduced-motion: reduce) {
.elx-pod__kafel, .elx-pod__l3 a { transition: none; }
.elx-pod__kafel:hover { transform: none; }
.elx-pod__img img { animation: none; }
}
/* telefon: 2 kolumny, zdjęcie nad nazwą, opis w 2 liniach, bez linków niższego poziomu (są w menu ☰ i na stronie podkategorii) */
@media (max-width: 767px) {
.elx-kat, .elx-pod { padding: 0 12px; }
.elx-kat__h1 { font-size: 23px; }
.elx-kat__lead, .elx-kat__opis { font-size: 15px; }
.elx-pod__lista { grid-template-columns: 1fr 1fr; gap: 8px; }
.elx-pod__kafel { grid-template-columns: 1fr; grid-template-areas: "img" "tekst"; justify-items: center; gap: 8px; padding: 12px 8px; text-align: center; }
.elx-pod__img { width: 72px; height: 72px; }
.elx-pod__nazwa { font-size: 14.5px; }
.elx-pod__nazwa a { padding-right: 0; background: none !important; }
.elx-pod__opis { font-size: 12.5px; -webkit-line-clamp: 2; }
.elx-pod__l3 { display: none; }
}
/* ===== KONIEC EL-MAX: kategorie ===== */
/* ===== ELMAX pakiet3: paleta B — ceny i napisy na limonce (kolory/wariant-b/regula-cen.css) ===== */
/* ELMAX wariant B: limonka tylko jako tło, napisy na niej i ceny w granacie */
/* 1) teksty, które biorą kolor z lowerPriceAndCart: ceny, „Darmowa dostawa od”, stan, wybór koszyka */
body .related-document-ui .netto-price-ui,
body .new-price-ui,
body .cart-quantity-ui,
body .price-ui,
body .recommended-products-list-ui .minibox-product-ui .price-ui,
body .recommended-products-list-ui .minibox-product-ui .brutto-price-ui,
body .change-cart-ui .price-ui,
body .free-delivery-from-ui,
body .details-wrapper-ui .netto-price-ui,
body .cart-ui .netto-price-ui,
body .order-ui .netto-price-ui,
body .change-cart-arrows-ui,
body .choose-cart-form-ui,
body .add-variants-to-cart-from-products-list-popup-background-ui .netto-ui,
body .product-presentation-ui .add-to-cart-border-container-ui .netto-price-ui,
body .product-presentation-ui .right-column-ui .netto-ui,
body .product-presentation-ui .shop-ui .stock-exist-ui,
body .product-presentation-ui .sets-ui .netto-ui,
body .product-presentation-ui .add-to-cart-border-container-ui .netto-price-ui .currency-ui { color:#0a2540; }
/* 2) białe napisy na tle lowerPriceAndCart → granat; po najechaniu tło jest granatowe (cartButtonHover/hoverOverButton) → biały */
body .manufacturer-container-ui li>button.toggle-cart-type-ui,
body .button-container-ui .cart-change-ui,
body .produce-offer-ui { color:#0a2540; }
body .manufacturer-container-ui li>button.toggle-cart-type-ui:hover,
body .button-container-ui .cart-change-ui:hover,
body .produce-offer-ui:hover { color:#ffffff; }
/* strzałka „Wróć do zakupów”/„Powrót”: biała na sztywno i limonkowe tło są w szablonie tylko do 1279 px — bez @media łatka gasiła ją na desktopie */
@media screen and (max-width: 1279px) {
body .manufacturer-container-ui .login-back-ui i { color:#0a2540 !important; }
body .manufacturer-container-ui .login-back-ui:hover i { color:#ffffff !important; }
}
/* ikona wózka po najechaniu na nią samą: szablon daje lowerPriceAndCartFont (granat) na tle cartButtonHover (granat) */
body .add-to-cart-ui:not(.change-ui) i:hover { color:#ffffff; }
/* 2a) „produce-offer” w granatowym pasku Strefy klienta: napis i ikona (maska z tłem #fff) — widoczne tylko po zalogowaniu, sprawdzić po wdrożeniu */
body .customer-profile-header-menu-ui ul li>.produce-offer-ui, body .customer-profile-header-menu-ui ul li>.produce-offer-ui i, body .customer-profile-header-menu-ui ul li>.produce-offer-ui span { color:#0a2540; }
body .customer-profile-header-menu-ui ul li>.produce-offer-ui .icon-ui { background-color:#0a2540; }
body .customer-profile-header-menu-ui ul li>.produce-offer-ui:hover, body .customer-profile-header-menu-ui ul li>.produce-offer-ui:hover i, body .customer-profile-header-menu-ui ul li>.produce-offer-ui:hover span { color:#ffffff; }
body .customer-profile-header-menu-ui ul li>.produce-offer-ui:hover .icon-ui { background-color:#ffffff; }
/* 2b) „Dodaj do koszyka” w trybie edycji zamówienia ma tło granatowe (primaryColor), a napis z lowerPriceAndCartFont (granat) → biały */
body .add-to-cart-ui.editing-order-ui, body .add-to-cart-ui.editing-order-ui:hover { color:#ffffff; }
/* 3) zaznaczone pola w wyszukiwaniu zaawansowanym: granat jak pozostałe checkboxy (biały znacznik) */
body .advanced-search-ui .control-ui input:checked~.control-indicator-ui,
body .advanced-search-ui .control-ui:hover input:not([disabled]):checked~.control-indicator-ui,
body .advanced-search-ui .control-ui input:checked:focus~.control-indicator-ui,
body .advanced-search-ui .control-ui input:disabled~.control-indicator-ui { background:#0a2540; }
/* 4) obwódka fokusu z klawiatury: 2 px zamiast 1 px (kolor z focusVisibleColor) */
body .keyboard-focus, body *:focus-visible, body[data-using-keyboard=true] :focus { outline-width:2px !important; }
/* ===== KONIEC ELMAX: paleta B ===== */
/* ===== ELMAX pakiet3: warstwa graficzna — ikony (generuje warstwa/ikony.js) ===== */
/* Ikony themify (font z 2014 r.) zastąpione jednym zestawem liniowych ikon: maska SVG na ::before, kolor = kolor tekstu (currentColor). Klasy ti-* zostają (używa ich JS). */
:root{--elx-i-koszyk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.2 10.3a1.6 1.6 0 0 0 1.6 1.2h8.3a1.6 1.6 0 0 0 1.6-1.2L20.5 8H6.1'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E");--elx-i-szukaj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20.5 20.5l-4.8-4.8'/%3E%3C/svg%3E");--elx-i-uzytkownik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.6-3.5 3.6-5.8 7.5-5.8s6.9 2.3 7.5 5.8'/%3E%3C/svg%3E");--elx-i-dodajUzytk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20.5c.6-3.5 3.3-5.8 7-5.8 1.4 0 2.7.3 3.7.9M18.5 14v6M15.5 17h6'/%3E%3C/svg%3E");--elx-i-wycena:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z'/%3E%3Cpath d='M14 3v5h5M9 12.5h6M9 16.5h4'/%3E%3C/svg%3E");--elx-i-filtr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");--elx-i-sortuj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M4 12h7M4 18h4M18 5v14M15 16l3 3 3-3'/%3E%3C/svg%3E");--elx-i-widokTabela:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");--elx-i-widokLista:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='3.5' y='14' width='6' height='6' rx='1.5'/%3E%3Cpath d='M13 6h7.5M13 9h4.5M13 16h7.5M13 19h4.5'/%3E%3C/svg%3E");--elx-i-widokKafle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");--elx-i-dol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");--elx-i-gora:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");--elx-i-lewo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");--elx-i-prawo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");--elx-i-lewo2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17l-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E");--elx-i-prawo2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 17l5-5-5-5M6 17l5-5-5-5'/%3E%3C/svg%3E");--elx-i-strzalkaDol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");--elx-i-zamknij:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");--elx-i-telefon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h3l1.6 4.1-2.1 1.4a11 11 0 0 0 7 7l1.4-2.1 4.1 1.6v3a2 2 0 0 1-2.1 2A16.5 16.5 0 0 1 3.5 5.6a2 2 0 0 1 2-2.1z'/%3E%3C/svg%3E");--elx-i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7.5l8.5 6 8.5-6'/%3E%3C/svg%3E");--elx-i-zaloguj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h3.5A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5H14M10 16l4-4-4-4M14 12H4'/%3E%3C/svg%3E");--elx-i-wyloguj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6.5A2.5 2.5 0 0 0 4 6.5v11A2.5 2.5 0 0 0 6.5 20H10M16 16l4-4-4-4M20 12H9'/%3E%3C/svg%3E");--elx-i-klodka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");--elx-i-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");--elx-i-producenci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l5 3V10l5 3V5h4l1 16zM3 21h18'/%3E%3C/svg%3E");--elx-i-dom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11L12 4l8.5 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E");--elx-i-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");--elx-i-pobierz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E");--elx-i-spinacz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8.1 8.1a5 5 0 0 1-7.1-7.1L13 4.4a3.3 3.3 0 0 1 4.7 4.7l-8.2 8.2a1.7 1.7 0 0 1-2.4-2.4l7.4-7.4'/%3E%3C/svg%3E");--elx-i-oko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");--elx-i-odswiez:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5'/%3E%3C/svg%3E");--elx-i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");--elx-i-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--elx-i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E");--elx-i-drukuj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3.5h10V9'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E");--elx-i-udostepnij:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5.5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='18.5' r='2.5'/%3E%3Cpath d='M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1'/%3E%3C/svg%3E");--elx-i-opis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 10.5h16M4 15h16M4 19.5h9'/%3E%3C/svg%3E");--elx-i-cechy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3M11 8h9M4 16h9M17 16h3'/%3E%3Ccircle cx='9' cy='8' r='2'/%3E%3Ccircle cx='15' cy='16' r='2'/%3E%3C/svg%3E");--elx-i-opinie:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5a2 2 0 0 1-2 2H8l-4.5 4V5.5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");--elx-i-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7L11.5 6.8M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.5-1.5'/%3E%3C/svg%3E");--elx-i-porownaj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='13.5' y='4' width='7' height='16' rx='1.5'/%3E%3C/svg%3E");--elx-i-zmien:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 7.5L7 4l3.5 3.5M17 20V4M13.5 16.5L17 20l3.5-3.5'/%3E%3C/svg%3E");--elx-i-lista:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17.5' rx='2.5'/%3E%3Cpath d='M9 3.5V2.5h6v1M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E");--elx-i-torba:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.5H6zM9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");--elx-i-zapisz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v5h7V4M8 20v-6h8v6'/%3E%3C/svg%3E");--elx-i-edytuj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");--elx-i-wiadomosc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5a2 2 0 0 1-2 2H8l-4.5 4V5.5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");--elx-i-teczka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.5'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M3 12.5h18'/%3E%3C/svg%3E");--elx-i-strzalkaPrawo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");--elx-i-strzalkaLewo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");--elx-i-kosz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6 7l1 13h10l1-13M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E");--elx-i-dostawa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 16.5V6H3v10.5h2M14 9.5h3.6l3.4 3.6v3.4h-2M9 16.5h6'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");--elx-i-mapa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5l-5.5 2v13l5.5-2 6 2 5.5-2v-13l-5.5 2zM9 4.5v13M15 6.5v13'/%3E%3C/svg%3E");--elx-i-pinezka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");--elx-i-komorka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");--elx-i-portfel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7V5.5A1.5 1.5 0 0 0 16.5 4h-11A2.5 2.5 0 0 0 3 6.5v11A2.5 2.5 0 0 0 5.5 20h13a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2H5.5A2.5 2.5 0 0 1 3 6.5'/%3E%3Cpath d='M16.5 13.5h.01'/%3E%3C/svg%3E");--elx-i-pomoc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.3a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.7M12 17h.01'/%3E%3C/svg%3E");--elx-i-dzwonek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15zM10 20.5h4'/%3E%3C/svg%3E");--elx-i-zegar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");--elx-i-obraz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M20.5 15.5l-4.5-4.5-8.5 8.5'/%3E%3C/svg%3E");--elx-i-brak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");--elx-i-uwaga:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E");--elx-i-puchar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0zM8 6H4.5a3 3 0 0 0 3.5 4M16 6h3.5a3 3 0 0 1-3.5 4M12 13v4M8.5 20.5h7M10 17h4'/%3E%3C/svg%3E")}
html body .ti-shopping-cart::before,html body .ti-search::before,html body .ti-user::before,html body .ti-bar-chart-alt::before,html body .ti-filter::before,html body .ti-arrow-down::before,html body .ti-view-list::before,html body .ti-view-list-alt::before,html body .ti-view-grid::before,html body .ti-angle-down::before,html body .ti-angle-up::before,html body .ti-angle-left::before,html body .ti-angle-right::before,html body .ti-angle-double-left::before,html body .ti-angle-double-right::before,html body .ti-close::before,html body .ti-headphone-alt::before,html body .ti-email::before,html body .ti-shift-right::before,html body .ti-power-off::before,html body .ti-unlock::before,html body .ti-lock::before,html body .ti-menu::before,html body .ti-shield::before,html body .ti-home::before,html body .ti-check::before,html body .ti-download::before,html body .ti-clip::before,html body .ti-eye::before,html body .ti-reload::before,html body .ti-plus::before,html body .ti-minus::before,html body .ti-info-alt::before,html body .ti-receipt::before,html body .ti-settings::before,html body .ti-link::before,html body .ti-panel::before,html body .ti-exchange-vertical::before,html body .ti-clipboard::before,html body .ti-bag::before,html body .ti-save::before,html body .ti-pencil-alt::before,html body .ti-comments::before,html body .ti-briefcase::before,html body .ti-arrow-right::before,html body .ti-arrow-left::before,html body .ti-trash::before,html body .ti-truck::before,html body .ti-map-alt::before,html body .ti-location-pin::before,html body .ti-mobile::before,html body .ti-wallet::before,html body .ti-help::before,html body .ti-bell::before,html body .ti-time::before,html body .ti-image::before,html body .ti-na::before,html body .ti-alert::before,html body .ti-cup::before{content:""!important;display:inline-block;width:1em;height:1em;font-family:inherit!important;background-color:currentColor!important;background-image:none!important;-webkit-mask:var(--elx-ikona) center/contain no-repeat;mask:var(--elx-ikona) center/contain no-repeat;vertical-align:-.15em}
html body .ti-shopping-cart{--elx-ikona:var(--elx-i-koszyk)}
html body .ti-search{--elx-ikona:var(--elx-i-szukaj)}
html body .ti-user{--elx-ikona:var(--elx-i-uzytkownik)}
html body .ti-bar-chart-alt{--elx-ikona:var(--elx-i-wycena)}
html body .ti-filter{--elx-ikona:var(--elx-i-filtr)}
html body .ti-arrow-down{--elx-ikona:var(--elx-i-sortuj)}
html body .ti-view-list{--elx-ikona:var(--elx-i-widokTabela)}
html body .ti-view-list-alt{--elx-ikona:var(--elx-i-widokLista)}
html body .ti-view-grid{--elx-ikona:var(--elx-i-widokKafle)}
html body .ti-angle-down{--elx-ikona:var(--elx-i-dol)}
html body .ti-angle-up{--elx-ikona:var(--elx-i-gora)}
html body .ti-angle-left{--elx-ikona:var(--elx-i-lewo)}
html body .ti-angle-right{--elx-ikona:var(--elx-i-prawo)}
html body .ti-angle-double-left{--elx-ikona:var(--elx-i-lewo2)}
html body .ti-angle-double-right{--elx-ikona:var(--elx-i-prawo2)}
html body .ti-close{--elx-ikona:var(--elx-i-zamknij)}
html body .ti-headphone-alt{--elx-ikona:var(--elx-i-telefon)}
html body .ti-email{--elx-ikona:var(--elx-i-mail)}
html body .ti-shift-right{--elx-ikona:var(--elx-i-zaloguj)}
html body .ti-power-off{--elx-ikona:var(--elx-i-wyloguj)}
html body .ti-unlock{--elx-ikona:var(--elx-i-dodajUzytk)}
html body .ti-lock{--elx-ikona:var(--elx-i-klodka)}
html body .ti-menu{--elx-ikona:var(--elx-i-menu)}
html body .ti-shield{--elx-ikona:var(--elx-i-producenci)}
html body .ti-home{--elx-ikona:var(--elx-i-dom)}
html body .ti-check{--elx-ikona:var(--elx-i-ok)}
html body .ti-download{--elx-ikona:var(--elx-i-pobierz)}
html body .ti-clip{--elx-ikona:var(--elx-i-spinacz)}
html body .ti-eye{--elx-ikona:var(--elx-i-oko)}
html body .ti-reload{--elx-ikona:var(--elx-i-odswiez)}
html body .ti-plus{--elx-ikona:var(--elx-i-plus)}
html body .ti-minus{--elx-ikona:var(--elx-i-minus)}
html body .ti-info-alt{--elx-ikona:var(--elx-i-info)}
html body .ti-receipt{--elx-ikona:var(--elx-i-opis)}
html body .ti-settings{--elx-ikona:var(--elx-i-cechy)}
html body .ti-link{--elx-ikona:var(--elx-i-link)}
html body .ti-panel{--elx-ikona:var(--elx-i-porownaj)}
html body .ti-exchange-vertical{--elx-ikona:var(--elx-i-zmien)}
html body .ti-clipboard{--elx-ikona:var(--elx-i-lista)}
html body .ti-bag{--elx-ikona:var(--elx-i-torba)}
html body .ti-save{--elx-ikona:var(--elx-i-zapisz)}
html body .ti-pencil-alt{--elx-ikona:var(--elx-i-edytuj)}
html body .ti-comments{--elx-ikona:var(--elx-i-wiadomosc)}
html body .ti-briefcase{--elx-ikona:var(--elx-i-teczka)}
html body .ti-arrow-right{--elx-ikona:var(--elx-i-strzalkaPrawo)}
html body .ti-arrow-left{--elx-ikona:var(--elx-i-strzalkaLewo)}
html body .ti-trash{--elx-ikona:var(--elx-i-kosz)}
html body .ti-truck{--elx-ikona:var(--elx-i-dostawa)}
html body .ti-map-alt{--elx-ikona:var(--elx-i-mapa)}
html body .ti-location-pin{--elx-ikona:var(--elx-i-pinezka)}
html body .ti-mobile{--elx-ikona:var(--elx-i-komorka)}
html body .ti-wallet{--elx-ikona:var(--elx-i-portfel)}
html body .ti-help{--elx-ikona:var(--elx-i-pomoc)}
html body .ti-bell{--elx-ikona:var(--elx-i-dzwonek)}
html body .ti-time{--elx-ikona:var(--elx-i-zegar)}
html body .ti-image{--elx-ikona:var(--elx-i-obraz)}
html body .ti-na{--elx-ikona:var(--elx-i-brak)}
html body .ti-alert{--elx-ikona:var(--elx-i-uwaga)}
html body .ti-cup{--elx-ikona:var(--elx-i-puchar)}
/* zakładka „Opinie” na karcie towaru ma w szablonie ikonę pobierania */
html body .product-presentation-menu-ui li[data-scroll-to-paragraph=".reviews-js"] .ti-download{--elx-ikona:var(--elx-i-opinie)}
/* drukuj / udostępnij: sprite fontawesome → maska na <svg> */
html body svg.print-icon-ui,html body svg.share-icon-ui{background-color:currentColor;-webkit-mask:var(--elx-ikona) center/contain no-repeat;mask:var(--elx-ikona) center/contain no-repeat;fill:none}
html body svg.print-icon-ui{--elx-ikona:var(--elx-i-drukuj)}html body svg.share-icon-ui{--elx-ikona:var(--elx-i-udostepnij)}
html body svg.print-icon-ui>use,html body svg.share-icon-ui>use{display:none}
/* ===== KONIEC ELMAX: ikony ===== */
/* ===== ELMAX pakiet3: warstwa graficzna (15.10.2026) ===== */
/* Nowoczesny, prosty wygląd w palecie B: granat #0a2540 (tekst, przyciski), limonka #bdd027 (koszyk, akcenty), niebieski #166de0 (najechanie, fokus).
Tylko CSS — klasy szablonu i JS bez zmian. Przedrostek „html body” wygrywa z regułami desktop1/desktop2/mobile.css, które ładują się po layout0.css.
Ikony: blok „warstwa graficzna — ikony” wyżej. Wycofanie: usunąć ten blok (i blok ikon) z końca layout0.css. */
:root {
--elx-granat: #0a2540; --elx-granat-2: #163a5f; --elx-limonka: #bdd027; --elx-limonka-2: #cddc4f; --elx-niebieski: #166de0;
--elx-tekst: #1f2933; --elx-szary: #5b6875; --elx-ramka: #dde3ea; --elx-ramka-2: #c9d3dd; --elx-tlo: #f4f6f9;
--elx-r: 6px; --elx-r-karta: 10px;
--elx-cien: 0 10px 28px rgba(10, 37, 64, .12); --elx-cien-maly: 0 1px 3px rgba(10, 37, 64, .08);
}
/* ---------- 1. Fokus z klawiatury: wyraźny niebieski pierścień ---------- */
html body a:focus-visible, html body button:focus-visible, html body [tabindex]:focus-visible, html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible {
outline: 2px solid var(--elx-niebieski) !important; outline-offset: 2px !important;
}
/* ---------- 2. Pasek górny (telefon, e-mail, język, logowanie): granatowy, drobny tekst, limonkowe ikony ---------- */
@media screen and (min-width: 1280px) {
html body .main-header-ui .header-ui { background: var(--elx-granat); }
html body .main-header-ui .header-ui a, html body .main-header-ui .header-ui span, html body .main-header-ui .header-ui button,
html body .main-header-ui .header-ui .header-option-label-ui { color: #e6ecf2; font-size: 13px; letter-spacing: .01em; }
html body .main-header-ui .header-ui i { color: var(--elx-limonka); font-size: 16px; }
html body .main-header-ui .header-ui .dropdown-icon-ui { color: #e6ecf2; font-size: 12px; }
html body .main-header-ui .header-ui a:hover, html body .main-header-ui .header-ui a:hover span, html body .main-header-ui .header-ui a:hover i,
html body .main-header-ui .header-ui button:hover i { color: #fff; }
html body .main-header-ui .header-ui .flag-ui { border-radius: 2px; }
/* rozwijana lista języków zostaje biała — tekst w niej ciemny */
html body .main-header-ui .header-ui .dropdowns-ui span, html body .main-header-ui .header-ui .dropdowns-ui p { color: var(--elx-tekst); }
/* okienka na białym tle (kontakt z opiekunem, język): ikony granatowe, nie limonkowe (N10, 15.10) */
html body .main-header-ui .header-ui .dropdowns-ui i { color: var(--elx-granat); }
}
/* ---------- 3. Nagłówek: pole szukania, zapytanie o wycenę, koszyk ---------- */
@media screen and (min-width: 1280px) {
html body .input-field-search-ui .search-ui {
height: 48px; border: 1.5px solid var(--elx-ramka-2); border-radius: 24px; opacity: 1; background: #fff;
padding: 0 60px 0 22px; color: var(--elx-tekst); font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
html body .input-field-search-ui .search-ui::placeholder { color: var(--elx-szary); opacity: 1; } /* #5b6875: 5,7:1 (było #7b8794 = 3,7:1) */
html body .input-field-search-ui .search-ui:hover { border-color: #9fb0c2; }
html body .input-field-search-ui .search-ui:focus { border-color: var(--elx-niebieski); box-shadow: 0 0 0 4px rgba(22, 109, 224, .14); outline: none !important; }
html body .input-field-search-ui .search-btn-ui {
top: 4px; bottom: auto; right: 4px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--elx-granat); color: #fff; transition: background .15s;
}
html body .input-field-search-ui .search-btn-ui:hover { background: var(--elx-niebieski); color: #fff; }
}
/* telefon/tablet: pole w pasku pod logo — zaokrąglone, przycisk zostaje na swoim miejscu (nowa ikona) */
@media screen and (max-width: 1279px) {
html body .input-field-search-ui .search-ui { border: 1.5px solid var(--elx-ramka-2); border-radius: 20px; padding: 0 16px; color: var(--elx-tekst); font-size: 16px; }
html body .input-field-search-ui .search-ui:focus { border-color: var(--elx-niebieski); outline: none !important; box-shadow: 0 0 0 3px rgba(22, 109, 224, .14); }
html body .input-field-search-ui .search-btn-ui { font-size: 22px; }
}
@media screen and (min-width: 1280px) {
/* zapytanie o wycenę: ikona dokumentu nad podpisem */
html body .header-middle-section-ui .inquiry-icon-container-ui > i { font-size: 27px; color: var(--elx-granat); }
html body .header-middle-section-ui .inquiry-icon-container-ui > p { font-size: 13px; margin-top: 4px; color: var(--elx-tekst); }
html body .header-middle-section-ui .inquiry-icon-container-ui:hover > i, html body .header-middle-section-ui .inquiry-icon-container-ui:hover > p { color: var(--elx-niebieski); }
/* koszyk: wyraźny limonkowy przycisk z ikoną, nazwą koszyka i kwotą */
html body .header-shopping-cart-ui .header-cart-box-ui {
display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; align-content: center;
width: auto; min-width: 176px; height: 62px; padding: 8px 18px 8px 16px; margin-top: 12px;
border: 0; border-radius: var(--elx-r-karta); background: var(--elx-limonka); text-align: left;
box-shadow: 0 2px 6px rgba(10, 37, 64, .14); transition: background .15s, box-shadow .15s;
}
html body .header-shopping-cart-ui .header-cart-box-ui:hover { background: var(--elx-granat); border: 0; box-shadow: var(--elx-cien); }
html body .header-shopping-cart-ui .header-cart-box-ui .current-cart-name-ui {
position: static; grid-column: 2; grid-row: 1; font-size: 12px; line-height: 1.2; color: var(--elx-granat); opacity: .85;
}
html body .header-shopping-cart-ui .header-cart-box-ui .carts-ui { grid-column: 1; grid-row: 1 / span 2; font-size: 30px; line-height: 1; text-align: center; color: var(--elx-granat); }
html body .header-shopping-cart-ui .header-cart-box-ui .cart-amount-ui { grid-column: 2; grid-row: 2; margin: 0; font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--elx-granat); }
html body .header-shopping-cart-ui .header-cart-box-ui .customer-currency-carts-ui { font-size: 15px; margin: 0; font-weight: 400; }
html body .header-shopping-cart-ui .header-cart-box-ui:hover > span, html body .header-shopping-cart-ui .header-cart-box-ui:hover .cart-amount-ui,
html body .header-shopping-cart-ui .header-cart-box-ui:hover .customer-currency-carts-ui { color: #fff; }
html body .header-shopping-cart-ui .header-cart-box-ui:hover i { color: var(--elx-limonka); }
html body .header-cart-box-ui .cart-in-header-ui .counter-bg-ui { top: -8px; right: -10px; width: 20px; height: 20px; background: var(--elx-granat); box-shadow: 0 0 0 2px var(--elx-limonka); }
}
/* ---------- 4. Pasek menu: biały, bez kratek; „Kategorie” jako granatowy przycisk ---------- */
@media screen and (min-width: 1280px) {
html body .main-navigation-bar-ui .manufacturer-container-ui .main-navigation-bar-links-ui { background: #fff; border-left: 0; }
html body .main-navigation-bar-ui .manufacturer-container-ui li { border-right: 0; border-bottom-color: var(--elx-ramka); }
/* linia pod menu na całą szerokość (komórki kończyły się na 1118 px, dalej linii nie było) */
html body .main-navigation-bar-ui .main-navigation-bar-links-ui { box-shadow: inset 0 -1px 0 var(--elx-ramka); }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui li { border-bottom-color: transparent; }
/* aktywna pozycja (np. „Producenci” na stronie producentów): bez wystającej zakładki z granatową belką — limonkowe podkreślenie jak przy najechaniu */
html body .main-navigation-bar-ui .main-navigation-bar-links-ui li.active-bar-ui {
margin-top: 0 !important; padding: 0 !important; height: auto; align-self: stretch; border: 0; background: transparent; box-shadow: inset 0 -3px 0 var(--elx-limonka);
}
html body .main-navigation-bar-ui .main-navigation-bar-links-ui li.active-bar-ui::after { display: none; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui li.active-bar-ui .page-label-ui { font-weight: 700; color: var(--elx-granat); }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui ul li a {
position: relative; font-size: 16px; font-weight: 500; color: var(--elx-granat); background: transparent; transition: color .15s;
}
html body .main-navigation-bar-ui .main-navigation-bar-links-ui ul li a::after {
content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--elx-limonka); transition: left .2s, right .2s;
}
html body .main-navigation-bar-ui .main-navigation-bar-links-ui ul li a:hover { background: transparent; color: var(--elx-niebieski); }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui ul li a:hover::after { left: 24px; right: 24px; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui .header-manufacturers-icon-ui { font-size: 18px; margin-right: 4px; }
html body .header-categories-ui .categories-option-ui .categories-label-ui,
html body .header-categories-ui .categories-opened-ui .categories-label-ui { background: var(--elx-granat); color: #fff; font-weight: 500; letter-spacing: .02em; }
html body .header-categories-ui .categories-option-ui .categories-label-ui:hover,
html body .header-categories-ui .categories-opened-ui .categories-label-ui:hover { background: var(--elx-granat-2); color: #fff; }
html body .header-categories-ui .categories-label-ui .header-categories-icon-ui { color: var(--elx-limonka); font-size: 22px; }
}
/* ---------- 5. Lewa kolumna kategorii (strona główna i listy) ---------- */
@media screen and (min-width: 1280px) {
html body .category-column-ui.with-filters-ui, html body .category-column-ui { background: #fff; }
/* desktop1.css: ciężki szary cień 2.5px 5px 5px rgba(0,0,0,.2) — cienka linia + miękki granatowy cień */
html body .category-column-ui { box-shadow: 1px 0 0 var(--elx-ramka), 8px 0 24px -12px rgba(10, 37, 64, .18); }
html body .category-column-ui .category-label-ui, html body .category-column-ui .prev-level-ui { background: #fff; color: var(--elx-tekst); }
html body .category-column-ui .category-links-ui { border-bottom: 1px solid #edf1f5; }
html body .category-column-ui .category-links-ui:not(.current-ui) .category-label-ui:hover, html body .category-column-ui .prev-level-ui:hover,
html body .category-column-ui .category-links-ui .next-level-ui:hover { background: var(--elx-tlo); color: var(--elx-niebieski); }
html body .category-column-ui .category-amount-ui { color: var(--elx-szary); } /* 5,7:1 (było #8a96a3 = 3,0:1) */
html body .category-column-ui .next-level-ui { color: var(--elx-szary); background: transparent; }
}
/* ---------- 6. Przyciski: jedno zaokrąglenie, wyraźne najechanie ---------- */
html body .btn-ui, html body .button-ui, html body .btn-solid-ui, html body .btn-outline-ui, html body .btn-ghost-ui,
html body .add-to-cart-ui, html body .add-to-inquiry-ui, html body .go-to-cart-ui, html body .compare-ui,
html body .filters-apply-button-ui, html body .reset-filters-ui, html body .toggle-filters-button-ui, html body .change-view-ui,
html body .pagination-ui button, html body .pagination-ui input, html body .selected-filter-item-ui, html body .form-button-ui, html body .read-more-ui,
html body .after-adding-to-cart-popup-ui .mb10-ui {
border-radius: var(--elx-r);
}
html body .btn-ui, html body .button-ui, html body .btn-solid-ui { transition: background .15s, color .15s, box-shadow .15s; }
html body .stepper-and-adding-ui .btn-ui.block-ui { padding: 10px 12px; font-size: 13px; font-weight: 500; }
/* „Dodaj do koszyka”: limonka + granatowy napis, po najechaniu granat + biały (paleta B); nieaktywny (np. pusta lista ulubionych) zostaje szary z desktop1/desktop2.css (N10, 15.10; :where — waga reguły bez zmian) */
html body .add-to-cart-ui:not(.change-ui):not(.editing-order-ui):where(:not(.disabled-button):not([disabled])) { background: var(--elx-limonka); color: var(--elx-granat); font-weight: 700; box-shadow: 0 1px 2px rgba(10, 37, 64, .12); }
html body .add-to-cart-ui:not(.change-ui):not(.editing-order-ui):where(:not(.disabled-button):not([disabled])):hover { background: var(--elx-granat); color: #fff; box-shadow: var(--elx-cien-maly); }
html body .add-to-cart-ui:not(.change-ui):not(.editing-order-ui):where(:not(.disabled-button):not([disabled])):hover i { color: var(--elx-limonka); }
/* licznik ilości: zaokrąglona grupa „− 1 +” */
html body .amount-stepper-ui .change-quantity-ui { background: #fff; color: var(--elx-granat); border-color: var(--elx-ramka-2); }
html body .amount-stepper-ui .change-quantity-ui:hover:not(.disabled-js) { background: var(--elx-tlo); color: var(--elx-niebieski); }
html body .amount-stepper-ui [name=quantity] { border-color: var(--elx-ramka-2); font-weight: 700; color: var(--elx-tekst); }
@media screen and (min-width: 1280px) {
html body .amount-stepper-ui .decrement-ui { border-radius: var(--elx-r) 0 0 var(--elx-r); }
html body .amount-stepper-ui .increment-ui { border-radius: 0 var(--elx-r) var(--elx-r) 0; }
}
/* telefon: na liście pole ilości jest nad przyciskami „− +” */
@media screen and (max-width: 1279px) {
html body .product-presentation-ui .amount-stepper-ui .decrement-ui { border-radius: var(--elx-r) 0 0 var(--elx-r); }
html body .product-presentation-ui .amount-stepper-ui .increment-ui { border-radius: 0 var(--elx-r) var(--elx-r) 0; }
html body .product-list-ui .amount-stepper-ui [name=quantity] { border-radius: var(--elx-r) var(--elx-r) 0 0; }
html body .product-list-ui .amount-stepper-ui .decrement-ui { border-radius: 0 0 0 var(--elx-r); }
html body .product-list-ui .amount-stepper-ui .increment-ui { border-radius: 0 0 var(--elx-r) 0; }
}
/* pola wyboru: zaokrąglone, znacznik jako ikona SVG zamiast fontu */
html body [type=checkbox] + .label-ui:not(.color-checkbox-ui)::before { border: 1.5px solid #7b8794; border-radius: 4px; color: transparent; } /* ramka pola 3,7:1 (było #aab7c4 = 2,0:1) */
html body [type=checkbox]:checked + .label-ui:not(.color-checkbox-ui)::before {
border-color: var(--elx-granat); color: transparent;
background: var(--elx-granat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 78% no-repeat;
}
html body [type=checkbox] + .label-ui:not(.color-checkbox-ui):hover::before { border-color: var(--elx-niebieski); }
/* okruszki: separator jako ta sama strzałka co w menu */
html body .breadcrumbs-ui li::after {
content: "" !important; font-family: inherit; width: 12px; height: 12px; margin: 0 8px; vertical-align: -1px;
background: #9aa5b1; -webkit-mask: var(--elx-i-prawo) center / contain no-repeat; mask: var(--elx-i-prawo) center / contain no-repeat;
}
html body .breadcrumbs-ui li a { color: var(--elx-granat); }
html body .breadcrumbs-ui li a:hover { color: var(--elx-niebieski); text-decoration: underline; }
/* ---------- 7. Lista towarów ---------- */
/* pasek nad listą: filtr, sortowanie, widoki */
html body .products-navigation-ui .sorting-options-ui .dropdown-trigger-ui { border-radius: var(--elx-r); }
html body .products-navigation-ui .sorting-options-icon-ui { font-size: 18px; }
@media screen and (min-width: 1280px) {
html body .products-navigation-ui .sorting-options-ui .open-dropdown-lq { height: 40px; padding: 0 14px; border: 1px solid var(--elx-ramka); background: #fff; color: var(--elx-granat); font-size: 15px; }
html body .products-navigation-ui .sorting-options-ui .open-dropdown-lq:hover { border-color: var(--elx-niebieski); color: var(--elx-niebieski); }
html body .products-navigation-ui .sorting-options-ui .toggle-filters-button-ui { height: 40px; font-size: 15px; }
html body .products-navigation-ui .change-view-ui { width: 40px; height: 40px; border: 1px solid var(--elx-ramka); background: #fff; color: var(--elx-szary); display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; }
html body .products-navigation-ui .change-view-ui .icons-filtering-ui { font-size: 21px; }
}
html body .products-navigation-ui .change-view-ui:hover { border-color: var(--elx-niebieski); color: var(--elx-niebieski); background: #fff; }
html body .products-navigation-ui .change-view-ui.btn-active-js { background: var(--elx-granat); border-color: var(--elx-granat); color: #fff; }
/* tabela „szybkie zakupy” i lista: białe wiersze z cienką linią, cena granatowa, stan jako etykieta */
html body .product-list-ui .product-item-ui, html body .product-list-ui.quick-shopping-view-js .product-item-ui:nth-child(odd) { background: #fff; border-bottom: 1px solid #e8edf2; transition: background .15s; }
html body .product-list-ui.quick-shopping-view-js .product-item-ui:hover, html body .product-list-ui.list-view-js .product-item-ui:hover { background: #f7f9fb; }
html body .product-list-ui .product-name-ui a { color: var(--elx-granat); }
html body .product-list-ui .product-name-ui a:hover { color: var(--elx-niebieski); }
html body .product-list-ui .product-item-ui .price-column-ui .price-ui, html body .product-list-ui .product-item-ui .final-price-column-ui .price-ui { color: var(--elx-granat) !important; font-weight: 700; }
html body .product-list-ui .stock-value-ui {
display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef2f6; color: var(--elx-tekst); font-size: 13px; line-height: 1.3; font-weight: 500;
}
html body .product-list-ui .stock-value-ui:empty { display: none; }
html body .products-header-ui { background: var(--elx-tlo); color: var(--elx-szary); }
/* kafelki towarów na stronie głównej i „Towary podobne” */
html body .minibox-product-ui { border: 1px solid var(--elx-ramka); border-radius: var(--elx-r-karta); background: #fff; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
html body .minibox-product-ui:hover { border-color: var(--elx-ramka-2); box-shadow: var(--elx-cien); }
html body .minibox-product-ui .product-name-ui { color: var(--elx-tekst); }
html body .minibox-product-ui .brutto-price-ui, html body .minibox-product-ui .price-ui { color: var(--elx-granat); font-weight: 700; font-size: 19px; }
html body .ribbon-ui { border-radius: 4px; font-weight: 500; letter-spacing: .02em; }
/* stronicowanie */
html body .pagination-ui .change-quantity-ui { width: auto; padding: 0 14px; background: #fff; border: 1px solid var(--elx-ramka-2); color: var(--elx-granat); }
html body .pagination-ui .change-quantity-ui:hover:not([disabled]) { border-color: var(--elx-niebieski); color: var(--elx-niebieski); }
html body .pagination-ui input { border: 1px solid var(--elx-ramka-2); }
/* ---------- 8. Filtry „na górze”: ramki jak karty ---------- */
html body .filters-up-ui .product-filters-ui > ul li.filter-item-ui {
border: 1px solid var(--elx-ramka); border-radius: var(--elx-r-karta); background: #fff; overflow: hidden; box-shadow: var(--elx-cien-maly);
}
html body .filters-up-ui .product-filters-ui > ul .filter-drop-ui { background: var(--elx-tlo); border-bottom: 1px solid var(--elx-ramka); padding: 9px 14px; }
html body .filters-up-ui .product-filters-ui > ul .filter-drop-ui .filter-heading-ui { font-size: 15px; font-weight: 700; color: var(--elx-granat); padding-left: 0; }
html body .filters-up-ui .product-filters-ui > ul .filter-value-list-ui { padding: 6px 14px 8px; }
/* wiersze wartości tylko na komputerze; telefon zostaje przy mobile.css (40 px wysokości, jak dziś) — runda 1, 15.10.
Wcięcie wiszące (runda 2): kwadrat stoi w lewym marginesie nazwy (position: absolute), więc druga linia długiej nazwy („ELEKTRO-PLAST / NASIELSK(1)”)
zaczyna się pod tekstem, a nie pod kwadratem, i nie wygląda jak osobna pozycja. top = odstęp + (wysokość linii − kwadrat z ramką) / 2: komputer 4 + (35 − 19) / 2, telefon (40 − 21) / 2. */
@media screen and (min-width: 1280px) {
html body .filters-up-ui .filter-value-list-ui .checkbox-ui:not(.color-checkbox-ui) [type=checkbox] + .label-ui { font-size: 14px; padding-top: 4px; padding-bottom: 4px; padding-left: 28px; color: var(--elx-tekst); }
html body .filters-up-ui .filter-value-list-ui .checkbox-ui:not(.color-checkbox-ui) [type=checkbox] + .label-ui::before { width: 17px; height: 17px; position: absolute; left: 0; top: 3.5px; margin: 0; }
}
@media screen and (max-width: 1279px) {
html body .product-filters-ui .filter-value-list-ui .checkbox-ui:not(.color-checkbox-ui) [type=checkbox] + .label-ui { padding-left: 31px; }
html body .product-filters-ui .filter-value-list-ui .checkbox-ui:not(.color-checkbox-ui) [type=checkbox] + .label-ui::before { position: absolute; left: 0; top: 9px; margin: 0; }
}
html body .filters-up-ui .filter-value-list-ui .checkbox-ui:hover .label-ui { color: var(--elx-niebieski); }
/* szersze okna filtrów (uwaga właściciela 15.10): 4 w rzędzie zamiast 5 (desktop2.css: 20%), 1280–1439 px — 3 (do potwierdzenia przez właściciela, runda 2); długie nazwy łamią się z wcięciem wiszącym (wyżej).
Tylko komputer: na telefonie zostaje mobile.css (2 w rzędzie, jak dziś) — runda 1, 15.10 */
@media screen and (min-width: 1280px) { html body .filters-up-ui .product-filters-ui > ul li.filter-item-ui { width: calc(25% - 16px); } }
@media screen and (min-width: 1280px) and (max-width: 1439px) { html body .filters-up-ui .product-filters-ui > ul li.filter-item-ui { width: calc(33.333% - 16px); } }
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui { border-radius: var(--elx-r); padding: 9px 16px; }
/* telefon: mobile.css daje paskowi „Filtruj / Sortowanie” 55 px pustego miejsca u góry (widok „na górze”) */
@media screen and (max-width: 1279px) {
html body .products-navigation-ui.filters-up-ui .sorting-views-container-ui { padding-top: 10px; }
/* „Filtruj” i „Sortowanie” jako jasne przyciski z ramką */
html body .products-navigation-ui .sorting-views-container-ui .sorting-options-ui .dropdown-trigger-ui { height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--elx-ramka); border-radius: var(--elx-r); background: #fff; color: var(--elx-granat); }
}
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui.expanded-js { background: var(--elx-granat); color: #fff; }
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui.expanded-js i { color: var(--elx-limonka); }
/* ---------- 9. Karta towaru ---------- */
html body .product-presentation-ui .page-title-details-ui { color: var(--elx-granat); font-weight: 700; letter-spacing: -.005em; }
html body .product-presentation-ui .add-to-cart-border-container-ui {
background: #fff; border: 1px solid var(--elx-ramka); border-radius: 12px; padding: 18px 20px; box-shadow: var(--elx-cien);
}
html body .product-presentation-ui .price-disclaimer-ui { border-radius: 8px; }
html body .product-presentation-ui .add-to-cart-border-container-ui .brutto-price-ui { font-size: 30px; font-weight: 700; }
html body .product-presentation-ui .add-to-cart-border-container-ui .netto-price-ui { color: var(--elx-szary); }
/* komputer: „Dodaj do koszyka” na całą szerokość ramki, „Większa ilość? Negocjujmy” pod nim jako drugi, cichszy przycisk */
@media screen and (min-width: 1280px) {
html body .product-presentation-ui .availability-ui { font-size: 15px; color: var(--elx-tekst); }
html body .product-presentation-ui .availability-ui .availability-image-ui { max-height: 22px; width: auto; vertical-align: middle; margin-left: 4px; }
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; margin-top: 14px; }
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui .add-to-cart-ui {
order: -1; flex: 1 1 100%; margin: 0; min-height: 54px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui .add-to-cart-ui i { font-size: 24px; }
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui .add-to-cart-ui .add-to-cart-label-ui span { display: inline; font-size: 17px; font-weight: 700; }
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui .add-to-inquiry-ui {
order: 1; flex: 1 1 100%; max-width: none; margin: 0; min-height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
background: #fff; color: var(--elx-granat); border: 1.5px solid var(--elx-ramka-2); transition: border-color .15s, color .15s;
}
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui .add-to-inquiry-ui:hover { border-color: var(--elx-niebieski); color: var(--elx-niebieski); background: #fff; }
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui .add-to-inquiry-ui i { font-size: 20px; margin: 0; }
html body .product-presentation-ui .add-buttons-container-ui.in-simple-product-ui .add-to-inquiry-ui .lower-text-ui { font-size: 14px; }
}
/* telefon: przyciski obok siebie jak w szablonie, tylko zaokrąglone */
@media screen and (max-width: 1279px) {
html body .product-presentation-ui .add-buttons-container-ui .add-to-inquiry-ui { border-color: var(--elx-ramka-2); color: var(--elx-granat); }
/* „Większa ilość? Negocjujmy”: mobile.css daje 10 px — za drobne */
html body .product-presentation-ui .add-buttons-container-ui .add-to-inquiry-ui .lower-text-ui { font-size: 12.5px; line-height: 1.25; }
}
/* zakładki: podkreślenie zamiast kratek */
html body .product-presentation-ui .product-presentation-menu-ui { border-bottom: 1px solid var(--elx-ramka); }
html body .product-presentation-ui .product-presentation-menu-ui li { border: 0; border-bottom: 3px solid transparent; color: var(--elx-granat); font-size: 15px; transition: color .15s, border-color .15s; }
html body .product-presentation-ui .product-presentation-menu-ui li:last-child { border-right: 0; }
html body .product-presentation-ui .product-presentation-menu-ui li:hover { color: var(--elx-niebieski); border-bottom-color: var(--elx-ramka-2); }
html body .product-presentation-ui .product-presentation-menu-ui li.active-js { border-bottom: 3px solid var(--elx-limonka); }
html body .product-presentation-ui .product-presentation-menu-ui li i { font-size: 18px; color: var(--elx-szary); }
/* ikony drukuj / zapytaj / udostępnij */
html body .product-presentation-ui .top-right-icons-ui button { color: var(--elx-granat); }
html body .product-presentation-ui .top-right-icons-ui button:hover { color: var(--elx-niebieski); }
html body .product-presentation-ui .top-right-icons-ui svg { width: 22px; height: 22px; }
/* ---------- 9a. Strzałki karuzel (baner główny, „Nowość”, „Towary polecane”; banery kategorii z pakietu 2 bez zmian): okrągłe przyciski zamiast cienkich znaków.
„Towary podobne” na karcie towaru zostają z cienką strzałką sklepu (27 px w odstępie między kaflami) — okrągła 44 px zasłaniała nazwę i cenę ostatniego kafla (runda 2). ---------- */
html body :is(.homepage-swiper-button-prev, .homepage-swiper-button-next, .grid-slider-prev, .grid-slider-next):not(.swiper-button-lock) {
width: 44px; height: 44px; margin-top: 0; transform: translateY(-50%); border-radius: 50%; background: #fff; color: var(--elx-granat) !important;
box-shadow: 0 0 0 1px var(--elx-ramka), var(--elx-cien-maly); text-shadow: none; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
html body :is(.homepage-swiper-button-prev, .homepage-swiper-button-next, .grid-slider-prev, .grid-slider-next)::after {
content: "" !important; font-family: inherit !important; width: 22px; height: 22px; background: currentColor;
-webkit-mask: var(--elx-i-prawo) center / contain no-repeat; mask: var(--elx-i-prawo) center / contain no-repeat;
}
html body :is(.homepage-swiper-button-prev, .grid-slider-prev)::after { -webkit-mask-image: var(--elx-i-lewo); mask-image: var(--elx-i-lewo); }
html body :is(.homepage-swiper-button-prev, .homepage-swiper-button-next, .grid-slider-prev, .grid-slider-next):not(.swiper-button-disabled):hover {
background: var(--elx-granat); color: #fff !important;
}
html body :is(.homepage-swiper-button-prev, .homepage-swiper-button-next, .grid-slider-prev, .grid-slider-next).swiper-button-disabled { opacity: 0; pointer-events: none; }
/* kreski stron pod banerem: nieaktywna miała ramkę #d3dbe3 na białym (kontrast ok. 1,4:1) — ciemniejsza ramka, ok. 3,7:1 (WCAG 1.4.11: 3:1); aktywna i najechana bez zmian (granat) — runda 2 */
html body .swiper-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):not(:hover) { border-color: #7a8796; }
/* banery kategorii (banner6, pakiet 2) — te same okrągłe strzałki zamiast cienkich znaków z fontu swipera */
html body :is(.banner6-swiper-button-prev, .banner6-swiper-button-next):not(.swiper-button-lock) {
width: 44px; height: 44px; margin-top: 0; transform: translateY(-50%); border-radius: 50%; background: #fff; color: var(--elx-granat) !important;
box-shadow: 0 0 0 1px var(--elx-ramka), var(--elx-cien-maly); display: flex; align-items: center; justify-content: center;
}
html body :is(.banner6-swiper-button-prev, .banner6-swiper-button-next)::after {
content: "" !important; font-family: inherit !important; width: 22px; height: 22px; background: currentColor;
-webkit-mask: var(--elx-i-prawo) center / contain no-repeat; mask: var(--elx-i-prawo) center / contain no-repeat;
}
html body .banner6-swiper-button-prev::after { -webkit-mask-image: var(--elx-i-lewo); mask-image: var(--elx-i-lewo); }
html body .banner6 .banner6-swiper-button-prev.swiper-button-prev { left: 8px; } html body .banner6 .banner6-swiper-button-next.swiper-button-next { right: 8px; } /* desktop1.css (.slider-ui.wide-ui): 0 px — koło dotykało krawędzi ekranu, cień ucięty */
html body :is(.banner6-swiper-button-prev, .banner6-swiper-button-next):not(.swiper-button-disabled):hover { background: var(--elx-granat); color: #fff !important; }
html body :is(.banner6-swiper-button-prev, .banner6-swiper-button-next).swiper-button-disabled { opacity: 0; pointer-events: none; }
/* telefon: szablon chowa strzałki banera głównego do 768 px (layout-m0.css, przewija się palcem); display:flex wyżej to przebijał i koło zasłaniało napis banera */
@media screen and (max-width: 768px) {
html body :is(.homepage-swiper-button-prev, .homepage-swiper-button-next):not(.swiper-button-lock) { display: none; }
}
/* ---------- 10. Telefon: cele dotyku min. 40 px (pomiar 390 px, 15.10) ---------- */
@media screen and (max-width: 1279px) {
/* lista „szybkie zakupy”: pole ilości i „− +” miały 35 px wysokości */
html body .quick-shopping-view-js .stepper-and-adding-ui [name=quantity] { height: 40px; }
html body .quick-shopping-view-js .stepper-and-adding-ui .change-quantity-ui { top: 39px; height: 40px; }
/* przełącznik widoku nad listą: 23×25 px; obok „Filtruj” i „Sortowanie” zostaje 38,5 px — bez lewego marginesu i 2 px w odstęp kontenera, żeby nie spadł do nowej linii */
html body .products-navigation-ui .change-view-ui:not(.btn-active-js):not([data-view=grid]) { width: 40px; height: 40px; margin: 0 -2px 0 0; display: inline-flex; align-items: center; justify-content: center; }
/* filtry „na górze”: „Filtruj” w ramce (86 px) + sortowanie (mobile.css: 100vw − 187 px) + przełącznik 40 px nie mieściły się w jednym wierszu przy żadnej szerokości — przełącznik spadał do 2. linii; sortowanie o 40 px węższe (zapas też na pasek przewijania) */
html body .filters-up-ui .sorting-views-container-ui .sorting-options-ui[data-type=sort] { width: calc(100vw - 227px); }
/* (wiersze wartości filtrów na telefonie: bez zmian — mobile.css daje 40 px; nasze 11 px + wcięcie spychały nazwę pod kwadrat, runda 1) */
/* „Filtruj”: ikona sklejona z napisem */
html body .toggle-filters-button-ui .sorting-options-icon-ui { margin-right: 6px; }
/* „Dodaj opinię” (32 px), „Zapytaj o cenę” w kafelku (36 px) */
html body .open-add-review-form-js, html body .minibox-product-ui a.btn-ui { min-height: 40px; display: flex; align-items: center; justify-content: center; }
}
/* ---------- 11. Poprawki po kontroli importu (N5, N10, 15.10) ---------- */
/* rejestracja: „Osoba prywatna” / „Firma” — paleta B daje obu ten sam granat; niewybrana szara, wybrana podkreślona limonką */
html body .change-sign-up-type-ui:not(.active-ui) { color: #5b6875; font-weight: 400; }
html body .change-sign-up-type-ui.active-ui { box-shadow: inset 0 -3px 0 var(--elx-limonka); }
/* wydruk (Ctrl+P): ikony są maską malowaną tłem — bez tego znikają z wydruku */
@media print {
html body [class^="ti-"]::before, html body [class*=" ti-"]::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* (nagłówek kategorii i kafle podkategorii: blok „EL-MAX: kategorie” — warstwa ich nie zmienia) */
/* ===== KONIEC ELMAX: warstwa graficzna ===== */
/* ===== ELMAX pakiet4: strona główna — układ sklepowy (partials/home/elmax-seo.html, 15.10.2026) ===== */
/* Uwagi właściciela 15.10: na górze 3 bannery; sklep = grafiki i towary, mało tekstu; kategorie większe; Producenci/Kontakt/Konfigurator wyraźnie.
Kolejność: slider 1, start (H1 + atuty) 2, Nowość 3, kategorie 4, Polecane 5, logotypy producentów 6, poradniki + blog 7, sklep w Jabłonce (z tekstem o firmie) 8, pytania 9, newsletter 10.
Kolory z warstwy graficznej (--elx-*, z wartościami zapasowymi). Przedrostek „html body” jak w warstwie (desktop1/2 i mobile.css ładują się później).
Bez obrazków (ikony = maski SVG w CSS) i bez skryptów. Wycofanie: usunąć ten blok z końca layout0.css (i oba include w home.html). */
/* ---------- start: H1, jedno zdanie, pasek atutów z ikonami ---------- */
html body .elmax-start { margin: 18px auto 4px; }
html body .elmax-start h1 { color: var(--elx-granat, #0a2540); font-size: clamp(21px, 2vw, 27px); line-height: 1.25; font-weight: 700; margin: 0 0 4px; text-transform: none; }
html body .elmax-start__lead { color: var(--elx-szary, #5b6875); font-size: 15.5px; line-height: 1.5; margin: 0 0 14px; }
html body .elmax-atuty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
html body .elmax-atut { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #fff; border: 1px solid var(--elx-ramka, #dde3ea); border-radius: var(--elx-r-karta, 10px); padding: 14px 16px; }
html body .elmax-atut__ikona { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 50%; background: var(--elx-limonka, #bdd027); position: relative; }
html body .elmax-atut__ikona::before { content: ""; position: absolute; inset: 11px; background: var(--elx-granat, #0a2540); -webkit-mask: var(--elx-ik) no-repeat center / contain; mask: var(--elx-ik) no-repeat center / contain; }
html body .elmax-atut__t { color: var(--elx-granat, #0a2540); font-size: 16px; font-weight: 700; line-height: 1.25; }
html body .elmax-atut__t a { color: inherit; text-decoration: none; }
html body .elmax-atut__t a:hover { color: var(--elx-niebieski, #166de0); }
html body .elmax-atut__s { color: var(--elx-szary, #5b6875); font-size: 13.5px; line-height: 1.35; }
html body .elmax-atut--czas { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/></svg>"); }
html body .elmax-atut--sklep { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l1.5-5h15L21 9'/><path d='M3 9h18v2a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0z'/><path d='M5 13v8h14v-8'/><path d='M10 21v-5h4v5'/></svg>"); }
html body .elmax-atut--wysylka { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 4h14v12H1z'/><path d='M15 8h4l4 4v4h-8z'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>"); }
html body .elmax-atut--tel { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
html body .elmax-atut--euro { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6.5A7 7 0 1 0 18 17.5'/><path d='M4 10h10M4 14h10'/></svg>"); }
/* ---------- sekcje (wspólne) ---------- */
html body .elmax-sekcja { margin: 2rem auto; color: var(--elx-tekst, #1f2933); font-size: 15px; line-height: 1.6; }
html body .elmax-sekcja h2 { color: var(--elx-granat, #0a2540); font-size: 26px; line-height: 1.25; font-weight: 700; margin: 0 0 16px; text-transform: none; }
html body .elmax-sekcja h3 { color: var(--elx-granat, #0a2540); font-size: 16px; line-height: 1.3; font-weight: 700; margin: 0 0 6px; text-transform: none; }
html body .elmax-sekcja p { margin: 0 0 10px; }
html body .elmax-sekcja ul { list-style: none; margin: 0; padding: 0; }
html body .elmax-sekcja a { color: var(--elx-granat, #0a2540); text-decoration: underline; text-decoration-color: var(--elx-ramka-2, #c9d3dd); text-underline-offset: 3px; }
html body .elmax-sekcja a:hover { color: var(--elx-niebieski, #166de0); text-decoration-color: currentColor; }
html body .elmax-linki { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
html body .elmax-linki a, html body .elmax-wiecej a { font-weight: 600; }
html body .elmax-wiecej { margin: 12px 0 0; }
/* blog: nad kartami stoi H2 „Poradniki…” (elmax-seo.html, ten sam order), więc nagłówek modułu „Aktualności” zbędny.
Tylko gdy blok poradników jest na stronie (dziś PL; jest w HTML przed modułami, więc działa selektor rodzeństwa). Na /sk/ karty bloga mają nagłówek modułu (runda 1). */
html body .homepage-ui > .elmax-poradniki-blok ~ div .blog-news-ui > h2 { display: none; }
html body .elmax-poradniki { margin-bottom: 0; }
html body .elmax-poradniki .elmax-wiecej { margin: -8px 0 0; }
/* ---------- kategorie: siatka działów z drzewa sklepu — v10, blok 8-karty-kategorii.css (karty .elx-karta); dawne .elmax-kat__* (stała lista 13 działów) usunięte 19.10 ---------- */
/* ---------- producenci: slider logotypów (moduł sklepu) jako równe kafelki ---------- */
html body .homepage-ui .manufacturers-slider-ui { width: 93%; margin: 2rem auto; flex-wrap: wrap; } /* jak container-ui sklepu */
html body .homepage-ui .manufacturers-slider-ui > .slider-ui { flex: 1 1 100%; min-width: 0; }
html body .homepage-ui .manufacturers-slider-ui::before { content: "Producenci w ofercie"; display: block; flex: 0 0 100%; color: var(--elx-granat, #0a2540); font-size: 26px; font-weight: 700; line-height: 1.25; margin: 0 0 16px; }
html[lang="sk"] body .homepage-ui .manufacturers-slider-ui::before { content: "Výrobcovia v ponuke"; } /* /sk/: bez polskiego napisu (słowo do sprawdzenia przez osobę mówiącą po słowacku) */
html body .homepage-ui .manufacturers-slider-ui .swiper-slide > a { display: block; width: 100%; }
html body .homepage-ui .manufacturers-slider-ui .slider-container-ui { width: 100%; box-sizing: border-box; height: 86px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--elx-ramka, #dde3ea); border-radius: var(--elx-r-karta, 10px); padding: 10px 14px; margin: 0; }
html body .homepage-ui .manufacturers-slider-ui .slider-container-ui img { max-height: 58px !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; filter: grayscale(1); opacity: .85; transition: filter .15s, opacity .15s; }
html body .homepage-ui .manufacturers-slider-ui a:hover img { filter: none; opacity: 1; }
/* ---------- sklep w Jabłonce: krótko ---------- */
html body .elmax-lok { background: var(--elx-tlo, #f4f6f9); border-radius: var(--elx-r-karta, 10px); padding: 22px 24px; }
html body .elmax-lok__uklad { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 20px; align-items: start; }
html body .elmax-lok__godz { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--elx-ramka, #dde3ea); }
html body .elmax-lok__nap .elmax-linki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html body .elmax-btn { display: inline-block; padding: 8px 14px; border: 2px solid var(--elx-granat, #0a2540); border-radius: var(--elx-r, 6px); color: var(--elx-granat, #0a2540) !important; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none !important; background: #fff; transition: background .15s, color .15s, border-color .15s; }
html body .elmax-btn:hover { background: var(--elx-granat, #0a2540); color: #fff !important; }
html body .elmax-btn--glowny { background: var(--elx-limonka, #bdd027); border-color: var(--elx-limonka, #bdd027); }
html body .elmax-lok__nap { font-style: normal; background: #fff; border-left: 4px solid var(--elx-limonka, #bdd027); border-radius: var(--elx-r, 6px); padding: 14px 16px; line-height: 1.7; }
/* ---------- O hurtowni (1. akapit + „Czytaj więcej”) i pytania (zwinięte) ---------- */
html body .elmax-o p { max-width: 95ch; }
html body .elmax-sekcja details > summary { cursor: pointer; list-style: none; color: var(--elx-granat, #0a2540); font-weight: 700; }
html body .elmax-sekcja details > summary::-webkit-details-marker { display: none; }
html body .elmax-sekcja details > summary::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
html body .elmax-sekcja details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
html body .elmax-o__wiecej > summary { display: inline-block; margin: 2px 0 10px; }
html body .elmax-faq { margin-top: 0; }
html body .elmax-faq__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
html body .elmax-faq__poz { border-bottom: 1px solid var(--elx-ramka, #dde3ea); }
html body .elmax-faq__poz > summary { padding: 12px 0; font-size: 15.5px; }
html body .elmax-faq__poz > p { font-size: 14.5px; margin: 0 0 12px; }
@media screen and (max-width: 1100px) {
html body .elmax-atuty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 900px) {
html body .elmax-lok__uklad, html body .elmax-faq__lista { grid-template-columns: 1fr; }
}
@media screen and (max-width: 600px) {
html body .elmax-atut { padding: 10px 12px; grid-template-columns: 38px 1fr; column-gap: 10px; }
html body .elmax-atut__ikona { width: 38px; height: 38px; }
html body .elmax-atut__ikona::before { inset: 9px; }
html body .elmax-atut__t { font-size: 14px; }
html body .elmax-atut__s { font-size: 12.5px; }
html body .elmax-lok { padding: 18px 14px; }
html body .elmax-sekcja h2, html body .homepage-ui .manufacturers-slider-ui::before { font-size: 21px; }
}
/* menu górne na wszystkich stronach: Producenci, Kontakt, Konfigurator PV wyraźnie (uwaga właściciela 15.10: „trzeba wyróżnić, bo niewidoczne”) */
html body .main-navigation-bar-ui .main-navigation-bar-links-ui > ul { gap: 16px; padding-left: 28px !important; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui > ul > li { display: flex; align-items: center; width: auto !important; min-width: 0 !important; flex: 0 0 auto; margin: 0 !important; border: 0 !important; float: none !important; } /* uwaga właściciela: „producenci za blisko” — bez stałej szerokości 267 px, odstęp od bloku Kategorie */
/* menu kategorii po lewej: większe litery (uwaga właściciela 15.10: „kategorie nadal małymi znakami”) — „big” w ustawieniach = 16 px → 17 px, pogrubione */
html body .category-content-ui.big-ui .category-label-ui { font-size: 17px; font-weight: 600; }
html body .category-content-ui.big-ui .category-amount-ui { font-size: 13px; font-weight: 400; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui > ul > li > a { display: inline-flex !important; height: auto !important; min-height: 0 !important; align-items: center; gap: 8px; padding: 9px 18px !important; border: 2px solid var(--elx-ramka, #dde3ea); border-radius: 999px; background: #fff; color: var(--elx-granat, #0a2540) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui > ul > li > a:hover { border-color: var(--elx-granat, #0a2540); background: var(--elx-tlo, #f4f6f9); }
/* ikona-maska tylko dla trzech przycisków z własną ikoną (--elx-ik niżej); inne linki paska (np. „Dokumenty”, „Pobierz przykładowy plik CSV” po zalogowaniu) zostają z ikoną z panelu — runda 2 */
html body .main-navigation-bar-ui .main-navigation-bar-links-ui > ul > li > a:is([href*="producenci"], [href*="kontakt"], [href*="konfigurator"]) > i { display: none !important; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui > ul > li > a:is([href*="producenci"], [href*="kontakt"], [href*="konfigurator"])::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; -webkit-mask: var(--elx-ik) no-repeat center / contain; mask: var(--elx-ik) no-repeat center / contain; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui > ul > li > a::after { display: none !important; }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui a[href*="producenci"] { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/></svg>"); }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui a[href*="kontakt"] { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui a[href*="konfigurator"] { --elx-ik: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>"); background: var(--elx-limonka, #bdd027); border-color: var(--elx-limonka, #bdd027); }
html body .main-navigation-bar-ui .main-navigation-bar-links-ui a[href*="konfigurator"]:hover { background: var(--elx-granat, #0a2540); border-color: var(--elx-granat, #0a2540); color: #fff !important; }
/* slider: cały baner jest linkiem (przycisk podpisu „Sprawdź” zasłaniał przycisk narysowany na grafice); dla klawiatury ramka fokusu na całym banerze */
html body .homepage-slider-ui .slider-container-ui { position: relative; }
html body .homepage-slider-ui .slider-caption-ui:has(.btn-ui) { position: absolute !important; inset: 0 !important; transform: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; }
html body .homepage-slider-ui .slider-caption-ui .btn-ui { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: transparent !important; font-size: 0 !important; box-shadow: none !important; z-index: 2; }
html body .homepage-slider-ui .slider-caption-ui .btn-ui:focus-visible { outline: 3px solid var(--elx-niebieski, #166de0) !important; outline-offset: -3px; }
/* baner: wszystkie slajdy mają stałą proporcję 16:5, także zanim obrazek się wczyta (diagnoza szafir1/drganie.md). Banery w panelu mają 3840×1200,
a szablon (img 1500×500) i CSS sklepu (aspect-ratio auto 3/1) rezerwowały 3:1, więc niewczytany slajd był o ~27 px wyższy. Swiper ma autoHeight: 'false'
(napis = włączone) i przy każdej zmianie slajdu zmieniał wysokość banera, więc strona pod nim skakała co ~17 s. Banery muszą mieć proporcję 16:5
(np. 3840×1200, 1920×600); grafika w innej proporcji zostanie przycięta (cover), a strona nie skoczy. */
html body .homepage-slider-ui .slider-container-ui.lazy img { aspect-ratio: 16 / 5; object-fit: cover; }
/* kolumna kategorii na stronie głównej: przykleja ją przeglądarka (sticky), a nie skrypt sklepu (attachElement), więc nie ma spóźnionej klatki przy progu.
Skrypt dalej działa, ale jego position/top/left/right są nadpisane. Tylko komputer (≥1280 px) i tylko strona główna (:has). */
@media (min-width: 1280px) {
html body .page-container-ui:has(.homepage-ui) > .category-column-ui { position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; float: left; }
}
/* przycisk „Filtruj” nad listą wyraźny (uwaga właściciela 15.10, test [1]): limonkowy, pogrubiony; po rozwinięciu („Zwiń filtry”) granatowy jak dotąd */
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui:not(.expanded-js) { background: var(--elx-limonka, #bdd027); color: var(--elx-granat, #0a2540); font-weight: 700; font-size: 16px; box-shadow: 0 2px 8px rgba(10, 37, 64, .15); }
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui:not(.expanded-js) i { color: var(--elx-granat, #0a2540); }
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui:not(.expanded-js):hover { background: var(--elx-granat, #0a2540); color: #fff; }
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui:not(.expanded-js):hover i { color: var(--elx-limonka, #bdd027); }
html body .filters-up-ui .sorting-options-ui .toggle-filters-button-ui.expanded-js { font-weight: 700; font-size: 16px; }
/* ---------- runda 2 (15.10 wieczorem): drobne poprawki wyglądu, układ bez zmian ---------- */
/* „EL-MAX” w nagłówkach sekcji nie łamie się na łączniku (glowna.js owija nazwę w span.elmax-nw) */
html body .elmax-nw { white-space: nowrap; }
/* „Producenci w ofercie”: ta sama pionowa kreska i wcięcie co nagłówki sąsiednich sekcji (sklep: 4 px / 15 px na komputerze, 2 px / 7 px poniżej 1280 px;
tam sekcja logotypów zaczyna się 20 px bardziej w lewo niż nagłówki innych sekcji, stąd margines) */
html body .homepage-ui .manufacturers-slider-ui::before { box-sizing: border-box; border-left: 4px solid var(--elx-granat, #0a2540); padding-left: 15px; }
@media screen and (max-width: 1279px) {
html body .homepage-ui .manufacturers-slider-ui::before { border-left-width: 2px; padding-left: 7px; margin-left: 20px; flex-basis: calc(100% - 20px); }
}
/* poradniki i blog: tytuł wpisu ucięty z „…” po pełnych liniach (sklep ucinał w pół zdania, a na telefonie w pół linii: max-height 43,4 px przy linii 24 px) */
html body .blog-news-ui .latest-blog-post-heading { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-height: none; }
@media screen and (max-width: 1279px) {
html body .blog-news-ui .latest-blog-post-heading { -webkit-line-clamp: 2; }
/* newsletter: przycisk wysyłki na środku pola (mobile.css: top 2px + przesunięcie −50%, więc wystawał 20 px nad pole) */
html body .newsletter-ui .input-with-icon-ui > button.post-lq { top: 50%; bottom: auto; }
}
/* ===== KONIEC ELMAX: strona główna ===== */
/* ===== ELMAX: pasek darmowej dostawy (16.10.2026) ===== */
/* „Do darmowej dostawy brakuje Ci X zł”: koszyk (delivery-section.html, Liquid), okienko koszyka w nagłówku i okno „Dodano do koszyka” (partials/common/elmax-dostawa.html),
karta towaru pod „Dodaj do koszyka” (.elmax-dostawa-karta-ui). Próg zawsze ze sposobu dostawy w panelu e-Sklepu. Opis: C:/ELMAX/szablon/darmowa-dostawa/opis.md
Demo: render.sh kopiuje ten plik do demo/static/dostawa.css. Wycofanie CSS: usunąć plik z listy BLOKI w warstwa/wstaw.js i wyciąć ten blok z Default/css/layout0.css. */
html body .elmax-dostawa-ui { clear: both; margin: 12px 0 0; color: #0a2540; font-size: 14px; line-height: 1.4; text-align: left; }
html body .elmax-dostawa-ui:empty { display: none; }
html body .elmax-dostawa-ui b { font-weight: 700; white-space: nowrap; }
html body .elmax-dostawa-ui small { display: block; margin-top: 4px; color: #5b6875; font-size: 12px; }
html body .elmax-dostawa-ui small b { font-weight: 600; }
html body .elmax-dostawa-pasek-ui { height: 8px; margin-top: 6px; border-radius: 4px; background: #e6ebf0; overflow: hidden; }
html body .elmax-dostawa-pasek-ui > span { display: block; max-width: 100%; height: 100%; border-radius: 4px; background: var(--elx-limonka, #bdd027); transition: width .4s; }
html body .elmax-dostawa-ok-ui { font-weight: 700; }
/* okienko koszyka w nagłówku i okno po dodaniu: jasna ramka, żeby pasek nie zlał się z podsumowaniem */
html body .cartItemsList-informations .elmax-dostawa-ui, html body .elmax-dostawa-okno-ui { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #dde3ea; border-radius: 6px; background: #f8faf0; }
html body .elmax-dostawa-okno-ui { text-align: center; }
/* karta towaru: jedna krótka linia pod przyciskiem, cienki pasek */
html body .elmax-dostawa-karta-ui { margin-top: 10px; font-size: 13px; }
html body .elmax-dostawa-karta-ui .elmax-dostawa-pasek-ui { height: 4px; margin-top: 5px; }
/* 17.10: nazwa sposobu dostawy przy progu (paleta zamiast kuriera) i stan „Liczę darmową dostawę…” zamiast starych kwot */
html body .elmax-dostawa-nazwa-ui { color: #5b6875; font-weight: 400; }
html body .elmax-dostawa-licze-ui { color: #5b6875; font-style: italic; }
/* ===== KONIEC ELMAX: pasek darmowej dostawy ===== */
/* ===== ELMAX: szybki wybór filtrów — wariant B (16.10.2026) ===== */
/* Pasek „Szybki wybór” nad listą towarów (pod nazwą, opisem i kaflami kategorii), „Wszystkie filtry” rozwija ramki pod paskiem; telefon: „Filtruj” u dołu i filtry na cały ekran.
Skrypt: Default/partials/products/elmax-szybki-wybor.html (products.html, filtry „na górze”). Reguły działają tylko pod html.elx-sw, które dopisuje skrypt.
Kolory z warstwy: granat, limonka. Demo: render.sh wkleja ten blok do demo/static/filtr-b.css. Wycofanie: usunąć plik z listy BLOKI w warstwa/wstaw.js i wyciąć ten blok z Default/css/layout0.css. */
/* ---------- pasek ---------- */
html.elx-sw body .elx-sw-pasek { clear: both; background: var(--elx-tlo); border: 1px solid var(--elx-ramka); border-radius: var(--elx-r-karta); padding: 16px 18px; margin: 4px 0 18px; }
html.elx-sw body .elx-sw-wiersz { display: flex; align-items: center; gap: 18px; }
html.elx-sw body .elx-sw-tyt { flex: none; display: flex; flex-direction: column; gap: 3px; line-height: 1.15; padding-right: 18px; border-right: 1px solid var(--elx-ramka-2); min-width: 92px; }
html.elx-sw body .elx-sw-tyt small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--elx-szary); }
html.elx-sw body .elx-sw-tyt small:empty { display: none; }
html.elx-sw body .elx-sw-tyt b { font-size: 19px; font-weight: 700; color: var(--elx-granat); }
html.elx-sw body .elx-sw-chipy { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
html.elx-sw body .elx-sw-chip { display: inline-flex; align-items: center; gap: 6px; height: 42px; margin: 0; padding: 0 17px; border: 1.5px solid var(--elx-ramka-2); border-radius: 999px; background: #fff; color: var(--elx-granat);
font: inherit; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
html.elx-sw body .elx-sw-chip:hover { border-color: var(--elx-granat); box-shadow: 0 2px 6px rgba(10, 37, 64, .12); }
html.elx-sw body .elx-sw-chip[hidden] { display: none; }
html.elx-sw body .elx-sw-chip .elx-sw-c { color: var(--elx-szary); font-weight: 500; }
html.elx-sw body .elx-sw-ok { display: none; width: 17px; height: 17px; margin-left: -4px; fill: none; stroke: var(--elx-limonka); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.elx-sw body .elx-sw-chip[aria-pressed="true"] { background: var(--elx-granat); border-color: var(--elx-granat); color: #fff; }
html.elx-sw body .elx-sw-chip[aria-pressed="true"] .elx-sw-c { color: var(--elx-limonka); }
html.elx-sw body .elx-sw-chip[aria-pressed="true"] .elx-sw-ok { display: block; }
html.elx-sw body .elx-sw-ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.elx-sw body .elx-sw-ik circle { fill: #fff; }
html.elx-sw body .elx-sw-wszystkie { flex: none; align-self: center; margin-left: auto; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 20px; border: 0; border-radius: var(--elx-r-karta);
background: var(--elx-limonka); color: var(--elx-granat); font: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 10px rgba(10, 37, 64, .18); transition: background-color .15s, color .15s; }
html.elx-sw body .elx-sw-wszystkie:hover, html.elx-sw body .elx-sw-wszystkie[aria-expanded="true"] { background: var(--elx-granat); color: #fff; }
html.elx-sw body .elx-sw-wszystkie:hover .elx-sw-ik circle, html.elx-sw body .elx-sw-wszystkie[aria-expanded="true"] .elx-sw-ik circle { fill: var(--elx-limonka); }
html.elx-sw body .elx-sw-strz { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
html.elx-sw body .elx-sw-wszystkie[aria-expanded="true"] .elx-sw-strz { transform: rotate(180deg); }
html.elx-sw body .elx-sw-licz { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px; background: var(--elx-granat); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
html.elx-sw body .elx-sw-licz[hidden] { display: none; }
html.elx-sw body .elx-sw-wszystkie:hover .elx-sw-licz, html.elx-sw body .elx-sw-wszystkie[aria-expanded="true"] .elx-sw-licz { background: var(--elx-limonka); color: var(--elx-granat); }
/* „Wybrane” sklepu (.selected-filters-ui, wypełnia je product-list.js) w pasku pod przyciskami: granatowe z ×, „Resetuj filtry” na końcu jako link; pusty wiersz schowany */
html.elx-sw body .elx-sw-pasek .selected-filters-ui { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--elx-ramka-2); }
html.elx-sw body .elx-sw-pasek .selected-filters-ui:not(:has(.selected-filter-item-ui, .no-items-ui)) { display: none; }
html.elx-sw body .elx-sw-pasek .selected-filters-lq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
html.elx-sw body .elx-sw-pasek .selected-filters-lq:has(.selected-filter-item-ui)::before { content: attr(data-elx-wybrane); font-size: 14px; font-weight: 700; color: var(--elx-granat); margin-right: 2px; }
html.elx-sw body .elx-sw-pasek .selected-filter-item-ui { display: inline-flex !important; align-items: center; gap: 8px; height: 34px; margin: 0 !important; padding: 0 7px 0 14px !important; border: 0 !important; border-radius: 999px !important;
background: var(--elx-granat) !important; color: #fff !important; font-size: 14px !important; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: none !important; }
html.elx-sw body .elx-sw-pasek .selected-filter-item-ui:hover { background: var(--elx-granat-2) !important; }
html.elx-sw body .elx-sw-pasek .selected-filter-item-ui span, html.elx-sw body .elx-sw-pasek .selected-filter-item-ui strong { color: #fff !important; }
html.elx-sw body .elx-sw-pasek .selected-filter-item-ui .filter-delete-ui { order: 2; display: grid !important; place-items: center; width: 22px; height: 22px; margin: 0 !important; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff !important; font-size: 9px !important; }
html.elx-sw body .elx-sw-pasek .selected-filter-item-ui[data-field="all"] { order: 99; background: transparent !important; color: var(--elx-granat) !important; padding: 0 6px !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
html.elx-sw body .elx-sw-pasek .selected-filter-item-ui[data-field="all"] span { color: var(--elx-granat) !important; }
html.elx-sw body .elx-sw-pasek .selected-filter-item-ui[data-field="all"] .filter-delete-ui { display: none !important; }
html.elx-sw body .elx-sw-pasek .no-items-ui { width: 100%; margin: 8px 0 0; }
/* ramki „Wszystkie filtry” (komputer): tuż pod paskiem; zwinięte = klasa sklepu expandable-ui bez expanded-js (wysokość 0) */
html.elx-sw body .elx-sw-filtry { clear: both; margin: -6px 0 0; }
html.elx-sw:not(.elx-sw-otwarte) body .elx-sw-filtry { display: none; } /* zwinięty formularz ma jeszcze 30 px odstępów sklepu */
html.elx-sw body .elx-sw-filtry .product-filters-ui { display: block; width: 100%; }
html.elx-sw.elx-sw-otwarte body .elx-sw-filtry { margin-bottom: 12px; }
/* ---------- telefon i tablet (< 1280 px) ---------- */
html.elx-sw.elx-sw-mob body .elx-sw-pasek { border-radius: 0; border-width: 1px 0; padding: 12px calc(var(--elx-sw-g, 0px) + 12px) 14px; margin: 4px calc(-1 * var(--elx-sw-g, 0px)) 16px; }
html.elx-sw.elx-sw-mob body .elx-sw-wiersz { flex-direction: column; align-items: stretch; gap: 9px; }
html.elx-sw.elx-sw-mob body .elx-sw-tyt { flex-direction: row; align-items: baseline; gap: 8px; padding: 0; border: 0; }
html.elx-sw.elx-sw-mob body .elx-sw-tyt b { font-size: 17px; }
html.elx-sw.elx-sw-mob body .elx-sw-chipy { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-12px - var(--elx-sw-g, 0px)); padding: 2px 44px 2px calc(var(--elx-sw-g, 0px) + 12px);
-webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
html.elx-sw.elx-sw-mob body .elx-sw-chipy::-webkit-scrollbar { display: none; }
html.elx-sw.elx-sw-mob body .elx-sw-chip { flex: none; height: 44px; }
html.elx-sw.elx-sw-mob body .elx-sw-pasek .elx-sw-wszystkie { display: none; }
html.elx-sw.elx-sw-mob body .elx-sw-pasek .selected-filters-ui { margin-top: 12px; padding-top: 12px; }
/* kategoria bez filtra do szybkiego wyboru: na telefonie zostaje tylko „Filtruj” u dołu (+ „Wybrane”, gdy coś wybrano) — bez pustego paska „Filtry” */
html.elx-sw.elx-sw-mob body .elx-sw-bez .elx-sw-wiersz { display: none; }
html.elx-sw.elx-sw-mob body .elx-sw-bez:not(:has(.selected-filter-item-ui, .no-items-ui)) { display: none; }
html.elx-sw.elx-sw-mob body .elx-sw-bez .selected-filters-ui { margin-top: 0; padding-top: 0; border-top: 0; }
/* przyklejony „Filtruj (N)”; z-index 99 = pod oknami sklepu (sortowanie, okienko koszyka z paskiem dostawy, menu: 100–102; „Dodano do koszyka”, cookies: 999–1000) — nie zasłania ich */
html.elx-sw body .elx-sw-dol { display: none; }
html.elx-sw.elx-sw-mob body .elx-sw-dol { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 99; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 54px; min-width: 210px; margin: 0; padding: 0 30px; border: 0; border-radius: 999px; background: var(--elx-limonka); color: var(--elx-granat); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
box-shadow: 0 10px 26px rgba(10, 37, 64, .32), 0 0 0 3px #fff; }
html.elx-sw.elx-sw-mob.elx-sw-otwarte body .elx-sw-dol { display: none; }
html.elx-sw.elx-sw-mob body { padding-bottom: 86px !important; }
/* filtry na cały ekran: ramki jedna pod drugą, wartości jako duże przyciski (44 px) */
html.elx-sw body .elx-sw-arkusz { display: none; }
html.elx-sw.elx-sw-otwarte body .elx-sw-arkusz { position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; background: #fff; }
html.elx-sw.elx-sw-mob.elx-sw-otwarte, html.elx-sw.elx-sw-mob.elx-sw-otwarte body { overflow: hidden !important; }
html.elx-sw body .elx-sw-ark-gora { flex: none; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--elx-ramka); }
html.elx-sw body .elx-sw-ark-gora b { font-size: 21px; font-weight: 700; color: var(--elx-granat); }
html.elx-sw body .elx-sw-zamknij { width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--elx-granat); font-size: 32px; line-height: 1; cursor: pointer; }
html.elx-sw body .elx-sw-ark-dol { flex: none; display: flex; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--elx-ramka); background: #fff; box-shadow: 0 -4px 14px rgba(10, 37, 64, .06); }
html.elx-sw body .elx-sw-wyczysc { flex: none; height: 52px; margin: 0; padding: 0 18px; border: 1.5px solid var(--elx-ramka-2); border-radius: 12px; background: #fff; color: var(--elx-granat); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
html.elx-sw body .elx-sw-wyczysc[hidden] { display: none; }
html.elx-sw body .elx-sw-pokaz { flex: 1; width: 100%; height: 52px; margin: 0; border: 0; border-radius: 12px; background: var(--elx-granat); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
html.elx-sw body .elx-sw-arkusz .product-filters-ui { flex: 1 1 auto; display: block !important; position: static !important; width: auto !important; height: auto !important; max-height: none !important; overflow-y: auto !important;
margin: 0 !important; padding: 0 20px 20px !important; transform: none !important; box-shadow: none !important; border: 0 !important; background: #fff !important; opacity: 1 !important; visibility: visible !important; }
html.elx-sw body .elx-sw-arkusz .product-filters-ui > ul { display: block !important; margin: 0 !important; padding: 0 !important; columns: auto !important; }
html.elx-sw body .elx-sw-arkusz .product-filters-ui > ul > li { display: block; width: auto !important; float: none !important; margin: 0 !important; padding: 18px 0 !important; border: 0 !important; border-bottom: 1px solid var(--elx-ramka) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html.elx-sw body .elx-sw-arkusz .product-filters-ui > ul > li:last-child { border-bottom: 0 !important; }
html.elx-sw body .elx-sw-arkusz .filter-drop-ui { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 0 12px !important; border: 0 !important; background: none !important; pointer-events: none; }
html.elx-sw body .elx-sw-arkusz .filter-drop-ui input, html.elx-sw body .elx-sw-arkusz .filter-drop-ui .dropdown-arrow-ui,
html.elx-sw body .elx-sw-arkusz .filter-drop-ui .label-ui::before, html.elx-sw body .elx-sw-arkusz .filter-drop-ui .label-ui::after { display: none !important; }
html.elx-sw body .elx-sw-arkusz .filter-drop-ui .label-ui { display: block; padding: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: var(--elx-granat) !important; }
html.elx-sw body .elx-sw-arkusz .filtersContainer-js { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; }
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; }
/* bez !important przy display: wartości wyłączone w ustawieniach (style="display:none") zostają schowane */
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui label { position: relative; display: block; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui label:has(> input:disabled:not(:checked)) { display: none !important; }
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui input { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui .label-ui { display: inline-flex !important; align-items: center; min-height: 44px; margin: 0 !important; padding: 0 16px !important; border: 1.5px solid var(--elx-ramka-2) !important; border-radius: 999px !important;
background: #fff !important; color: var(--elx-granat) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; }
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui .label-ui::before, html.elx-sw body .elx-sw-arkusz .filter-value-list-ui .label-ui::after { display: none !important; }
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui input:checked + .label-ui { background: var(--elx-granat) !important; border-color: var(--elx-granat) !important; color: #fff !important; }
html.elx-sw body .elx-sw-arkusz .filter-value-list-ui input:checked + .label-ui::before { content: '' !important; display: inline-block !important; position: static !important; flex: none; width: 12px !important; height: 7px !important; margin: -3px 9px 0 -2px !important;
border: solid var(--elx-limonka) !important; border-width: 0 0 2.5px 2.5px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: rotate(-45deg) !important; }
/* ===== KONIEC ELMAX: szybki wybór filtrów ===== */
/* ===== ELMAX v9: koszyk — nowy, prostszy układ (19.10.2026) ===== */
/* Strona koszyka: partials/order/elmax-koszyk.html (+ delivery-section.html, cart-product.html, cart-navigation-bar.html, elmax-koszyk-js.html); klasa .elx-koszyk na .cart-ui.
Wygląd jak w demie (demo/static/koszyk.css, bez części tylko dla dema). Stare kolumny i elementy Comarchu są chowane tylko wewnątrz .elx-koszyk,
haki skryptów zostają w stronie. Selektory celowo „mocne”, a przy pozycji i rozmiarze z !important: css/order.css i order-m.css (≤1279 px)
ładują się PO layout0.css i mają długie selektory (np. „.cart-ui .div-table-ui .div-table-row-ui:not(.table-header-ui) …”).
Wycofanie: usunąć plik z listy BLOKI w warstwa/wstaw.js i wyciąć ten blok z Default/css/layout0.css (koszyk bez CSS wróci do tabeli Comarchu tylko razem z Liquid). */
/* elementy dopisane do wiersza (cart-product.html) — poza nowym koszykiem niewidoczne */
.elx-k-meta, .elx-k-cena, .elx-k-wartosc { display: none; }
.elx-koszyk { --k-g: #0a2540; --k-l: #bdd027; --k-l2: #a8bd1f; --k-s: #5b6875; --k-ln: #e3e8ee; --k-r: #c9d2db; --k-t: #f5f7f9; }
html body .elx-koszyk.cart-ui { max-width: 1240px; margin: 0 auto; padding: 20px 16px 48px; color: var(--k-g); font-size: 15px; line-height: 1.4; text-align: left; }
html body .elx-koszyk.cart-ui > .message-bar-ui { margin: 0 0 16px; }
/* kolejność jak w demie: kroki nad komunikatami sklepu (np. minimalna wartość zamówienia); kroki są w elmax-koszyk.html, komunikaty wcześniej w cart.html */
html body .elx-koszyk.cart-ui { display: flex; flex-direction: column; }
html body .elx-koszyk.cart-ui > .elx-k-kroki { order: -1; }
.elx-koszyk .elx-k-pusty { margin: 12px 0 0; text-align: center; }
.elx-koszyk .elx-k-pusty a { color: var(--k-g); text-decoration: underline; }
/* kroki zamówienia */
.elx-koszyk .elx-k-kroki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; color: var(--k-s); font-size: 14px; line-height: 1.3; }
.elx-koszyk .elx-k-kroki li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.elx-koszyk .elx-k-kroki li + li::before { content: ''; width: 32px; height: 1px; margin-right: 4px; background: var(--k-r); }
.elx-koszyk .elx-k-kroki b { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--k-r); border-radius: 50%; color: var(--k-s); font-size: 13px; font-weight: 700; }
.elx-koszyk .elx-k-kroki .elx-k-teraz { color: var(--k-g); font-weight: 700; }
.elx-koszyk .elx-k-kroki .elx-k-teraz b { border-color: var(--k-g); background: var(--k-g); color: #fff; }
/* układ: lista z dostawą i płatnością + przyklejone podsumowanie */
.elx-koszyk .elx-k-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.elx-koszyk .elx-k-siatka.elx-k-bez-podsumowania { grid-template-columns: minmax(0, 1fr); }
.elx-koszyk .elx-k-lewa { min-width: 0; }
.elx-koszyk .elx-k-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 8px; }
html body .elx-koszyk .elx-k-naglowek h1 { margin: 0; padding: 0; border: 0; color: var(--k-g); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.elx-koszyk .elx-k-naglowek h1 span { margin-left: 6px; color: var(--k-s); font-size: 15px; font-weight: 400; }
.elx-koszyk .elx-k-wroc { color: var(--k-g); font-size: 14px; text-decoration: underline; }
.elx-koszyk .elx-k-wroc:hover { color: #166de0; }
/* lista towarów: tabela Comarchu (products.html) jako wiersze — nagłówek tabeli, stopka z sumami i stare kolumny schowane */
html body .elx-koszyk .div-table-ui { position: relative; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--k-ln) !important; font-size: 15px; }
html body .elx-koszyk .div-table-ui .narrow-container-ui { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
html body .elx-koszyk .products-table-header-js { display: none !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js { display: grid !important; grid-template-columns: minmax(0, 1fr) 176px 150px 32px; grid-template-areas: "info ilosc wartosc usun"; gap: 16px; align-items: center; position: relative !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 16px 0 !important; border: 0; border-bottom: 1px solid var(--k-ln); background: #fff !important; transition: opacity .2s; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js::after { display: none !important; content: none !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .div-table-cell-ui { float: none !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .number-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .price-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .total-price-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .percent-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .deposit-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .value-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .total-value-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .currency-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .loyalty-points-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .options-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .arrow-column-ui { display: none !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .position-attributes-set-form-js { grid-column: 1 / -1; float: none !important; width: auto !important; }
/* usuń: ✕ zamiast kosza (ikona z warstwy ikon, blok 3-ikony.css: --elx-ikona) */
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .remove-product-ui { grid-area: usun; display: flex !important; justify-content: center; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .remove-product-ui .mobile-ui { display: none !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .remove-product-ui button.remove-product-from-cart-lq { --elx-ikona: var(--elx-i-zamknij); display: block; width: 32px; height: 32px; margin: 0; padding: 0 !important; border: 0; border-radius: 50%; background: transparent; color: #8a96a3 !important; font-size: 16px; line-height: 32px !important; text-align: center; cursor: pointer; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .remove-product-ui button.remove-product-from-cart-lq:hover { background: #fdecec; color: #c62828 !important; }
/* zdjęcie, nazwa, kod · waga, cena za jednostkę */
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .name-and-code-ui { grid-area: info; display: block !important; min-width: 0; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .name-and-code-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .name-and-code-ui > .replace-url-lq { display: flex !important; align-items: flex-start; gap: 16px; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .image-container-ui { position: static !important; float: none !important; display: flex; align-items: center; justify-content: center; flex: 0 0 72px; width: 72px !important; height: 72px !important; padding: 4px; border: 1px solid var(--k-ln); border-radius: 6px; background: #fff; overflow: hidden; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .image-container-ui img { position: static !important; display: block; max-width: 100%; max-height: 100%; margin: auto; transform: none !important; object-fit: contain; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .image-container-ui i { font-size: 40px !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .product-info-ui { position: static !important; float: none !important; flex: 1 1 auto; width: auto !important; min-width: 0; padding: 0 !important; color: var(--k-g); line-height: 1.3 !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .product-name-ui { display: block; margin: 0 !important; overflow: visible !important; color: var(--k-g); font-size: 16px !important; font-weight: 700; line-height: 1.3 !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .replace-url-lq:hover .product-name-ui { text-decoration: underline; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .product-code-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .product-info-ui .expandable-js { display: none !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .elx-k-meta { display: block; margin-top: 2px; color: var(--k-s); font-size: 13px; line-height: 1.35; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .elx-k-cena { display: block; margin-top: 6px; color: var(--k-g); font-size: 14px; line-height: 1.35; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .elx-k-cena b { font-weight: 700; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .elx-k-cena span { color: var(--k-s); }
/* ilość „− 1 +” (sklepowy licznik, kształt z bloku palety B) */
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .amount-stepper-column-ui { grid-area: ilosc; display: flex !important; flex-wrap: wrap; align-items: center; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .amount-stepper-ui { position: relative; display: flex !important; flex-wrap: nowrap; align-items: center; width: auto !important; height: auto !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .change-quantity-ui { position: static !important; top: auto !important; right: auto !important; float: none !important; width: 36px !important; height: 40px !important; padding: 0 !important; border: 1px solid var(--k-r) !important; font-size: 13px; line-height: 38px !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .change-quantity-ui.increment-ui { border-left: 0 !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js [name=quantity] { float: none !important; width: 52px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--k-r) !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; background: #fff; color: var(--k-g); font-size: 16px; font-weight: 700; text-align: center; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .amount-stepper-column-ui .unit-name-ui { position: static !important; width: auto !important; padding: 0 0 0 8px !important; color: var(--k-s); font-size: 13px; line-height: 1.2; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .amount-stepper-column-ui > span:not(.unit-name-ui) { float: none !important; font-size: 16px; font-weight: 700; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .unit-ratio-info-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .multiplicity-info-js { flex-basis: 100%; margin-top: 4px; color: var(--k-s); font-size: 12px; }
/* wartość: netto pogrubione, brutto pod spodem */
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .elx-k-wartosc { grid-area: wartosc; display: block; text-align: right; line-height: 1.35; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .elx-k-wartosc b { font-size: 16px; font-weight: 700; white-space: nowrap; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .elx-k-wartosc small { color: var(--k-s); font-size: 13px; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .elx-k-wartosc span { display: block; color: var(--k-s); font-size: 13px; white-space: nowrap; }
/* zestaw (rzadko): wiersz zbiorczy z rozwijaną listą elementów — tylko uporządkowany, bez nowych elementów */
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-ui:not(.cart-product-container-js) { height: auto !important; padding: 0 !important; border-bottom: 1px solid var(--k-ln); background: #fff !important; }
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 0; }
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui::after { display: none; }
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .div-table-cell-ui { float: none !important; position: static !important; width: auto !important; height: auto !important; padding: 0 !important; }
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .name-and-code-js { flex: 1 1 300px; display: flex; gap: 16px; align-items: flex-start; }
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .number-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .price-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .total-price-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .percent-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .currency-column-ui,
html body .elx-koszyk.cart-ui .div-table-ui .set-aggregator-ui > .loyalty-points-ui { display: none !important; }
html body .elx-koszyk.cart-ui .div-table-ui .set-elements-ui .cart-product-container-js { padding-left: 24px !important; background: var(--k-t) !important; }
/* pod listą: „Opróżnij koszyk” i „Zamień w zapytanie o wycenę” jako linki; stopka tabeli bez sum (zostaje okno potwierdzenia i stronicowanie) */
html body .elx-koszyk .tfoot-ui { height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body .elx-koszyk .tfoot-ui > .narrow-container-ui { display: block !important; height: auto !important; }
html body .elx-koszyk .tfoot-ui > .narrow-container-ui > :not(.delete-cart-confirmation-js):not(.f-right-ui) { display: none !important; }
html body .elx-koszyk .tfoot-ui .f-right-ui { float: none !important; width: auto !important; height: auto !important; }
html body .elx-koszyk .tfoot-ui .f-right-ui > :not(nav) { display: none !important; }
html body .elx-koszyk .tfoot-ui nav { position: static !important; width: auto !important; margin: 12px 0 0; }
.elx-koszyk .elx-k-pod-lista { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 12px 0 28px; }
html body .elx-koszyk .elx-k-link { display: inline; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none !important; color: var(--k-s) !important; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.4 !important; text-align: left; text-decoration: underline; cursor: pointer; }
html body .elx-koszyk .elx-k-link:hover { color: var(--k-g) !important; }
/* dostawa i płatność: kafelki zamiast list rozwijanych (listy sklepu zostają ukryte w .elx-k-ukryte) */
html body .elx-koszyk .elx-k-h2 { margin: 0 0 12px; padding: 20px 0 0; border: 0; border-top: 1px solid var(--k-ln); color: var(--k-g); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
html body .elx-koszyk .elx-k-kraj { display: flex; align-items: center; margin: 0 0 12px; padding: 0 !important; width: auto; float: none; }
html body .elx-koszyk .elx-k-kraj .form-js { display: flex; align-items: center; gap: 8px; width: auto; padding: 0 !important; }
html body .elx-koszyk .elx-k-kraj label { height: auto; margin: 0; color: var(--k-s); font-size: 14px; line-height: 1.3; }
html body .elx-koszyk .elx-k-kraj select { width: auto; min-width: 150px; height: 38px; padding: 0 8px; border: 1px solid var(--k-r); border-radius: 6px; background: #fff; color: var(--k-g); font-size: 15px; -webkit-appearance: menulist; appearance: auto; }
html body .elx-koszyk .elx-k-brak { margin: 0 0 24px; color: var(--k-s); }
html body .elx-koszyk .elx-k-dp { margin: 0; padding: 0; }
html body .elx-koszyk .elx-k-ukryte { display: none !important; }
html body .elx-koszyk .elx-k-opcje { display: grid; gap: 8px; margin: 0 0 24px; transition: opacity .2s; }
html body .elx-koszyk .elx-k-opcje-platnosc { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
html body .elx-koszyk label.elx-k-opcja { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "radio tyt cena" ". opis opis"; align-items: center; gap: 2px 10px; height: auto !important; min-height: 0 !important; margin: 0; padding: 12px 14px; border: 1px solid var(--k-r); border-radius: 8px; background: #fff; color: var(--k-g); font-size: 15px !important; font-weight: 400; line-height: 1.35 !important; white-space: normal !important; cursor: pointer; }
html body .elx-koszyk label.elx-k-opcja:hover { border-color: #8a96a3; }
html body .elx-koszyk label.elx-k-opcja.elx-k-wyb { padding: 11px 13px; border: 2px solid var(--k-g); background: #fbfcf2; }
html body .elx-koszyk label.elx-k-opcja input { grid-area: radio; position: static !important; display: inline-block !important; width: 18px; height: 18px; margin: 0; opacity: 1 !important; -webkit-appearance: radio !important; appearance: auto !important; accent-color: var(--k-g); cursor: pointer; }
html body .elx-koszyk .elx-k-op-tyt { grid-area: tyt; font-weight: 700; }
html body .elx-koszyk .elx-k-op-cena { grid-area: cena; font-weight: 700; white-space: nowrap; }
html body .elx-koszyk .elx-k-op-opis { grid-area: opis; color: var(--k-s); font-size: 13px; }
html body .elx-koszyk .elx-k-op-opis em { font-style: normal; }
html body .elx-koszyk .elx-k-op-opis .elx-k-gratis { color: #2e7d32; font-weight: 700; }
html body .elx-koszyk .elx-k-op-opis small { display: block; margin-top: 4px; font-size: 12px; }
html body .elx-koszyk label.elx-k-opcja.elx-k-ukryta { display: none; }
html body .elx-koszyk .elx-k-wszystkie label.elx-k-opcja.elx-k-ukryta { display: grid; }
html body .elx-koszyk .elx-k-wszystkie .elx-k-wiecej { display: none; }
html body .elx-koszyk .elx-k-wiecej { justify-self: start; margin-top: 2px; }
html body .elx-koszyk .elx-k-czeka { opacity: .45; pointer-events: none; }
html body .elx-koszyk .elx-k-termin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -12px 0 24px; }
html body .elx-koszyk .elx-k-termin label { height: auto; margin: 0; color: var(--k-s); font-size: 14px; line-height: 1.3; }
html body .elx-koszyk .elx-k-termin input { height: 38px; padding: 0 8px; border: 1px solid var(--k-r); border-radius: 6px; color: var(--k-g); }
html body .elx-koszyk .elx-k-uwaga { margin: -16px 0 24px; color: var(--k-s); font-size: 13px; }
html body .elx-koszyk .elx-k-dp .collection-points-container-ui { margin: -12px 0 24px; }
html body .elx-koszyk .payment-channels-ui { margin: -12px 0 24px; }
/* zalogowany (i gość po zapisaniu danych): adres, uwagi i atrybuty — bloki Comarchu pod płatnością */
html body .elx-koszyk .elx-k-dostawa > .clear-after-ui { margin-bottom: 8px; }
html body .elx-koszyk .elx-k-uwagi, html body .elx-koszyk .elx-k-atrybuty { margin: 0 0 24px; }
/* podsumowanie (prawa kolumna, przyklejone) */
.elx-koszyk .elx-k-prawa { position: sticky; top: 16px; }
.elx-koszyk .elx-k-podsum { padding: 20px; border: 1px solid var(--k-ln); border-radius: 10px; background: #fff; box-shadow: 0 2px 12px rgba(10, 37, 64, .07); }
html body .elx-koszyk .elx-k-podsum h2 { margin: 0 0 12px; padding: 0; border: 0; color: var(--k-g); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.elx-koszyk .elx-k-podsum dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.elx-koszyk .elx-k-podsum dt { margin: 0; color: var(--k-s); font-weight: 400; }
.elx-koszyk .elx-k-podsum dt small { display: block; font-size: 12px; }
.elx-koszyk .elx-k-podsum dd { margin: 0; color: var(--k-g); font-weight: 700; text-align: right; white-space: nowrap; }
.elx-koszyk .elx-k-razem { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--k-ln); }
.elx-koszyk .elx-k-razem span { font-size: 16px; font-weight: 700; }
.elx-koszyk .elx-k-razem small { color: var(--k-s); font-size: 13px; font-weight: 400; }
.elx-koszyk .elx-k-razem b { font-size: 26px; line-height: 1; white-space: nowrap; }
html body .elx-koszyk .elx-k-podsum .elmax-dostawa-ui { margin: 14px 0 0; padding: 10px 12px; border: 1px solid #dde3ea; border-radius: 6px; background: #f8faf0; }
html body .elx-koszyk .elx-k-dalej { display: block; width: 100%; height: auto; margin: 16px 0 0; padding: 14px 16px; border: 0; border-radius: 8px; background: var(--k-l) !important; color: var(--k-g) !important; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2 !important; text-align: center; text-decoration: none; cursor: pointer; }
html body .elx-koszyk .elx-k-dalej:hover { background: var(--k-l2) !important; color: var(--k-g) !important; }
.elx-koszyk .elx-k-konto { margin: 10px 0 0; color: var(--k-s); font-size: 13px; text-align: center; }
.elx-koszyk .elx-k-konto a { color: var(--k-g); text-decoration: underline; cursor: pointer; }
.elx-koszyk .elx-k-spolecznosci { margin-top: 10px; text-align: center; }
.elx-koszyk .elx-k-punkty { margin: 12px 0 0; color: var(--k-s); font-size: 13px; line-height: 1.4; }
/* zgody i „Zamawiam i płacę” (blok Comarchu .adding-order-form-js) */
html body .elx-koszyk .elx-k-zgody { margin: 16px 0 0; padding: 0 !important; font-size: 13px; line-height: 1.4; }
html body .elx-koszyk .elx-k-zgody > div:not(.summary-with-btn-ui) { padding-left: 0 !important; padding-right: 0 !important; }
html body .elx-koszyk .elx-k-zgody .summary-with-btn-ui,
html body .elx-koszyk .elx-k-zgody .summary-with-btn-ui.fixed-ui { position: static !important; width: auto !important; }
html body .elx-koszyk .elx-k-zgody .summary-with-btn-ui > .box-ui { display: none !important; }
html body .elx-koszyk .elx-k-zgody .order-button-ui { display: block; width: 100%; height: auto; margin: 12px 0 0; padding: 14px 16px; border: 0; border-radius: 8px; background: var(--k-l) !important; color: var(--k-g) !important; font-size: 18px; font-weight: 700; line-height: 1.2 !important; }
html body .elx-koszyk .elx-k-zgody .order-button-ui:hover { background: var(--k-l2) !important; }
html body .elx-koszyk .elx-k-zgody .order-button-ui[disabled] { opacity: .5; cursor: default; }
/* kod rabatowy: zwinięty „Masz kod rabatowy?”, formularz sklepu w środku */
html body .elx-koszyk .elx-k-kupon-blok { float: none; width: auto; max-width: none; margin: 0; padding: 0 !important; background: none; }
html body .elx-koszyk .elx-k-kupon-blok::after { display: none; }
html body .elx-koszyk .elx-k-kupon-blok .loyalty-ui { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; }
.elx-koszyk .elx-k-kupon { margin-top: 14px; font-size: 14px; }
.elx-koszyk .elx-k-kupon summary { color: var(--k-g); text-decoration: underline; cursor: pointer; }
html body .elx-koszyk .elx-k-kupon .form-js,
html body .elx-koszyk .elx-k-kupon-blok > .form-js { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
html body .elx-koszyk .elx-k-kupon-blok > .form-js { margin-top: 14px; }
html body .elx-koszyk .elx-k-kupon-blok .inputs-wrapper-ui { float: none !important; flex: 1 1 160px; width: auto !important; min-width: 0; }
html body .elx-koszyk .elx-k-kupon-blok .inputs-wrapper-ui > div, html body .elx-koszyk .elx-k-kupon-blok .inputs-wrapper-ui .full-ui { float: none !important; width: 100% !important; padding: 0 !important; }
html body .elx-koszyk .elx-k-kupon-blok label, html body .elx-koszyk .elx-k-kupon-blok span.f-left-ui { display: block; float: none !important; width: auto !important; height: auto; margin: 0 0 4px; padding: 0 !important; color: var(--k-s); font-size: 12px; line-height: 1.3; }
html body .elx-koszyk .elx-k-kupon-blok input[type=text], html body .elx-koszyk .elx-k-kupon-blok input[type=email] { float: none !important; width: 100% !important; height: 38px; padding: 0 10px; border: 1px solid var(--k-r); border-radius: 6px; }
html body .elx-koszyk .elx-k-kupon-blok .add-coupon-ui { float: none !important; width: auto !important; height: 38px !important; margin: 0 !important; padding: 0 14px; border: 0; border-radius: 6px; background: var(--k-g) !important; color: #fff !important; font-size: 14px; }
html body .elx-koszyk .elx-k-kupon-blok .add-coupon-ui:hover { background: #163a5f !important; }
html body .elx-koszyk .elx-k-kupon-blok .error-ui { position: static; flex-basis: 100%; }
/* okno gościa „Uzupełnij formularz dostawy” (bez zmian; schowana pusta ramka, w której siedzi) */
html body .elx-koszyk .elx-k-gosc-okno { height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
/* pasek „Do zapłaty / Dalej” — tylko telefon */
.elx-koszyk .elx-k-dol { display: none; }
/* lżejszy pasek nad koszykiem, gdy ma co pokazać (kilka koszyków, limit kredytowy) */
html body nav.cart-bar-ui.elx-k-nav { border: 0 !important; border-bottom: 1px solid #e3e8ee !important; background: #f5f7f9 !important; color: #0a2540 !important; }
html body nav.cart-bar-ui.elx-k-nav li { line-height: 44px !important; color: #0a2540 !important; }
/* tablet i mały laptop: podsumowanie pod listą (przy 1024 px lewa kolumna obok podsumowania byłaby za wąska na nazwy) */
@media (max-width: 1179px) {
.elx-koszyk .elx-k-siatka { grid-template-columns: minmax(0, 1fr); }
.elx-koszyk .elx-k-prawa { position: static; }
}
/* telefon: pozycje jak karty, stały pasek „Do zapłaty / Dalej” na dole */
@media (max-width: 767px) {
html body .elx-koszyk.cart-ui { padding: 12px 12px 96px; }
.elx-koszyk .elx-k-kroki { gap: 4px; font-size: 12px; }
.elx-koszyk .elx-k-kroki li { gap: 4px; }
.elx-koszyk .elx-k-kroki li + li::before { width: 10px; margin-right: 2px; }
html body .elx-koszyk .elx-k-naglowek h1 { font-size: 24px; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info usun" "ilosc wartosc"; gap: 10px 12px; align-items: start; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .name-and-code-ui,
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .name-and-code-ui > .replace-url-lq { gap: 12px; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .image-container-ui { flex-basis: 64px; width: 64px !important; height: 64px !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js .product-name-ui { font-size: 15px !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .amount-stepper-column-ui { align-self: center; padding-left: 76px !important; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .elx-k-wartosc { align-self: center; }
html body .elx-koszyk.cart-ui .div-table-ui .div-table-row-ui.cart-product-container-js > .remove-product-ui { justify-content: flex-end; margin-top: -4px !important; margin-right: -6px !important; }
html body .elx-koszyk .elx-k-opcje-platnosc { grid-template-columns: 1fr; }
html body .elx-koszyk label.elx-k-opcja { padding: 10px 12px; }
html body .elx-koszyk label.elx-k-opcja.elx-k-wyb { padding: 9px 11px; }
.elx-koszyk .elx-k-podsum { padding: 16px; }
.elx-koszyk .elx-k-dol { position: fixed; right: 0; bottom: 0; left: 0; z-index: 990; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--k-ln); background: #fff; box-shadow: 0 -4px 14px rgba(10, 37, 64, .1); color: var(--k-g); font-size: 14px; line-height: 1.2; }
.elx-koszyk .elx-k-dol b { display: block; font-size: 20px; white-space: nowrap; }
html body .elx-koszyk .elx-k-dol .elx-k-dalej { width: auto; margin: 0; padding: 12px 22px; font-size: 16px; white-space: nowrap; }
body:has(.elx-k-dol) #top-button-ui { bottom: 90px !important; }
}
/* ===== KONIEC ELMAX: koszyk v9 ===== */
/* ===== ELMAX v10: karty kategorii z grafikami — strona główna, działy, „Wszystkie kategorie” (19.10.2026) ===== */
/* Propozycje „grafiki-kategorii” i „strona-glowna-siatka” (przyjęte 19.10) = demo/static/kategorie.css z 19.10, z przedrostkiem „html body” (ten blok jest w layout0.css,
a desktop1/2.css i mobile.css ładują się później). HTML: partials/home/elmax-kategorie.html (główna), elements/subcategories/subcategories-1.html (dział, .elx-siatka--pod),
partials/products/categories-map.html (/produkty/2, .elx-katalog). Grafiki: css/img/elx-kat-*.jpg (600×400, pakiet4/grafiki-kategorii.js); brak grafiki = białe pole z ikoną paczki.
Siatka bez „zęba”: ostatni rząd zawsze pełny (1 karta zostaje → cały rząd i układ poziomy; 2 karty → po pół rzędu), dla każdej liczby działów. */
html body .elx-siatka { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
html body .elx-siatka > li { grid-column: span 2; margin: 0; padding: 0; }
@media (min-width: 1024px) {
html body .elx-siatka > li:nth-child(3n+1):last-child { grid-column: 1 / -1; }
html body .elx-siatka > li:nth-child(3n+1):nth-last-child(2), html body .elx-siatka > li:nth-child(3n+1):nth-last-child(2) + li { grid-column: span 3; }
}
@media (max-width: 1023px) {
html body .elx-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html body .elx-siatka > li { grid-column: auto; }
html body .elx-siatka > li:nth-child(2n+1):last-child { grid-column: 1 / -1; }
}
/* karta */
html body .elx-karta { container-type: inline-size; list-style: none; }
html body .elx-karta__in { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid #dde3ea; border-radius: 10px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
html body .elx-karta__in:hover { border-color: #bdd027; box-shadow: 0 8px 22px rgba(10, 37, 64, .10); }
html body .elx-karta__foto { display: block; position: relative; background: #fff; text-decoration: none; }
html body .elx-karta__foto img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
/* kategoria bez grafiki: to samo białe tło + ikona paczki — siatka zostaje równa */
html body .elx-karta__foto--brak { aspect-ratio: 2 / 1; }
html body .elx-karta__foto--brak::after { content: ""; position: absolute; inset: 0; background: center / 64px 64px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-opacity='.28' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='m3 7.5 9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E"); }
html body .elx-karta__tresc { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; }
html body .elx-karta__nazwa { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 19px; line-height: 1.25; font-weight: 700; text-transform: none; }
html body .elx-karta__nazwa::before, html body .elx-karta__nazwa::after { display: none !important; }
html body .elx-karta__nazwa a { color: #0a2540; text-decoration: none; }
html body .elx-karta__in:hover .elx-karta__nazwa a { text-decoration: underline; text-decoration-color: #bdd027; text-underline-offset: 3px; }
html body .elx-karta__ile { margin: 0; color: #5b6b7b; font-size: 13px; line-height: 1.3; }
html body .elx-karta__linki { list-style: none; margin: 4px 0 0; padding: 8px 0 0; border-top: 3px solid #bdd027; }
html body .elx-karta__linki li { margin: 0; padding: 0; break-inside: avoid; }
html body .elx-karta__linki a { display: block; padding: 4px 0; color: #1f2933; font-size: 15px; line-height: 1.35; text-decoration: none; }
html body .elx-karta__linki a:hover { color: #0a2540; text-decoration: underline; }
html body .elx-karta__wiecej { margin-top: auto; padding-top: 8px; color: #0a2540; font-size: 14px; font-weight: 700; text-decoration: none; }
html body .elx-karta__wiecej::after { content: " \2192"; }
html body .elx-karta__wiecej:hover { text-decoration: underline; }
/* podkategorie działu: niższe poziomy jako „pigułki” */
html body .elx-karta__linki--chipy { display: flex; flex-wrap: wrap; gap: 4px; border-top: 0; padding-top: 2px; }
html body .elx-karta__linki--chipy a { display: inline-block; padding: 2px 9px; border-radius: 12px; background: #f2f4f6; color: #0a2540; font-size: 13px; line-height: 1.5; }
html body .elx-karta__linki--chipy a:hover { background: #bdd027; text-decoration: none; }
/* strona główna: na karcie 4 największe podkategorie; karta na cały rząd pokazuje wszystkie */
html body .elx-siatka--glowna .elx-karta__linki li:nth-child(n+5) { display: none; }
/* karta szersza niż zwykła (ostatni rząd: 1 karta na cały rząd albo 2 po pół; wiersz katalogu): grafika z lewej, w całości (bez przycinania) */
@container (min-width: 620px) {
html body .elx-karta__in { flex-direction: row; }
html body .elx-karta__foto { flex: 0 0 min(46%, 440px); display: flex; align-items: center; }
html body .elx-karta__foto img { height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
html body .elx-karta__foto--brak { height: 100%; aspect-ratio: 3 / 2; }
html body .elx-karta__tresc { padding: 16px 22px; justify-content: center; }
html body .elx-karta__linki { columns: 3 180px; column-gap: 24px; }
html body .elx-siatka--glowna .elx-karta__linki li:nth-child(n+5) { display: block; }
html body .elx-karta__wiecej { margin-top: 6px; }
}
/* „Wszystkie kategorie” (/produkty/2): działy w wierszach — każdy z grafiką i pełną listą podkategorii */
html body .elx-katalog { display: grid; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
html body .elx-karta--wiersz .elx-karta__nazwa { font-size: 22px; }
html body .elx-karta--wiersz .elx-karta__linki { columns: 3 190px; }
@container (min-width: 620px) { html body .elx-karta--wiersz .elx-karta__foto { flex: 0 0 300px; } }
/* telefon: kompaktowo — grafika i nazwa (podkategorie są na stronie działu jedno dotknięcie dalej) */
@media (max-width: 599px) {
html body .elx-siatka { gap: 10px; }
html body .elx-karta__foto img, html body .elx-karta__foto--brak { aspect-ratio: 3 / 2; }
html body .elx-karta__tresc { padding: 9px 11px 11px; gap: 2px; }
html body .elx-karta__nazwa { font-size: 15px; line-height: 1.25; }
html body .elx-karta__ile { font-size: 12px; }
html body .elx-siatka .elx-karta__linki, html body .elx-siatka .elx-karta__wiecej { display: none; }
/* „Wszystkie kategorie” na telefonie: mała grafika z lewej, nazwa obok, podkategorie pod spodem w 2 kolumnach */
html body .elx-karta--wiersz .elx-karta__in { display: grid; grid-template-columns: 44% 1fr; }
html body .elx-karta--wiersz .elx-karta__tresc { display: contents; }
html body .elx-karta--wiersz .elx-karta__foto { grid-row: 1 / span 2; }
html body .elx-karta--wiersz .elx-karta__nazwa { grid-column: 2; align-self: end; padding: 10px 12px 0 !important; font-size: 17px; }
html body .elx-karta--wiersz .elx-karta__ile { grid-column: 2; align-self: start; padding: 3px 12px 0; }
html body .elx-karta--wiersz .elx-karta__linki { grid-column: 1 / -1; margin: 10px 14px 12px; columns: 2; column-gap: 14px; }
html body .elx-karta--wiersz .elx-karta__linki a { font-size: 14px; padding: 5px 0; }
/* karta sama w ostatnim rzędzie: poziomo (grafika z lewej), żeby nie była większa od pozostałych */
@container (min-width: 300px) {
html body .elx-siatka .elx-karta__in { flex-direction: row; align-items: center; }
html body .elx-siatka .elx-karta__foto { flex: 0 0 50%; }
html body .elx-siatka .elx-karta__tresc { padding: 10px 14px; }
}
}
/* strona działu (.elx-siatka--pod): kompaktowe karty poziome — mała grafika z lewej (w całości), nazwa, liczba i podkategorie z prawej
(właściciel 19.10: „kategoria ma bardzo duże grafiki, trzeba dużo zjechać, aby wejść do produktów”) */
html body .elx-siatka--pod { gap: 12px; }
html body .elx-siatka--pod .elx-karta__in { flex-direction: row; align-items: center; }
html body .elx-siatka--pod .elx-karta__foto { flex: 0 0 150px; display: flex; align-items: center; }
html body .elx-siatka--pod .elx-karta__foto img { width: 150px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
html body .elx-siatka--pod .elx-karta__foto--brak { width: 150px; height: 100px; aspect-ratio: auto; }
html body .elx-siatka--pod .elx-karta__foto--brak::after { background-size: 40px 40px; }
html body .elx-siatka--pod .elx-karta__tresc { padding: 10px 14px 10px 6px; gap: 4px; justify-content: center; }
html body .elx-siatka--pod .elx-karta__nazwa { font-size: 16px; }
html body .elx-siatka--pod .elx-karta__linki--chipy a { font-size: 12px; padding: 1px 8px; }
@media (max-width: 599px) { /* telefon: jedna kolumna, wiersz jak lista: grafika 96 px + pełna nazwa i liczba */
html body .elx-siatka.elx-siatka--pod { grid-template-columns: minmax(0, 1fr); }
html body .elx-siatka--pod > li, html body .elx-siatka--pod > li:nth-child(2n+1):last-child { grid-column: 1 / -1; }
html body .elx-siatka--pod .elx-karta__foto { flex-basis: 96px; }
html body .elx-siatka--pod .elx-karta__foto img, html body .elx-siatka--pod .elx-karta__foto--brak { width: 96px; height: 64px; }
}
/* strona główna: odstępy sekcji kategorii */
html body .elmax-kat .elx-siatka { margin-top: 4px; }
html body .elmax-kat .elx-siatka + .elmax-wiecej { margin-top: 16px; }
/* ===== KONIEC ELMAX v10: karty kategorii ===== */
/* ===== ELMAX v10: formularz gościa na jednym ekranie (partials/order/cart.html, partials/common/address-form.html) ===== */
/* Okno gościa „Dane do zamówienia” NOWEGO koszyka: blok okna w partials/order/elmax-koszyk.html (.elx-k-gosc-okno > … > .elx-fg) + partials/order/elmax-formularz-js.html.
cart.html (koszyk Comarchu, np. „Wersja koszyka: Wygodna”) i address-form.html są bez zmian — style działają tylko wewnątrz .elx-fg, więc rejestracja,
profil klienta i koszyk Comarchu wyglądają jak dotąd. Tylko wygląd i kolejność: pola, klasy -js / -lq i obsługa Comarchu zostają.
Kolejność bez przenoszenia pól: u firmy dane do faktury (NIP) przed danymi dostawy (order), e-mail i telefon nad adresem dostawy (korzeń formularza
adresu ma display: contents, pola dostają order). Stan „Firma / Osoba prywatna” i „Dostawa na adres firmy” czytany przez :has() — bez :has() (stare przeglądarki)
zostaje kolejność Comarchu i wszystkie pola widoczne. Przedrostek z 3 klasami, bo css/order.css ładuje się PO layout0.css i ma
„.order-ui .not-authenticated-in-order-container-ui …” (3 klasy). Kolory: zmienne --k-* z bloku 7-koszyk.css (.elx-koszyk). */
/* tło i okno */
html body .elx-koszyk .elx-k-gosc-okno .order-delivery-data-popup-background-ui { padding: 24px 16px; background: rgba(10, 37, 64, .55); }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg { position: relative; top: auto; right: auto; bottom: auto; left: auto; transform: none; width: auto; max-width: 1040px; margin: 0 auto; padding: 24px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 12px 40px rgba(10, 37, 64, .25); color: var(--k-g); font-size: 15px; line-height: 1.4; text-align: left; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .close-order-delivery-data-popup-background-js { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--k-t); color: var(--k-g); font-size: 14px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .close-order-delivery-data-popup-background-js:hover { background: var(--k-ln); }
/* kroki (kształt z 7-koszyk.css), tytuł Comarchu tylko dla czytników ekranu */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-kroki { margin: 0 48px 18px 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-byl b { border-color: var(--k-l); background: var(--k-l); color: var(--k-g); }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg > .big-text-ui { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* formularz + podsumowanie po prawej */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
/* „Kupujesz jako”: Firma / Osoba prywatna (radio Comarchu) jako kafelki */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .elx-fg-kto,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .forms-container-ui { grid-column: 1 / -1; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-kto { color: var(--k-g); font-size: 16px; font-weight: 700; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; margin: 0; padding: 12px 14px; border: 1px solid var(--k-r); border-radius: 8px; background: #fff; cursor: pointer; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui:hover { border-color: #8a96a3; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui:has(> input:checked) { padding: 11px 13px; border: 2px solid var(--k-g); background: #fbfcf2; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui > .label-ui { grid-row: 1 / span 2; height: auto; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui > span:not(.label-ui) { color: var(--k-g); font-size: 16px; font-weight: 700; line-height: 1.25; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui > .elx-fg-dok { grid-column: 2; color: var(--k-s); font-size: 13px; line-height: 1.3; }
/* sekcje: u firmy dane do faktury (NIP) przed danymi dostawy, u osoby prywatnej kolejność Comarchu */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui { display: flex; flex-direction: column; gap: 22px; margin: 14px 0 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-container-ui,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-address-form-in-popup-container-ui { display: block; width: auto; margin: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg:has(.order-delivery-data-popup-radio-js[value=true]:checked) .invoice-address-form-in-popup-container-ui { order: -1; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .form-title-ui { margin: 0 0 12px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--k-ln); color: var(--k-g); font-size: 17px; font-weight: 700; line-height: 1.3; }
/* paragon / faktura (osoba prywatna); u firmy zawsze faktura (sklep sam zaznacza „Chcę otrzymać fakturę”) — przełącznik schowany */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-address-form-in-popup-container-ui > .radio-ui { display: inline-flex; align-items: center; margin: 0 20px 10px 0 !important; color: var(--k-g); font-size: 15px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg:has(.order-delivery-data-popup-radio-js[value=true]:checked) .invoice-address-form-in-popup-container-ui > .radio-ui { display: none; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .recipe-ui { margin: 0 !important; color: var(--k-s); font-size: 13px; }
/* pola formularzy adresu (address-form.html): siatka 12 kolumn; korzeń formularza dostawy / kupującego „przezroczysty” (display: contents) */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .buyer-address-form-in-popup-js,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-address-form-in-popup-js .invoice-js { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > .company-form-js,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > .retail-form-js,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .buyer-address-form-in-popup-js > .company-form-js,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .buyer-address-form-in-popup-js > .retail-form-js { display: contents; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > *,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > * > *,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .buyer-address-form-in-popup-js > * > *,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-js > * { grid-column: 1 / -1; min-width: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .clear-after-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .clear-after-ui::after { display: none; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .half-ui { float: none; width: auto; margin: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .clear-after-ui:has(input[name=zipCode]) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui div:has(> input[name=street]),
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .clear-after-ui:has(input[name=streetNo]) { grid-column: span 6; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui label:not(.radio-ui):not(.checkbox-ui):not(.elx-fg-ten-sam) { color: var(--k-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui input[readonly] { opacity: 1; background: var(--k-t); color: var(--k-g); cursor: default; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .select-background-ui { margin-top: 0; }
/* firma, dane do faktury: pusty drugi wiersz nazwy tylko do odczytu schowany (GUS przy nazwie > 50 znaków pokazuje pole sam, jQuery .show()) */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-address-form-in-popup-js.company-js input[name=name2][readonly],
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-address-form-in-popup-js.company-js label:has(+ input[name=name2][readonly]) { display: none; }
/* zakładki Comarchu „Dane do wysyłki / Dane kupującego” (ustawienie „Dodatkowe dane kupującego”) jako nagłówek sekcji */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .form-title-ui.not-authenticated-ui { margin: 0 0 12px; padding: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .form-title-ui .clear-after-ui { display: flex; flex-wrap: wrap; gap: 4px 20px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .order-address-data-tab-ui { float: none; display: block; width: auto; height: auto; margin: 0 0 -1px; padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--k-s); font-size: 17px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .order-address-data-tab-ui.active-js { border-bottom-color: var(--k-g); color: var(--k-g); cursor: default; }
/* dane do faktury: kraj | NIP (przedrostek VAT UE, pole NIP, „Pobierz dane z GUS”) w pierwszym wierszu */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-js > :first-child { grid-column: span 4; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-js > :first-child + * { grid-column: span 8; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .vateu-ui { grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .vateu-ui select { white-space: nowrap; text-overflow: ellipsis; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .vateu-ui > .f-right-ui { padding-top: 25px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui div:has(> input[name=tin]) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 8px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui div:has(> input[name=tin]) > * { flex: 1 1 100%; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui div:has(> input[name=tin]) > input[name=tin] { flex: 1 1 140px; width: auto; min-width: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui div:has(> input[name=tin]) > .elx-fg-gus { flex: 0 0 auto; height: 46px; margin: 0; padding: 0 14px; border: 0; border-radius: 6px; background: var(--k-g); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .elx-fg-gus:hover { background: #163a5f; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .elx-fg-gus-info { margin-top: 4px; color: var(--k-s); font-size: 12px; line-height: 1.35; }
/* dane dostawy firmy: e-mail i telefon, „Dostawa na adres firmy”, potem (gdy odznaczone) adres dostawy */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > div > div:has(> input[name=email]),
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > div > div:has(> input[name=phoneNo]) { grid-column: span 6; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.company-js > .company-form-js > * { order: 5; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.company-js > .company-form-js > :first-child { order: 1; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.company-js > .company-form-js > :last-child { order: 2; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.company-js > .elx-fg-ten-sam { order: 3; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.company-js > .elx-fg-adres-tyt { order: 4; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.company-js:has(.elx-fg-ten-sam-js:checked) > .company-form-js > :not(:first-child):not(:last-child),
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.company-js:has(.elx-fg-ten-sam-js:checked) > .elx-fg-adres-tyt { display: none; }
/* osoba prywatna: e-mail i telefon pod adresem */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.retail-js > .retail-form-js > :first-child,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js.retail-js > .retail-form-js > :last-child { order: 1; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-ten-sam { display: flex; align-items: flex-start; gap: 10px; width: auto; height: auto; margin: 2px 0 0; color: var(--k-g); font-size: 15px; line-height: 1.35; cursor: pointer; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-ten-sam input { flex: 0 0 auto; position: static; width: 18px; height: 18px; margin: 1px 0 0; opacity: 1; visibility: visible; -webkit-appearance: checkbox; appearance: auto; accent-color: var(--k-g); cursor: pointer; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-ten-sam small { color: var(--k-s); font-size: 13px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-adres-tyt { margin: 4px 0 -4px; padding-top: 12px; border-top: 1px solid var(--k-ln); color: var(--k-g); font-size: 16px; font-weight: 700; }
/* podsumowanie i „Zapisz dane” (przycisk Comarchu .save-delivery-data-popup-js) */
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-podsum { position: sticky; top: 16px; padding: 16px; border: 1px solid var(--k-ln); border-radius: 10px; background: #f8faf0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-podsum h3 { margin: 0 0 10px; padding: 0; border: 0; color: var(--k-g); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-podsum dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-podsum dt { margin: 0; color: var(--k-s); font-weight: 400; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-podsum dt small { display: block; color: var(--k-g); font-size: 13px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-podsum dd { margin: 0; color: var(--k-g); font-weight: 700; text-align: right; white-space: nowrap; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .save-delivery-data-popup-ui { position: static; left: auto; transform: none; display: block; width: 100%; height: auto; margin: 16px 0 0; padding: 14px 16px; border: 0; border-radius: 8px; background: var(--k-l) !important; color: var(--k-g) !important; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .save-delivery-data-popup-ui:hover { background: var(--k-l2) !important; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .save-delivery-data-popup-ui.busy-js { opacity: .6; cursor: progress; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-potem { margin: 8px 0 0; color: var(--k-s); font-size: 13px; line-height: 1.35; text-align: center; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-k-konto a { display: inline; width: auto; font-weight: 400; }
/* tablet i mały laptop: podsumowanie pod formularzem */
@media (max-width: 1179px) {
html body .elx-koszyk .elx-k-gosc-okno .elx-fg { max-width: 720px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-siatka { grid-template-columns: minmax(0, 1fr); }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-podsum { position: static; }
}
/* telefon: okno na cały ekran, pola jedno pod drugim */
@media (max-width: 767px) {
html body .elx-koszyk .elx-k-gosc-okno .order-delivery-data-popup-background-ui { padding: 0; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg { min-height: 100%; padding: 16px 14px 28px; border-radius: 0; box-shadow: none; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .elx-fg-kroki { margin-right: 44px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui { padding: 10px 12px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .radio-container-ui > .radio-ui:has(> input:checked) { padding: 9px 11px; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-js > :first-child,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .invoice-js > :first-child + *,
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui div:has(> input[name=street]),
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .clear-after-ui:has(input[name=streetNo]),
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > div > div:has(> input[name=email]),
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .delivery-address-form-in-popup-js > div > div:has(> input[name=phoneNo]) { grid-column: 1 / -1; }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui .vateu-ui { grid-template-columns: 108px minmax(0, 1fr); }
html body .elx-koszyk .elx-k-gosc-okno .elx-fg .forms-container-ui div:has(> input[name=tin]) > .elx-fg-gus { flex: 1 1 100%; margin-top: 8px; }
}
/* ===== KONIEC ELMAX v10: formularz gościa ===== */
/* ===== ELMAX v10: karta produktu, wyszukiwarka, miniatury w liście ===== */
/* Propozycje przyjęte 19.10 (demo: demo/static/karta-szukaj.css). Selektory z „html body”, bo product-presentation-g.css, product-list.css i mobile.css
ładują się PO layout0.css. Komputer = od 1280 px (poniżej mobile.css sklepu), telefon = do 767 px.
A2 (karta: bez wagi i wymiarów obok zdjęcia) i A1 (napis zamiast „AiGeneratedProductsRecommendations”) nie potrzebują CSS — to Liquid i tłumaczenie.
A4 (pasek z ceną i „Do koszyka” na telefonie) jest w paczce od 15.10: static-elements/product-presentation/product-presentation.html (.elmax-pasek-ui). */
/* A3. karta, towar bez opinii (partials/product/product-presentation-data.html: klasa elx-opinie-zwiniete i przycisk elx-opinie-btn).
Komputer: zamiast pustego formularza wiersz „Masz ten towar? … [Napisz pierwszą opinię]”; klik zdejmuje klasę = zwykły formularz sklepu.
Poniżej 1280 px bez zmian: formularz jest tam schowany przez sklep (no-on-mobile-ui), a „Dodaj opinię” to przycisk sklepu. */
.elx-opinie-btn { display: none; }
@media (min-width: 1280px) {
html body .reviews-ui.elx-opinie-zwiniete > .reviews-column-ui:not(.no-reviews-ui) { display: none; }
html body .reviews-ui.elx-opinie-zwiniete > .no-reviews-ui { position: static; float: none; width: auto; margin: 0; padding: 18px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; text-align: left; border-top: 1px solid #e3e7ec; }
html body .reviews-ui.elx-opinie-zwiniete .no-reviews-title-ui { margin: 0; font-size: 18px; font-weight: 700; color: #0a2540; }
html body .reviews-ui.elx-opinie-zwiniete .no-reviews-info-ui { margin: 0; font-size: 15px; color: #5b6b7b; }
html body .reviews-ui.elx-opinie-zwiniete .no-reviews-rating-ui { display: none; }
html body .reviews-ui.elx-opinie-zwiniete .elx-opinie-btn { display: inline-block; margin-left: auto; padding: 9px 16px; border: 2px solid #0a2540; border-radius: 6px; background: #fff; color: #0a2540; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
html body .reviews-ui.elx-opinie-zwiniete .elx-opinie-btn:hover, html body .reviews-ui.elx-opinie-zwiniete .elx-opinie-btn:focus-visible { background: #0a2540; color: #fff; }
}
/* B. wyszukiwarka: kategorie z wynikami nad listą (partials/products/elmax-szukaj-kategorie.html; nad „Szybkim wyborem”, który staje tuż nad listą).
Telefon: jeden przewijany rząd. */
html body .elx-szukaj-kat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px 14px; background: #f5f8fb; border: 1px solid #dde3ea; border-radius: 8px; }
html body .elx-szukaj-kat__tyt { margin-right: 4px; font-weight: 700; color: #0a2540; }
html body .elx-szukaj-kat a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #c9d3dd; border-radius: 999px; background: #fff; color: #0a2540; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; }
html body .elx-szukaj-kat a:hover, html body .elx-szukaj-kat a:focus-visible { border-color: #bdd027; background: #f7f9e8; }
html body .elx-szukaj-kat small { color: #5b6b7b; font-size: 12px; font-weight: 400; }
@media (max-width: 1279px) {
html body .elx-szukaj-kat { margin: 0 12px 12px; }
}
@media (max-width: 767px) {
html body .elx-szukaj-kat { flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; }
html body .elx-szukaj-kat::-webkit-scrollbar { display: none; }
html body .elx-szukaj-kat__tyt, html body .elx-szukaj-kat a { flex: 0 0 auto; white-space: nowrap; }
}
/* C. lista towarów, widok tabeli („szybkie zakupy”, klasa quick-shopping-view-js), komputer: miniatura 64 px przy nazwie.
Zdjęcie jest w kodzie każdej pozycji (partials/products/products-list-item.html), product-list.css chowa je w tym widoku; leniwe wczytanie (data-src)
robi skrypt sklepu (js/init.js, IntersectionObserver), gdy miniatura jest widoczna. Tylko klasa widoku tabeli — widok listy i siatki bez zmian
(warunek z :has(.table-header-ui) łapał też je, bo nagłówek tabeli zostaje w kodzie strony; poprawione w demie 19.10). */
@media (min-width: 1280px) {
html body .product-list-ui[class*="quick-shopping"] .product-item-ui .name-and-code-ui { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; }
html body .product-list-ui[class*="quick-shopping"] .product-item-ui .name-and-code-ui > * { grid-column: 2; }
html body .product-list-ui[class*="quick-shopping"] .product-item-ui .name-and-code-ui > .image-container-ui { display: block !important; grid-column: 1; grid-row: 1 / span 6; align-self: center; position: relative;
width: 64px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; background: #fff; border: 1px solid #edf0f3; border-radius: 6px; overflow: hidden; }
html body .product-list-ui[class*="quick-shopping"] .product-item-ui .name-and-code-ui > .image-container-ui img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; transform: none !important; opacity: 1 !important; }
html body .product-list-ui[class*="quick-shopping"] .product-item-ui .name-and-code-ui > .image-container-ui .no-image-ui { font-size: 40px; line-height: 64px; }
html body .product-list-ui[class*="quick-shopping"] .product-item-ui .name-and-code-ui > .image-container-ui .product-flags-ui { display: none !important; }
}
/* ===== KONIEC ELMAX v10: karta produktu, wyszukiwarka, miniatury ===== */
/* ===== ELMAX v11: strona podziękowania po zamówieniu (partials/order/thx.html) i ikona ustawień cookies ===== */
/* Strona podziękowania (19.10.2026, właściciel o starej: „PODSUMOWANIE JAKIEŚ DZIWNE JEST”) w języku nowego koszyka (7-koszyk.css): nagłówek z ✓ i statusem,
z lewej „Co dalej?”, towary, wiadomość i zgody, z prawej karta podsumowania z przyciskami; ≤1023 px jedna kolumna, podsumowanie zaraz pod nagłówkiem.
Klasy .elx-dz* tylko w nowym thx.html; bloki Comarchu w środku (błąd płatności, banery, propozycje) dostają tu tylko wygląd.
Przedrostek „html body”: order.css i order-m.css (ładowane PO layout0.css) mają długie selektory dla .thank-you-ui. */
html body .thank-you-ui.narrow-container-ui:has(> .elx-dzieki) { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; text-align: left !important; }
.elx-dzieki { --d-g: #0a2540; --d-l: #bdd027; --d-l2: #a8bd1f; --d-s: #5b6875; --d-ln: #e3e8ee; --d-r: #c9d2db; --d-t: #f5f7f9; }
html body .elx-dzieki { max-width: 1240px; margin: 0 auto; padding: 24px 16px 48px; color: var(--d-g); font-size: 15px; line-height: 1.45; text-align: left; }
html body .elx-dzieki h1, html body .elx-dzieki h2 { padding: 0; border: 0; color: var(--d-g); font-weight: 700; letter-spacing: 0; text-transform: none; }
html body .elx-dzieki h1::before, html body .elx-dzieki h1::after, html body .elx-dzieki h2::before, html body .elx-dzieki h2::after { display: none !important; }
/* nagłówek: ✓, numer, e-mail, status */
html body .elx-dzieki .elx-dz-glowa { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 24px; padding: 20px 22px; border: 1px solid #e2e9c4; border-radius: 10px; background: #f8faf0; }
html body .elx-dzieki .elx-dz-ikona { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--d-l) center / 26px 26px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2540' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html body .elx-dzieki .elx-dz-glowa-tekst { min-width: 0; }
html body .elx-dzieki .elx-dz-glowa h1 { margin: 4px 0 6px; font-size: 26px; line-height: 1.25; }
html body .elx-dzieki .elx-dz-email { margin: 0 0 10px; color: var(--d-s); }
html body .elx-dzieki .elx-dz-glowa .message-bar-ui { margin: 0 0 10px !important; }
html body .elx-dzieki .elx-dz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--d-s); font-size: 14px; }
html body .elx-dzieki .elx-dz-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #fff4d6; color: #6b4a00; font-size: 13px; font-weight: 700; }
html body .elx-dzieki > .message-bar-ui { margin: 0 0 20px !important; }
/* dwie kolumny jak w koszyku */
html body .elx-dzieki .elx-dz-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
html body .elx-dzieki .elx-dz-lewa { min-width: 0; }
html body .elx-dzieki .elx-dz-prawa { position: sticky; top: 16px; }
html body .elx-dzieki .elx-dz-sekcja { margin: 0 0 24px; }
html body .elx-dzieki .elx-dz-sekcja h2, html body .elx-dzieki .elx-dz-podsum h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; }
html body .elx-dzieki .elx-dz-sekcja h2 span { color: var(--d-s); font-size: 15px; font-weight: 400; }
/* Co dalej? — 3 kroki z danych zamówienia */
html body .elx-dzieki .elx-dz-dalej ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: elxdz; }
html body .elx-dzieki .elx-dz-dalej li { position: relative; margin: 0; padding: 12px 14px 12px 54px; border: 1px solid var(--d-ln); border-radius: 8px; background: #fff; list-style: none; counter-increment: elxdz; }
html body .elx-dzieki .elx-dz-dalej li::before { content: counter(elxdz); position: absolute; top: 12px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--d-g); color: #fff; font-size: 14px; font-weight: 700; line-height: 26px; text-align: center; }
html body .elx-dzieki .elx-dz-dalej li b { display: block; color: var(--d-s); font-size: 13px; font-weight: 600; }
html body .elx-dzieki .elx-dz-dalej li span { font-weight: 700; }
/* zamówione towary — wiersze jak w koszyku */
html body .elx-dzieki .elx-dz-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--d-ln); }
html body .elx-dzieki .elx-dz-poz { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--d-ln); list-style: none; }
html body .elx-dzieki .elx-dz-zdj { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border: 1px solid #edf0f3; border-radius: 6px; background: #fff; }
html body .elx-dzieki .elx-dz-zdj img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; }
html body .elx-dzieki .elx-dz-zdj i { color: var(--d-r); font-size: 26px; }
html body .elx-dzieki .elx-dz-nazwa { min-width: 0; }
html body .elx-dzieki .elx-dz-nazwa a { color: var(--d-g); font-weight: 700; text-decoration: none; }
html body .elx-dzieki .elx-dz-nazwa a:hover { text-decoration: underline; }
html body .elx-dzieki .elx-dz-nazwa small { display: block; margin-top: 2px; color: var(--d-s); font-size: 13px; }
html body .elx-dzieki .elx-dz-ilosc { color: var(--d-s); white-space: nowrap; }
html body .elx-dzieki .elx-dz-wartosc { text-align: right; white-space: nowrap; }
html body .elx-dzieki .elx-dz-wartosc b { font-size: 16px; }
html body .elx-dzieki .elx-dz-wartosc small, html body .elx-dzieki .elx-dz-wartosc span { color: var(--d-s); font-size: 13px; }
html body .elx-dzieki .elx-dz-wartosc span { display: block; }
html body .elx-dzieki .elx-dz-poz--zestaw { padding-left: 28px; }
/* wiadomość, zgody (zwinięte), punkty (tylko przy włączonym programie) */
html body .elx-dzieki .elx-dz-uwagi { padding: 12px 14px; border-left: 4px solid var(--d-l); border-radius: 6px; background: var(--d-t); }
html body .elx-dzieki .elx-dz-uwagi p { margin: 0 0 4px; font-weight: 700; }
html body .elx-dzieki .elx-dz-zgody { margin: 0 0 16px; color: var(--d-s); font-size: 13px; }
html body .elx-dzieki .elx-dz-zgody summary { cursor: pointer; color: var(--d-g); font-weight: 700; }
html body .elx-dzieki .elx-dz-zgody ul { margin: 8px 0 0; padding-left: 18px; }
html body .elx-dzieki .elx-dz-zgody li { margin: 0 0 4px; }
/* karta podsumowania (jak .elx-k-podsum) */
html body .elx-dzieki .elx-dz-podsum { padding: 20px; border: 1px solid var(--d-ln); border-radius: 10px; background: #fff; box-shadow: 0 2px 12px rgba(10, 37, 64, .07); }
html body .elx-dzieki .elx-dz-podsum dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
html body .elx-dzieki .elx-dz-podsum dt { margin: 0; color: var(--d-s); font-weight: 400; }
html body .elx-dzieki .elx-dz-podsum dt small { display: block; font-size: 12px; }
html body .elx-dzieki .elx-dz-podsum dd { margin: 0; color: var(--d-g); font-weight: 700; text-align: right; white-space: nowrap; }
html body .elx-dzieki .elx-dz-razem { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--d-ln); }
html body .elx-dzieki .elx-dz-razem span { font-size: 16px; font-weight: 700; }
html body .elx-dzieki .elx-dz-razem small { color: var(--d-s); font-size: 13px; font-weight: 400; }
html body .elx-dzieki .elx-dz-razem b { font-size: 26px; line-height: 1; white-space: nowrap; }
html body .elx-dzieki .elx-dz-btn { display: block; margin: 10px 0 0; padding: 12px 16px; border: 2px solid var(--d-g); border-radius: 8px; background: #fff; color: var(--d-g) !important; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none !important; }
html body .elx-dzieki .elx-dz-btn:hover { background: var(--d-g); color: #fff !important; }
html body .elx-dzieki .elx-dz-btn--glowny { margin-top: 16px; padding: 14px 16px; border-color: var(--d-l); background: var(--d-l); font-size: 18px; }
html body .elx-dzieki .elx-dz-btn--glowny:hover { border-color: var(--d-l2); background: var(--d-l2); color: var(--d-g) !important; }
/* bloki Comarchu w nowym układzie: błąd płatności online (z „Ponów płatność”), banery, propozycje */
html body .elx-dzieki .two-columns-thx-ui { float: none !important; width: auto !important; max-width: none !important; margin: 0 0 24px !important; padding: 0 !important; }
html body .elx-dzieki .online-payment-error-ui { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 4px 18px; padding: 16px 20px !important; border: 1px solid #f1c9c9; border-radius: 10px; background: #fff6f6; text-align: left !important; }
html body .elx-dzieki .online-payment-error-ui > * { min-width: 0; width: auto !important; max-width: 100% !important; }
html body .elx-dzieki .online-payment-error-ui > img { grid-row: 1 / span 3; width: 72px !important; height: auto !important; margin: 0 !important; }
html body .elx-dzieki .online-payment-error-ui .online-payment-error-bold-text-ui { margin: 0 !important; font-size: 18px; font-weight: 700; }
html body .elx-dzieki .online-payment-error-ui .online-payment-error-text-ui { margin: 0 !important; color: var(--d-s); }
html body .elx-dzieki .online-payment-error-ui .restore-payment-button-ui { width: auto !important; margin: 8px 0 0 !important; padding: 12px 22px !important; border: 0 !important; border-radius: 8px !important; background: var(--d-l) !important; color: var(--d-g) !important; font-size: 16px; font-weight: 700; }
html body .elx-dzieki .thxpage-slider-ui { margin: 32px 0 0; }
html body .elx-dzieki .cross-selling-ui { margin: 32px 0 0 !important; }
@media (max-width: 1023px) { /* tablet i telefon: jedna kolumna, podsumowanie zaraz pod nagłówkiem */
html body .elx-dzieki .elx-dz-siatka { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
html body .elx-dzieki .elx-dz-prawa { position: static; order: -1; }
}
@media (max-width: 599px) {
html body .elx-dzieki { padding: 16px 12px 40px; font-size: 14px; }
html body .elx-dzieki .elx-dz-glowa { gap: 12px; padding: 14px; }
html body .elx-dzieki .elx-dz-ikona { flex-basis: 36px; width: 36px; height: 36px; background-size: 20px 20px; }
html body .elx-dzieki .elx-dz-glowa h1 { margin-top: 2px; font-size: 21px; }
html body .elx-dzieki .elx-dz-podsum { padding: 16px; }
html body .elx-dzieki .elx-dz-razem b { font-size: 24px; }
html body .elx-dzieki .elx-dz-poz { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; }
html body .elx-dzieki .elx-dz-zdj { grid-row: 1 / span 2; width: 56px; height: 56px; }
html body .elx-dzieki .elx-dz-nazwa { grid-column: 2 / -1; }
html body .elx-dzieki .elx-dz-ilosc { grid-column: 2; }
html body .elx-dzieki .elx-dz-wartosc { grid-column: 3; }
html body .elx-dzieki .online-payment-error-ui { grid-template-columns: 48px minmax(0, 1fr); }
html body .elx-dzieki .online-payment-error-ui > img { width: 48px !important; }
}
/* koszyk (v11): krok 3 to „Potwierdzenie” (płatność wybiera się w kroku 1); po danych (zalogowany albo gość po „Zapisz dane”) kroki 1–2 mają ✓ jak w oknie gościa */
html body .elx-koszyk .elx-k-kroki .elx-k-byl b { border-color: var(--k-l); background: var(--k-l); color: var(--k-g); }
/* ikona „Ustawienia plików cookies” (Comarch: fixed, 50×50 px, 20 px od dołu, 20 px — na telefonie 10 px — od lewej) zasłaniała na dole strony początek stopki
(„Profil klienta”, „© … Hurtownia Elektryczna…”): stopka ma u dołu pas na ikonę (treść kończy się nad nią), a ikona — białą obwódkę, żeby była widoczna na granatowej stopce.
Telefon w koszyku: ikona nad stałym paskiem „Do zapłaty / Dalej” (tak jak przycisk „do góry” w 7-koszyk.css). Karta towaru ma już własną regułę (body.elmax-pasek-on). */
html body footer.main-footer-js > .footer-ui { padding-bottom: 86px !important; }
html body .cookie-message-opener-ui { box-shadow: 0 0 0 2px #fff, 2px 2px 8px rgba(0, 0, 0, .45); }
@media (max-width: 1279px) { /* poniżej 1280 px nad ikoną cookies stoi jeszcze przycisk „do góry” (80–124 px od dołu) */
html body footer.main-footer-js > .footer-ui { padding-bottom: 136px !important; }
}
@media (max-width: 767px) {
html body:has(.elx-koszyk .elx-k-dol) .cookie-message-opener-ui { bottom: 90px; }
}
/* ===== KONIEC ELMAX v11: strona podziękowania ===== */
/* ===== ELMAX v11: bez programu lojalnościowego, pola ilości ===== */
/* ===== KONIEC ELMAX v11: lojalność, pola ilości ===== */
/* ===== ELMAX 21.10: karta towaru na telefonie — kod nad nazwą, etykieta „brutto/netto” przy cenie ===== */
/* Uwagi właściciela 21.10 (telefon): kod towaru stał prawie na nazwie; przy cenach w tysiącach „brutto” wchodziło na kwotę.
Tylko < 1280 px (tam działa product-presentation-m.css); komputer bez zmian. */
@media screen and (max-width: 1279px) {
/* kod: szablon daje mu top 320 px (z rabatami 400/460/490), a nazwie top 335 px; przy line-height 24 px tekst kodu stał ok. 3 px nad nazwą.
Linia 13 px i 4 px w górę = 6 px wolnego pod kodem (pozycje z rabatami przesuwają się tak samo) */
html body .product-presentation-ui .gallery-container-ui .product-code-ui { line-height: 13px; margin-top: -4px; }
/* etykieta: szablon stawia ją absolutnie (bottom 21 px, right 133 px od prawej krawędzi bloku), więc przy dłuższej kwocie albo węższym ekranie
wchodziła na kwotę — teraz zwykły tekst za „zł” („2 829,00 zł brutto”), a gdy brak miejsca, przechodzi do następnej linii */
html body .product-presentation-ui .add-to-cart-border-container-ui .brutto-price-ui .brutto-netto-ui,
html body .product-presentation-ui .add-to-cart-border-container-ui .netto-price-ui .brutto-netto-ui { position: static; display: inline-block; margin-left: 4px; }
/* kwota brutto nie wychodzi z bloku na „netto” (szablon: sztywne 50%): blok ma co najmniej 50%, a szerszy jest tylko wtedy, gdy sama liczba
się nie mieści — wtedy „netto” schodzi pod niego */
html body .product-presentation-ui .add-to-cart-border-container-ui .brutto-price-ui { width: min-content; min-width: 50%; max-width: 100%; }
}
/* ===== KONIEC ELMAX 21.10: karta towaru na telefonie ===== */
/* Wyróżnienie filtrów (właściciel 21.10: „animacja, aby klikali w filtry”; potem „lepiej, jakby przycisk pulsował — daj kolorową poświatę”).
Komputer: przycisk „Wszystkie filtry” bez przerwy pulsuje limonkową poświatą i lekko się powiększa (bez strzałki obok; po najechaniu stoi);
pierwsza wartość „Szybkiego wyboru” kilka razy pulsuje obwódką. Telefon (bez „Wszystkie filtry” w pasku): strzałka w dół (rysunek SVG, równo na środku kółka) przy nazwie filtru.
Bez animacji przy „ogranicz ruch” w systemie. */
@keyframes elxSwPoswiata { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(165, 206, 57, .95), 0 0 10px 2px rgba(165, 206, 57, .5); }
50% { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(165, 206, 57, 0), 0 0 34px 10px rgba(165, 206, 57, .9); } }
@keyframes elxSwMrugDol { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .2; transform: translateY(4px); } }
@keyframes elxSwPuls { 0% { box-shadow: 0 0 0 0 rgba(10, 37, 64, .3); } 70% { box-shadow: 0 0 0 10px rgba(10, 37, 64, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 37, 64, 0); } }
html.elx-sw body .elx-sw-wszystkie { position: relative; overflow: visible; animation: elxSwPoswiata 1.3s ease-in-out infinite; }
html.elx-sw body .elx-sw-wszystkie:hover, html.elx-sw body .elx-sw-wszystkie:focus-visible { animation: none; }
html.elx-sw body .elx-sw-chipy > :first-child { animation: elxSwPuls 1.6s ease-out 1s 6; }
html.elx-sw.elx-sw-mob body .elx-sw-tyt b::after { content: ''; display: inline-block; width: 34px; height: 34px; margin-left: 12px; border-radius: 50%; vertical-align: middle;
background: var(--elx-granat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
animation: elxSwMrugDol 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
html.elx-sw body .elx-sw-wszystkie, html.elx-sw body .elx-sw-chipy > :first-child, html.elx-sw.elx-sw-mob body .elx-sw-tyt b::after { animation: none; }
}