@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Dosis:wght@200..800&display=swap');
* {
font-family: 'Dosis', sans-serif !important;
font-optical-sizing: auto;
font-style: normal;
}
html{
font-size: 120%;
}
@media (max-width:1660px)
{
.cart-row
{
padding: 5px;
}
.cart-row__value
{
width: 15%;
padding-right: 15px;
}
.cart-row__quantity
{
width: 16%;
}
.cart-row__currency {
width: 8%;
}
.cart-row__options {
width: 9%;
}
.cart-row__options-deleter {
margin-left: 15px;
}
}
.promoBanner2 {
margin: 30px auto;
transition: width 0.3s ease, margin 0.3s ease;
}
@media (min-width: 1440px) {
.promoBanner2 {
width: calc(100% - 260px);
margin-left: 130px;
margin-right: 130px;
}
.page-padding {
padding: 0 130px;
}
}
@media (min-width: 768px) and (max-width: 1439px) {
.promoBanner2 {
width: calc(100% - 64px);
margin-left: 32px;
margin-right: 32px;
}
}
@media (max-width: 767px) {
.promoBanner2 {
width: 98%;
margin-left: 1%;
margin-right: 1%;
max-height: none;
}
.promoBanner2__wrapper,
.promoBanner2__item {
max-height: none !important;
height: auto !important;
aspect-ratio: 1 / 1;
}
}
@media (min-width: 768px) {
.promoBanner2,
.promoBanner2__wrapper,
.promoBanner2__item {
aspect-ratio: 2300 / 600;
}
}
.promoBanner2__item {
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.promoBanner2__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
aspect-ratio: 2300 / 600;
grid-area: auto !important;
}
.promoBanner2__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 2300 / 600;
}
.promoBanner2__heading--position,
.promoBanner2__text--position,
.promoBanner2 .timer--position {
position: relative;
z-index: 1;
grid-area: auto !important;
text-align: center;
margin: 5px 0;
}
.promoBanner2__heading {
font-size: clamp(32px, 3vw, 56px);
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.9);
margin-bottom: 10px;
text-shadow: 0 2px 15px rgba(255,255,255,0.8);
position: relative;
}
.copy-tooltip {
position: fixed;
transform: translate(-50%, -100%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 6px 14px;
border-radius: 8px;
font-size: 14px;
white-space: nowrap;
z-index: 999999;
pointer-events: none;
animation: tooltip-fade-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
text-transform: none;
font-weight: 500;
text-shadow: none;
backdrop-filter: blur(5px);
}
.copy-tooltip.fade-out {
opacity: 0;
transition: opacity 0.3s ease;
}
@keyframes tooltip-fade-in {
from { opacity: 0; transform: translate(-50%, 10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.promoBanner2__text {
font-size: clamp(24px, 2.38vw, 40px);
font-weight: 600;
line-height: clamp(32px, 3.33vw, 48px);
text-align: center;
height: auto !important;
width: 100%;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: initial;
-webkit-box-orient: vertical;
word-break: break-word;
overflow: hidden;
text-shadow: 0 2px 15px rgba(255,255,255,0.8);
}
@media (min-width: 1024px) {
.header-nav__list li:first-child
{
margin-right: auto;
}
}
.header .header-nav__btn {
position: relative;
display: flex;
align-items: center;
padding: 12px 30px 10px;
font-weight: 600 !important;
line-height: 24px;
color: #000000;
white-space: nowrap;
cursor: pointer;
transition: all ease 300ms;
font-size: 120%;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(240, 189, 195, 0) !important;
background: rgba(240, 189, 195, 0);
border-radius: 100px;
margin: 1px;
}
.header .header-nav__btn:hover
{
text-shadow: 0 0 25px rgba(240, 189, 195, 1);
background: #ffffff;
}
.header .header-nav__btn::after
{
display: none !important;
}
.header__main
{
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
-moz-background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
-webkit-background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
-o-background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
-ms-background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}
.header .header-nav {
grid-column: 1 / 4;
grid-row: 2;
background-color: rgba(255, 255, 255, 0.6);
border: 0 !important;
padding: 0 110px;
}
.header {
background-color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.header.fixed {
background-color: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(20px) !important;
-moz-backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Płynne przejścia powrotne dla elementów nagłówka */
.header,
.header__main,
.header__logo,
.header__logo img,
.header-top-bar-js,
.header-top-bar-js *,
.header-nav-js,
.header-nav__btn,
.header__search,
.header__search-input,
.header__search-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@media (min-width: 768px) {
/* Wymuszenie widoczności paska top-bar i nawigacji przy przewijaniu (nadpisuje .hide() z JQuery) */
.header-top-bar-js {
display: flex !important;
}
.header-nav-js {
display: block !important;
}
/* --- ZMNIEJSZENIE ELEMENTÓW PRZY PRZEWIJANIU (.fixed) --- */
/* Pasek informacyjny (Top Bar) */
.header.fixed .header-top-bar-js {
padding-top: 3px !important;
padding-bottom: 3px !important;
min-height: auto !important;
font-size: 11px !important;
background-color: rgba(255, 255, 255, 0.9) !important;
border-bottom: 1px solid rgba(231, 231, 231, 0.4) !important;
}
.header.fixed .header-top-bar-js svg {
width: 13px !important;
height: 13px !important;
}
.header.fixed .header-top-bar-js .header-top-bar__side > * {
margin-right: 14px !important;
}
/* Główny kontener nagłówka */
.header.fixed .header__main {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.header.fixed .header__main:not(.closed) .header__logo {
padding-left: 90px !important; /* Zmniejszenie marginesu bocznego loga */
}
.header.fixed .header__main:not(.closed) .header-client-area {
padding-right: 90px !important; /* Zmniejszenie marginesu bocznego koszyka */
}
/* Skalowanie logo */
.header.fixed .header__logo img {
max-width: 120px !important;
}
/* Wyszukiwarka */
.header.fixed .header__search {
max-width: 320px !important;
}
.header.fixed .header__search-input {
padding-top: 5px !important;
padding-bottom: 5px !important;
font-size: 13px !important;
height: 32px !important;
}
.header.fixed .header__search-btn {
width: 32px !important;
height: 32px !important;
}
.header.fixed .header__search-btn svg {
width: 15px !important;
height: 15px !important;
}
/* Menu nawigacji */
.header.fixed .header-nav-js {
margin-top: 3px !important;
padding: 0 90px !important;
}
.header.fixed .header-nav__btn {
padding: 6px 20px 4px !important;
font-size: 13px !important;
line-height: 20px !important;
}
.header.fixed .header-nav__btn::after,
.header.fixed .header-nav__btn::before {
height: 14px !important;
}
}
.header__sidebar-header
{
display: none !important;
}
.header__cb_bubbletea-logo
{
display: flex;
justify-content: center;
align-items: center;
padding: 20px 10px;
}
.header__cb_bubbletea-logo img
{
max-width: 100%;
height: auto;
}
.header-categories__link {
display: block;
font-size: 18px;
font-weight: 500;
line-height: 28px;
text-align: left;
color: rgba(45, 45, 45, 1.00);
padding: 10px 24px;
width: 95%;
border-radius: 0 8px 8px 0;
transition: all .3s;
}
.header-categories__link:hover
{
}
.header-categories__item:hover {
background-color:  #ffffff !important;
}
.header-categories__link:hover {
background: rgb(87, 164, 150);
margin-right: 3px;
color: #000000;
width: 100%;
}
.header-categories__arrow {
background: #f8f9fa;
padding: 13px 24px;
transition: all .3s;
border-radius: 8px 0 0 8px;
}
.header-categories__arrow:hover {
background: rgb(87, 164, 150);
padding: 13px 14px 13px 34px;
}
.header-categories__arrow svg, .header-categories__arrow svg:hover
{
fill: #000000;
}
.header-categories__item.title
{
text-transform: uppercase;
}
.header__search-input
{
background: #ffffff;
border-radius: 8px 0 0 8px;
border: 1px solid #ffffff;
}
.header__search {
background: #fff;
border-radius: 8px;
}
.mainBanner[data-name="mainBanner3"] {
width: 100%;
margin: 0 auto;
transition: width 0.3s ease;
}
@media (min-width: 1440px) {
.mainBanner[data-name="mainBanner3"] {
width: 100%; /* 130px margin on left and right */
padding: 0 130px;
}
}
@media (max-width: 767px) {
.mainBanner {
padding: 0 1%;
}
}
.mainBanner__slide-container-box
{
border-radius: 20px;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);
justify-content: center;
height: fit-content;
width: fit-content;
max-width: 45%;
padding: 32px;
}
.mainBanner__slide-container-box h1 {
font-weight: 700;
font-size: 3.5vw;
line-height: 3.6vw;
-webkit-line-clamp: none;
color: rgba(0, 0, 0, 0.9);
overflow: visible;
}
.mainBanner__slide-container-box h3 {
text-transform: uppercase;
font-weight: 400;
color: rgba(0, 0, 0, 0.7);
font-size: 1.3vw;
line-height: 1.45vw;
-webkit-line-clamp: none !important;
overflow: visible;
}
.mainBanner__slide-container-box .primary-action-button
{
background: #ffffff;
color: rgba(0,0,0,0.7);
text-transform: uppercase;
}
.mainBanner__slide-container-box .primary-action-button:hover
{
background:rgba(240,189,195,1.00);
color: rgba(255,255,255,1);
}
.swiper-wrapper.mainBanner__wrapper {
aspect-ratio: 1574 / 660;
height: auto !important;
}
.swiper-wrapper.mainBanner__wrapper .mainBanner__slide {
height: 100%;
}
.swiper-wrapper.mainBanner__wrapper .mainBanner__slide picture {
display: block;
width: 100%;
height: 100%;
}
.swiper-wrapper.mainBanner__wrapper .mainBanner__slide picture img,
.swiper-wrapper.mainBanner__wrapper .mainBanner__slide .placeholder__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease-in-out;
}
.arrow {
display: flex;
width: 48px;
height: 48px;
max-width: 48px;
max-height: 48px;
box-sizing: border-box;
aspect-ratio: 1 / 1;
background: rgba(247,247,247,1);
border-radius: 50%;
backdrop-filter: blur(5px);
flex-wrap: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
border: none;
box-shadow: none !important;
border: 1px solid rgba(247, 247, 247, 1);
}
.arrow .arrow__icon
{
fill: rgba(0,0,0,0.4) !important;
}
.mainBanner__next {
right: calc(130px);
border-radius: 50% 0 0 50%;
background: linear-gradient(-90deg, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.4)) !important;
transition: all ease-in 0.3s;
}
.mainBanner__next:hover {
background: linear-gradient(-90deg, rgba(247, 247, 247, 1), rgba(236, 190, 191, 0.5)) !important;
transition: all ease-in 0.3s;
}
.mainBanner__prev {
left: calc(130px);
border-radius: 0 50% 50% 0;
background: linear-gradient(90deg, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.4)) !important;
transition: all ease-in 0.3s;
}
.mainBanner__prev:hover {
background: linear-gradient(90deg, rgba(247, 247, 247, 1), rgba(236, 190, 191, 0.5)) !important;
transition: all ease-in 0.3s;
}
.mainBanner__prev, .mainBanner__next {
position: absolute;
z-index: 90;
top: calc(50% - 24px);
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction
{
bottom: var(--swiper-pagination-bottom, 0px);
top: var(--swiper-pagination-top, auto);
left: 50%;
transform: translate(-50%, 0);
width: max-content;
padding: 1% 0.7% 0.7%;
background: linear-gradient(0, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.4));
border-radius: 10px 10px 0 0;
position: absolute;
backdrop-filter: blur(5px);
border: 1px solid rgb(247, 247, 247);
}
.mainBanner .swiper-pagination-bullet
{
background-color: rgb(255,255,255,0.6);
transition: all 0.3s ease-in;
}
.mainBanner .swiper-pagination-bullet-active
{
background-color: rgba(240,189,195,1.00);
width: 42px;
}
.card-product {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #fff;
border-radius: 15px;
padding: 10px;
box-shadow: 0 5px 0px rgba(0, 0, 0, 0);
height: max-content;
transition: all .3s ease;
}
.card-product:hover
{
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
background-color: rgba(255, 255, 255, 1);
}
.card-product:active
{
background:rgba(255, 255, 255, 1);
box-shadow: 0 5px 65px rgba(0, 0, 0, 0.07);
transform: scale(0.9);
z-index: 5;
}
.card-product__image img {
max-width: 100%;
max-height: 100%;
border-radius: 15px;
}
@media (min-width:1400px)
{
.rec-categories-mp-1 .card-product
{
height:491px;
}
}
.newsSection__container::after {
background: linear-gradient(270deg, rgba(247, 247, 247, 1) 0%, rgba(247, 247, 247, 0) 100%);
visibility: visible !important;
top: 0;
height: 100% !important;
}
.newsSection__container::before {
background: linear-gradient(90deg, rgba(247, 247, 247, 1) 0%, rgba(247, 247, 247, 0) 100%);
visibility: visible !important;
top: 0;
height: 100% !important;
}
.newsSection__arrows {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
width: 82%;
height: 90%;
aspect-ratio: unset;
}
.newsSection__arrows-next
{
border-radius: 50%;
background: linear-gradient(-90deg, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.4)) !important;
transition: all ease-in 0.3s;
}
.newsSection__arrows-next:hover
{
background: linear-gradient(-90deg, rgba(247, 247, 247, 0.7), rgba(236, 190, 191, 0.6)) !important;
transform: translateX(5px);
}
.newsSection__arrows-prev
{
border-radius: 50%;
background: linear-gradient(90deg, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.4)) !important;
transition: all ease-in 0.3s;
}
.newsSection__arrows-prev:hover
{
background: linear-gradient(90deg, rgba(247, 247, 247, 0.7), rgba(236, 190, 191, 0.6)) !important;
transform: translateX(-5px);
}
.products-list__grid-view-product {
background:rgba(255, 255, 255, 0.7);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 1);
box-shadow: 0 5px 0px rgba(0, 0, 0, 0);
transition: all ease-out 0.3s;
}
.products-list__grid-view-product:hover
{
background:rgba(255, 255, 255, 1);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
}
.products-list__grid-view-product:active
{
background:rgba(255, 255, 255, 1);
box-shadow: 0 5px 65px rgba(0, 0, 0, 0.07);
transform: scale(0.9);
z-index: 5;
}
.products-list__list-view-product--product-container-link {
background: none !important;
}
.products-list__grid-view-product .image-container img {
border-radius: 15px;
}
.product-list {
position: relative;
margin-top: 25px;
}
@media (min-width: 1440px) {
.product-presentation {
margin: 30px 130px;
}
.nav-attached-js .nav {
margin: 0 48px 0 0;
}
.nav-attached-js {
padding: 0 130px;
}
}
.product-presentation__top-section {
background: rgba(255, 255, 255, 0.7);
padding: 15px;
border-radius: 15px;
border:1px solid #fff;
}
.product-navigation .nav__wrapper::before
{
display: none !important;
}
.product-navigation .nav__wrapper {
background: rgba(255, 255, 255, 0.5);
font-weight: 600;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.6);
transition: all ease-out 0.3s;
}
.product-navigation .nav__wrapper:hover, .product-navigation .nav .nav-item-active  {
background: rgba(255, 255, 255, 1);
color: rgb(0, 0, 0);
}
.product-navigation .nav__wrapper:first-child {
border-radius: 15px 0 0 0;
}
.product-navigation .nav__wrapper:last-child {
border-radius: 0 15px 0 0;
}
.product-navigation .nav__wrapper span
{
font-weight: 600;
max-width:210px;
width: max-content !important;
}
.product-attributes, .gpsr {
background: #fff;
padding: 15px;
border-radius: 0 20px 20px 20px;
border: none !important;
}
.product-description {
padding: 25px 15px;
border-top: none !important;
margin-top: 32px;
background: #fff;
border-radius: 20px;
}
.downloads {
padding: 15px;
border-top: none !important;
margin-top: 32px;
background: #fff;
border-radius: 20px;
}
.related-container {
display: flex;
flex-direction: column;
overflow: hidden;
row-gap: 32px;
border-top: none !important;
padding: 32px 0;
}
.related-container .related-details .related__wrapper {
border-radius: 15px;
background: transparent !important;
}
.related-container .related-details .related__wrapper .related-product {
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 15px;
border: 1px solid #fff;
}
/* Wymuszenie grida na liście języków / walut z 3 kolumnami */
.header__dropdown-list.header-top-bar__currency-list {
max-height: none !important;
overflow: visible !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 12px !important;
width: max-content;
}
/* Ułatwienie klikania palcem na urządzeniach mobilnych */
.header__dropdown-list.header-top-bar__currency-list .header__dropdown-item {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 8px 12px;
margin: 0;
border-radius: 8px;
width: 100%;
}
.bannerPromo__products .card-product {
height: 100%;
justify-content: flex-start;
}
.bannerPromo__products .card-product__buttons {
display: flex;
}
/* Banner Image More */
.container-ban.related-details {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.container-ban-div {
width: 100%;
}
.container-ban-div a.item,
.container-ban-div > img {
display: block;
text-decoration: none;
color: inherit;
}
.container-ban-div img {
border-radius: 15px;
transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
width: 100%;
}
.container-ban-div a.item:hover img,
.container-ban-div > img:hover {
filter: brightness(110%);
box-shadow: 0 5px 30px rgba(0,0,0,0.1);
}
@media (min-width: 769px) {
.container-ban.related-details {
flex-wrap: nowrap;
}
.container-ban-div {
width: auto;
flex: 1;
min-width: 0;
}
}
#cb-cross
{
margin-bottom: 35px;
}
.categories-map .category {
background: rgba(255, 255, 255, 0.75);
border-radius: 20px;
border: 1px solid #fff;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
transition: all ease-in 0.3s;
}
.categories-map .category:hover
{
background: rgba(255, 255, 255, 1);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
}
.categories-map .category:active
{
background: rgba(255, 255, 255, 1);
box-shadow: 0 5px 65px rgba(0, 0, 0, 0.1) !important;
transform: scale(0.9);
z-index: 5;
}
.categories-map .category__image img
{
border-radius: 10px;
}
.categories-map .category__name
{
text-transform: uppercase;
font-weight: 600;
}
/* All categories banner */
.allcategories {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 2000 / 460;
margin-bottom: 20px;
}
.allcategories a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.allcategories__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.allcategories__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.allcategories a:hover .allcategories__image img {
transform: scale(1.03);
}
.allcategories__name {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.1);
transition: background 0.3s ease;
}
.allcategories a:hover .allcategories__name {
background: rgba(0, 0, 0, 0.25);
}
.allcategories__name h2 {
color: #ffffff;
font-size: clamp(28px, 4vw, 54px);
font-weight: 700;
text-transform: uppercase;
margin: 0 0 25px 0;
text-shadow: 0 4px 15px rgba(0,0,0,0.4);
text-align: center;
transition: transform 0.3s ease;
}
.allcategories a:hover .allcategories__name h2 {
transform: translateY(-5px);
}
.allcategories__name span {
background: #000000;
color: #ffffff;
padding: 12px 35px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.allcategories a:hover .allcategories__name span {
background: #2d2d2d;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.categories-map .category {
padding: 15px !important;
}
.categories-map__categories {
column-gap: 1% !important;
row-gap: 1% !important;
}
@media (max-width: 767px)
{
.swiper-wrapper.mainBanner__wrapper
{
aspect-ratio: 1/0.9 !important;
}
.mainBanner__slide
{
flex-direction: column !important;
}
.swiper-wrapper.mainBanner__wrapper .mainBanner__slide picture {
display: block;
width: calc(100% - 1px);
height: auto;
max-height: none;
left: 1px;
position: relative;
border-radius: 15px 15px 0 0;
overflow: clip;
}
.swiper-wrapper.mainBanner__wrapper .mainBanner__slide picture img, .swiper-wrapper.mainBanner__wrapper .mainBanner__slide .placeholder__image {
min-width: 150%;
height: auto;
object-fit: cover;
object-position: bottom right;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease-in-out;
aspect-ratio: unset;
right: 50%;
position: relative;
border-radius: 0;
margin-bottom: -8px;
border: none !important;
overflow: clip;
}
.mainBanner__slide-container-box {
padding: 15px 15px 8%;
height: 100%;
border-radius: 15px;
width: 100% !important;
max-width: none;
border: none !important;
border-radius: 0 0 15px 15px !important;
justify-content: start;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}
.mainBanner__slide-container {
display: flex;
flex-direction: column;
justify-content: center;
align-content: flex-start;
border: none !important;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction
{
bottom: 11px;
top: auto;
left: 50%;
transform: translate(-50%, 0);
width: max-content;
padding: 1% 0.7% 0.7%;
background: linear-gradient(0, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.4));
border-radius: 10px 10px 0 0;
position: absolute;
backdrop-filter: blur(5px);
border: 1px solid rgb(247, 247, 247);
}
.swiper-button-pause {
background: transparent;
fill: rgba(87, 164, 150, 1.00);
cursor: pointer;
bottom: 0px;
right: 10px;
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 4px;
position: absolute;
border-radius: 4px;
z-index: 40;
box-shadow: none !important;
}
.bannerPromo {
margin-top: 15px;
padding: 0 5% !important;
}
.categories-map .category {
width: 49%;
padding: 15px;
margin-bottom: 1%;
}
.mainBanner__slide-container-box h1 {
font-size: 4vw;
line-height: 4.5vw;
margin: 0 !important;
padding: 0 !important;
margin-bottom: 1vh !important;
-webkit-line-clamp: none;
overflow: visible;
}
.mainBanner__slide-container-box h3 {
font-size: 3vw;
line-height: 3.5vw;
margin: 0 !important;
padding: 0 !important;
-webkit-line-clamp: none;
overflow: visible;
}
.promoBanner2__item {
gap: 10px;
}
.promoBanner2__heading {
font-size: 9vw;
font-weight: 700;
line-height: 9vw;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.9);
margin-bottom: 30px;
text-shadow: 0 2px 15px rgba(255, 255, 255, 0.8);
position: relative;
background: rgba(255, 255, 255, 0.75);
padding: 15px;
border-radius: 15px;
backdrop-filter: blur(2px);
margin-top: 10px;
margin-left: 15px;
align-self: flex-start;
}
.promoBanner2__text {
font-size: 6vw;
font-weight: 600;
line-height: 7vw;
text-align: center;
height: auto !important;
width: 100%;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: initial;
-webkit-box-orient: vertical;
word-break: break-word;
overflow: visible;
text-shadow: 0 2px 35px rgba(0, 0, 0, 0.7);
}
.promoBanner2 .timer .countdown__time-unit {
color: rgba(255, 255, 255, 1.00);
backdrop-filter: blur(5px);
}
.promoBanner2 .timer .countdown__separator
{
color: rgba(255, 255, 255, 1.00);
backdrop-filter: blur(5px);
}
.allcategories
{
aspect-ratio: 600 / 460;
}
.skiptranslate
{
display: none !important;
}
body
{
top:0 !important
}
}
button[aria-label="AddToWishList"]
{
display: none !important;
}
@media (min-width: 767px) and (max-width: 1200px)
{
.bannerPromo
{
padding: 32px 56px 32px 32px;
}
.categories-map .category {
width: calc((100% / 4) - 1%);
padding: 15px;
margin-bottom: 1%;
}
.mainBanner__slide-container-box h1
{
font-weight: 700;
font-size: 2.2rem;
line-height: 2.4rem;
-webkit-line-clamp: none;
color: rgba(0, 0, 0, 0.9);
overflow: visible;
}
.mainBanner__slide-container-box h3
{
font-weight: 400;
font-size: 1.15rem;
line-height: 1.3rem;
-webkit-line-clamp: none;
color: rgba(0, 0, 0, 0.75);
}
}
@media (max-width: 1200px)
{
.bannerPromo {
padding: 30px 32px 0;
flex-direction: column;
}
.bannerPromo__wrapper {
max-width: 100% !important;
height: 100%;
}
}
@media (min-width: 1200px)
{
.categories-map .category {
width: calc((100% / 5) - 1%);
padding: 15px;
margin-bottom: 1%;
}
}
.bannerPromo__image img
{
max-width: 100% !important;
}
.categories__title
{
font-weight: 700;
text-transform: uppercase;
font-size: 24px;
}
.categories__current .name
{
font-size: 21px;
text-transform: uppercase;
}
.breadcrumbs li
{
font-size: 16px;
}
.products-list__grid-view-product .content-container__code
{
font-size: 14px;
}
.products-list__grid-view-product .buttons .primary-action-button__text
{
font-size: 16px;
}
.products-list__grid-view-product .content-container__name
{
font-size: 18px;
}
.categories__parent a
{
font-size: 18px;
}
.categories__undercategories a .name
{
font-size: 18px;
}
.products-list__list-view-product .quantity-container__availability-container, .product-presentation__top-section .main-content-container .prices-container__availability-container
{
font-size: 14px;
}
.products-list__list-view-product
{
background: rgba(255, 255, 255, 0.75);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 1);
margin-bottom: 15px;
}
.products-list__quick-shopping-view-product {
border: 1px solid #ffffff;
border-radius: 15px;
background: rgba(255, 255, 255, 0.75);
margin-bottom: 10px;
transition: all 0.3s ease-out;
}
.products-list__quick-shopping-view-product:hover {
border-radius: 15px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .07);
transform: scale(1.01);
}
.products-list__list-view-product a, .products-list__quick-shopping-view-product a
{
font-size: 18px;
}
.products-list__grid-view-product .content-container__price-container .price, .products-list__grid-view-product .content-container__deposit-price-container .price {
font-size: 18px;
line-height: 20px;
font-weight: 600;
}
.products-list__list-view-product:hover {
border-radius: 15px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .07);
}
.footer__section-social
{
margin-bottom: 15px;
}
.wishlist
{
display: none !important;
}
.notice-container__btn.secondary-action-button {
padding: 8px 10px;
}
.news {
padding-top: 25px;
padding-bottom: 25px;
}
.news__slide .blog-item {
background: rgba(255, 255, 255, 0.75);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
.blog-item__img
{
width: 100%;
aspect-ratio: unset !important;
max-height: 365px;
}
.blog-item__title {
margin-left:5px;
margin-right:5px;
}
.blog-item__content
{
margin-left:5px;
margin-right:5px;
}
.blog-item__read
{
margin-left:5px;
margin-right:5px;
margin-bottom: 15px;
}
.blog-item__read-bottom-button a {
display: flex;
align-items: center;
background: rgba(87, 164, 150, 1.00);
padding: 8px 10px;
border-radius: 8px;
color: #fff;
margin-top: 5px;
}
.blog-item__read-bottom-button a svg
{
fill: #fff !important;
}
.news__slide .blog-item__read-bottom-button
{
margin-bottom: -10px;
margin-right: 10px;
}
.blog-post__article {
display: flex;
flex-direction: column;
width: 76%;
gap: 16px;
padding: 25px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 1);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
}
.blog-item
{
background: rgba(255, 255, 255, 0.75);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
transition: all ease-out 0.3s;
}
.blog-container__list
{
margin-bottom: 25px;
}
.blog-item:hover
{
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
}
.blog-item__content
{
width: auto;
}
.blog-item__read-bottom-button a
{ margin-right: 5px;}
.sidebar__next-article, .sidebar__latests-posts {
border: 1px solid rgba(255, 255, 255, 1.00);
background: rgba(255, 255, 255, 0.7);
border-radius: 10px;
}
.sidebar__latests-posts .blog-item__title {
margin: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: unset;
line-clamp: unset;
-webkit-box-orient: vertical;
white-space: unset;
font-family: Inter;
font-size: 18px;
font-weight: 500;
line-height: 20px;
text-align: left;
margin-top: 15px;
}
.footer__section-link, .footer__section-link a, .footer__section-info a {
font-size:16px;
}
.infographicBanner__slide-container-text p
{
font-size:16px;
}
.infographicBanner__slide-container-text h3
{
font-size:18px;
}
.newsletter__container-form-buttons div label span
{
font-size:15px;
}
.newsletter__container-content-icons div span
{
font-size:18px;
}
.newsletter__container-title div p
{
font-size:20px;
}
.newsletter__container-title div h3
{
font-size:22px;
}
h3
{
font-size:22px;
}
.card-product__name {
height: 44px;
font-size: 19px;
line-height: 22px;
}
.card-product__price-current
{
font-size:18px;
}
.card-product__price-current .currency
{
padding-left:3px;
}
.product-presentation__top-section .product-name-container__product-name
{
font-size:24px;
line-height:30px;
}
.product-attributes .attributes-column>li, .gpsr .attributes-column>li, .product-presentation__top-section .main-content-container__attributes .attribute
{
font-size:17px;
}
.header__logo img {
max-width: 190px;
}
.header__search-input {
font-size: 16px;
}
.header .header-client-area__btn-text {
font-size:13px;
}
.multi-image .swiper-slide img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
box-sizing: border-box;
border-radius: 4px;
object-position: center center;
object-fit: cover;
}
.single-image.zoomed-js .single-image__prev
{
left: 10px;
}
.single-image.zoomed-js .single-image__next
{
right: 10px;
}
.single-image .close-popup {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
z-index: 2;
padding: 10px;
background: rgba(87, 164, 150, 1.00);
border-radius: 50%;
}
.single-image .close-popup:hover {
background: rgba(240,189,195,1.00);
}
.single-image .close-popup svg
{
fill:#fff;
}
.single-image .close-popup:hover svg
{
fill:#000;
}
.single-image .swiper-slide img {
border-radius: 8px;
box-shadow:0 5px 5px rgba(0,0,0,0);
border: 2px solid rgba(240, 189, 195, 0);
transition:all ease-out 0.3s;
}
.single-image .swiper-slide:hover img {
border-radius: 8px;
box-shadow:0 10px 45px rgba(0,0,0,0.07);
border: 2px solid rgba(240, 189, 195, 1);
}
.multi-image .swiper-slide-thumb-active, .multi-image .swiper-slide:hover
{
border: 1px solid rgba(240, 189, 195, 1);
opacity:1;
-webit-opacity:1;
border-radius: 4px;
}
.multi-image .swiper-slide
{
border: 1px solid rgba(240, 189, 195, 0);
opacity:0.85;
-webit-opacity:0.85;
border-radius: 4px;
transition:all ease-out 0.3s;
}
.single-image__swiper:focus-within {
outline-style: none !important;
}
.characters-counter-js, .scrollable
{
background: transparent !important;
}
.contact-container__form
{
background: rgba(255, 255, 255, 0.75);
border-radius: 15px;
border: 1px solid #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.checkBoxes__container input+label:before {
content: "";
display: inline-block;
min-width: 16px;
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid rgba(223, 223, 223, 1.00);
transform: translateY(0.25em);
background-color: rgba(247, 247, 247, 1);
box-sizing: border-box;
transition: all 200ms ease;
}
.checkBoxes__container label:hover::before {
border: solid 1px rgba(87, 164, 150, 1);
}
.form__input-info
{
background: #fff !important;
border-radius: 3px;
}
.contact-container .contact-info {
background: rgba(255, 255, 255, 0.75);
padding: 15px;
border-radius: 15px;
border: 1px solid #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
/* Seller Info Section Styles */
.main-content-container__sellerInfo {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
margin: 0 0 15px;
padding: 10px;
border: 1px solid rgb(87, 164, 150);
border-radius: 15px;
}
.main-content-container__sellerInfo__title {
white-space: normal;
text-align: left;
color: #2e2e2e;
margin-bottom: 8px;
font-size: 18px;
line-height: 24px;
}
.main-content-container__sellerInfo__title span {
display: block;
}
.main-content-container__sellerInfo__profiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
}
.main-content-container__sellerInfo__profile {
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px;
padding: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
width: 100%;
}
.main-content-container__sellerInfo__profile:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
background: rgba(247, 247, 247, 0.95);
}
.main-content-container__sellerInfo__profile img {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.main-content-container__sellerInfo__profile:hover img {
transform: scale(1.08);
}
.main-content-container__sellerInfo__profile .profile-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.main-content-container__sellerInfo__profile strong.profile-name {
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
white-space: normal;
word-break: keep-all;
line-height: 1.2;
}
/* Hide contacts in list view */
.main-content-container__sellerInfo__profile .profile-phone,
.main-content-container__sellerInfo__profile .profile-mail {
display: none;
}
/* Modal Styles */
.seller-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.seller-modal.active {
display: flex;
opacity: 1;
}
.seller-modal__content {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-radius: 30px;
padding: 40px;
width: 90%;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
position: relative;
transform: scale(0.8);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.seller-modal.active .seller-modal__content {
transform: scale(1);
}
.seller-modal__close {
position: absolute;
top: 20px;
right: 20px;
font-size: 28px;
cursor: pointer;
color: #888;
line-height: 1;
transition: color 0.2s;
}
.seller-modal__close:hover {
color: #000;
}
.seller-modal__img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 3px solid #fff;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.seller-modal__name {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 20px;
color: #1a1a1a;
}
.seller-modal__info {
display: flex;
flex-direction: column;
gap: 12px;
}
.seller-modal__link {
text-decoration: none;
color: #333;
font-weight: 600;
padding: 12px;
background: rgba(0,0,0,0.03);
border-radius: 12px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.seller-modal__link:hover {
background: rgba(255,255,255,0.8);
transform: translateY(-2px);
}
.seller-modal__hours {
font-size: 0.85rem;
color: #666;
background: rgba(0,0,0,0.04);
padding: 15px;
border-radius: 12px;
margin-top: 15px;
line-height: 1.4;
}
.seller-modal__hours strong {
display: block;
color: #333;
margin-bottom: 4px;
}
/* Responsiveness adjustments */
@media screen and (max-width: 1520px) {
.main-content-container__sellerInfo__profiles {
grid-template-columns: 1fr;
}
.main-content-container__sellerInfo__profile {
flex-direction: row;
text-align: left;
align-items: center;
gap: 15px;
max-width: 100%;
padding: 12px 15px;
}
.main-content-container__sellerInfo__profile .profile-details {
align-items: flex-start;
}
.main-content-container__sellerInfo__profile strong.profile-name {
max-width: none;
font-size: 14px;
}
}
@media screen and (max-width: 1200px) {
.main-content-container__sellerInfo__profile img {
width: 50px;
height: 50px;
}
}
@media screen and (max-width: 767px) {
.main-content-container__sellerInfo__profile {
padding: 10px;
gap: 10px;
}
}
@media (min-width: 768px) and (max-width: 1300px) {
.product-presentation__top-section .main-content-container.simple-product {
flex-direction: column !important;
}
.main-content-container__sellerInfo__profiles {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}
@media (max-width: 630px) {
.product-presentation__top-section .main-content-container.simple-product {
flex-direction: column !important;
}
.main-content-container__sellerInfo__profiles {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}
.bannerPromo .bannerPromo__texts .primary-action-button
{
background: rgba(240, 189, 195, 1);
}
.bannerPromo .bannerPromo__texts .primary-action-button:hover
{
background: rgba(87, 164, 150, 1) !important;
}
.main-content-container__prices-and-more-container
{
min-width: 210px;
padding: 15px;
background: rgba(255, 255, 255, 1);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.cb-pcs-container
{
font-size: 14px;
line-height: 18px;
padding: 5px;
margin: 3px 0 15px;
background: rgba(0, 0, 0, 0.02);
border-radius: 5px;
}
.product-presentation__top-section .main-content-container .buttons-container__buttons .primary-action-button
{
height: 50px;
padding: 10px 15px;
}
.product-presentation__top-section .main-content-container .buttons-container__buttons .primary-action-button__text {
font-weight: 900;
line-height: 20px;
text-transform: uppercase;
}
.product-presentation__top-section .main-content-container.simple-product .main-content-container__attributes
{
padding: 10px 15px;
}
.product-presentation__top-section .main-content-container.simple-product .main-content-container__attributes .attribute {
width: 100%;
padding: 6px 10px;
margin: 1px 0;
background: rgba(247, 247, 247, 1);
border-radius: 5px;
}
.product-presentation__top-section .main-content-container.simple-product .main-content-container__attributes .attribute:nth-child(2n+1)
{
background: rgba(255, 255, 255, 1);
}
.go-to-top-button
{
display: none !important;
}
.cookie-message-opener
{
width: 40px;
height: 40px;
box-shadow: 5px -5px 25px rgba(0, 0, 0, 0.2);
}
.product-presentation__top-section .product-name-container__buttons-container .buttons .pure-button__icon {
width: 20px;
height: 20px;
padding:0 !important;
border:none !important;
}
.nav-attached-js .nav {
margin: 0 !important;
}
.product-presentation__top-section .product-name-container__buttons-container .buttons .pure-button__text {
font-weight: 600;
font-size: 14px;
line-height: 20px;
}
.product-presentation__top-section .main-content-container .prices-container__price-container .price {
font-size: 21px;
font-weight: 900;
line-height: 26px;
}
.product-presentation__top-section .main-content-container .prices-container__price-container .label {
font-size: 16px;
line-height: 26px;
margin-bottom: unset;
}
/* Support Widget */
.support-widget {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 900;
display: flex;
flex-direction: column;
align-items: center;
}
.support-trigger {
width: 60px;
height: 60px;
background: #f0bdc3;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(240, 189, 195, 0.4);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
border: none;
outline: none;
}
.support-trigger:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 30px rgba(240, 189, 195, 0.6);
}
.support-trigger-icon,
.support-trigger-close {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.support-trigger-close {
opacity: 0;
transform: scale(0.5) rotate(-90deg);
}
.support-trigger.active {
background: #ffffff;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.support-trigger.active .support-trigger-icon {
opacity: 0;
transform: scale(0.5) rotate(90deg);
}
.support-trigger.active .support-trigger-close {
opacity: 1;
transform: scale(1) rotate(0);
}
.support-trigger.active svg path {
fill: #f0bdc3;
}
.support-bubbles {
position: absolute;
bottom: 80px;
right: 0;
display: flex;
flex-direction: column;
gap: 15px;
pointer-events: none;
align-items: flex-end;
}
.support-bubbles.active {
pointer-events: auto;
}
.support-bubble {
opacity: 0;
transform: translateY(20px) scale(0.5);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.support-bubbles.active .support-bubble {
opacity: 1;
transform: translateY(0) scale(1);
}
.support-bubbles.active .support-bubble:nth-child(1) { transition-delay: 0.1s; }
.support-bubbles.active .support-bubble:nth-child(2) { transition-delay: 0.2s; }
.support-bubble-inner {
position: relative;
width: 55px;
height: 55px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border: 3px solid #f0bdc3;
cursor: pointer;
transition: transform 0.3s ease;
}
.support-bubble-inner:hover {
transform: scale(1.1);
}
.support-bubble-inner img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.support-bubble-label {
position: absolute;
right: 45px;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
padding: 6px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
opacity: 1;
transition: all 0.3s ease;
color: #333;
border: 1px solid #f0bdc3;
}
/* Global Seller Modal - Glassmorphism */
.seller-modal-global {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
z-index: 11000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.seller-modal-global.active {
opacity: 1;
visibility: visible;
}
.seller-modal-global__content {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(35px);
border: 1px solid rgba(255, 255, 255, 1);
padding: 40px;
border-radius: 30px;
width: 90%;
max-width: 450px;
position: relative;
text-align: center;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
transform: scale(0.8) translateY(20px);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.seller-modal-global.active .seller-modal-global__content {
transform: scale(1) translateY(0);
}
.seller-modal-global__close {
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
width: 30px;
cursor: pointer;
color: #666;
transition: color 0.3s;
height: 30px;
line-height: 24px;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
padding: 0;
}
.seller-modal-global__close:hover {
color: #f0bdc3;
}
.seller-modal-global__img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
border: 4px solid #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.seller-modal-global__name {
font-size: 28px;
font-weight: 800;
margin-bottom: 25px;
color: #333;
}
.seller-modal-global__info {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
}
.seller-modal-global__link {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
background: #fff;
border-radius: 15px;
text-decoration: none !important;
color: #333 !important;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.seller-modal-global__link:hover {
background: #f0bdc3;
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(240, 189, 195, 0.3);
}
.seller-modal-global__link svg {
flex-shrink: 0;
}
.seller-modal-global__link:hover svg {
fill: rgba(255, 255, 255, 1.00);
}
.seller-modal-global__hours {
padding-top: 20px;
border-top: 1px solid rgba(0,0,0,0.05);
font-size: 15px;
color: #666;
line-height: 1.6;
}
.seller-modal-global__hours strong {
display: block;
color: #333;
margin-bottom: 5px;
}
@media (max-width: 767px) {
.support-widget {
bottom: 75px;
right: 20px;
transform: scale(0.85) translate(15px, 5px);
}
.support-trigger {
width: 50px;
height: 50px;
}
.support-trigger svg {
width: 24px;
height: 24px;
}
.support-bubble-inner {
width: 45px;
height: 45px;
}
.support-bubble-label {
font-size: 12px;
padding: 4px 10px;
}
.seller-modal-global__content {
padding: 30px 20px;
}
}
/* Support Message Above Trigger */
.support-message {
position: absolute;
bottom: 80px;
right: 0;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 2px solid #f0bdc3;
padding: 12px 20px;
border-radius: 20px 20px 0 20px;
font-size: 15px;
font-weight: 700;
color: #333;
white-space: nowrap;
box-shadow: 0 10px 25px rgba(240, 189, 195, 0.3);
z-index: 10001;
pointer-events: auto;
cursor: pointer;
transform-origin: bottom right;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.support-message::after {
content: '';
position: absolute;
bottom: -10px;
right: 20px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #f0bdc3;
}
.support-message.waving {
animation: supportWaving 1s ease-in-out;
}
@keyframes supportWaving {
0%, 100% { transform: rotate(0deg) scale(1); }
20% { transform: rotate(-5deg) scale(1.05); }
40% { transform: rotate(5deg) scale(1.05); }
60% { transform: rotate(-3deg) scale(1.02); }
80% { transform: rotate(3deg) scale(1.02); }
}
@media (max-width: 767px) {
.support-message {
font-size: 12px;
padding: 5px 5px;
bottom: 6px;
right: 60px;
}
.support-message::after {
content: '';
position: absolute;
bottom: -2px;
right: -20px;
border-left: 10px solid #f0bdc3;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
}
}
/* Przycisk zamknięcia dymku wsparcia */
.support-message-close {
position: absolute;
top: -10px;
right: -10px;
width: 22px;
height: 22px;
background-color: #000000;
color: #ffffff;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
z-index: 10002;
padding: 0;
}
/* Touch target dla urządzeń mobilnych - powiększona strefa kliknięcia bez zmiany wyglądu */
.support-message-close::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
}
.support-message-close:hover {
transform: scale(1.15);
background-color: #222222;
}
.support-message-close:active {
transform: scale(0.95);
}
.product-description.product-description-js p span {
font-size: 18px !important;
line-height: 1.3 !important;
}
.product-description.product-description-js ul {
padding-left: 20px;
}
.product-description.product-description-js ul li span, .product-description.product-description-js ul li {
font-size: 18px !important;
}
.cart-delivery-item__price-free {
grid-column: 1;
margin: 15px 0 30px;
text-align: right;
font-size: 20px;
color: #fff;
font-weight: bold;
background: #f0bdc2;
padding: 10px;
border-radius: 10px;
text-align: center;
}
.cart-delivery-item__price-free small
{
font-size: 12px;
font-weight: 400;
}
.extra_banners {
margin-top: 15px;
display: flex;
width: 100%;
height: fit-content;
justify-content: center;
align-items: center;
object-fit: contain;
}
.extra_banners img {
border-radius: 10px;
}
.cart__data.cart__delivery-section
{
display: flex;
flex-direction: column;
}
.cart__data.cart__delivery-section .cart-data-section
{
padding: 15px 15px 0;
}
.cart__data.cart__delivery-section .cart-data-section.deliveryhighlight
{
order: -2;
border: none !important;
padding: 15px 15px 0;
margin: 2px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}
.cart__data.cart__delivery-section .cart-data-section.paymenthighlight
{
order: -1;
border: none !important;
padding: 15px 15px 0;
margin: 2px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}
.cart__data.cart__delivery-section .cart-data-section .cart-data-section__header-title
{
font-size: 20px;
}
.cart-container .cart__action-btn
{
background: #000;
color: #fff;
padding: 6px 12px;
border-radius: 5px;
font-size: 14px;
transition: all ease-out 0.3s;
}
.cart-container .cart__action-btn:hover
{
background: rgba(87, 164, 150, 1.00);
color: #fff;
}
.cart-address-presentation {
width: 100%;
font-size: 16px;
line-height: 20px;
}
.cart-row__product-name {
display: inline-block;
color: #000;
margin-bottom: 4px;
transition: all ease-out 0.3s;
}
.cart-row__product-image img {
border-radius: 5px;
max-width: 50px;
max-height: 50px;
}
.expandable-mechanism-container-js {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 15px;
border: 1px solid rgba(255,255,255,1);
transition: all 0.3s ease !important;
margin-bottom: 10px;
}
.expandable-mechanism-container-js .cart-row
{
border: none !important;
}
.expandable-mechanism-container-js:nth-child(2n) {
background: rgba(255, 255, 255, 0.7);
border-radius: 10px;
padding: 10px;
border: 1px solid rgba(255,255,255,1);
transition: all 0.3s ease !important;
margin-bottom: 10px;
}
.expandable-mechanism-container-js:hover {
background: rgba(255, 255, 255, 1) !important;
border-color: rgba(108, 186, 177, 0.3) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}
.cart-row__expandable {
border-radius: 10px;
}
.cart__popup-closer svg
{
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.header-cart__summary-column.center {
width: 100%;
display: block;
height: fit-content;
}
.header-cart__summary-btn {
margin-bottom: 50px;
}
}
/* --- CUSTOM CATEGORIES SIDEBAR DESIGN --- */
.categories__parent,
.categories__current,
.categories__undercategories {
display: none !important;
}
.custom-all-categories {
margin-top: 15px;
display: flex;
flex-direction: column;
gap: 8px;
}
.custom-cat-item {
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Wiersz kategorii nadrzędnej z plusem */
.custom-cat-link-wrapper {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
backdrop-filter: blur(5px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.custom-cat-link-wrapper:hover {
background: rgba(74, 215, 189,0.9);
border-color: rgba(74, 215, 189,1);
color: #fff;
}
/* Dostosowanie linku wewnątrz wrappera */
.custom-cat-link {
flex-grow: 1;
display: block;
padding: 10px 0 10px 16px;
font-size: 1.05rem;
font-weight: 600;
color: #2d2d2d;
text-decoration: none;
transition: all 0.3s ease;
}
.custom-cat-link-wrapper:hover .custom-cat-link, .custom-cat-link:hover {
color: #fff;
padding-left: 20px;
}
/* Przycisk rozwijania [+] */
.custom-cat-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 1.3rem;
font-weight: 700;
color: #57a496;
cursor: pointer;
border-radius: 50%;
transition: all 0.3s ease;
user-select: none;
margin-right: 10px;
}
.custom-cat-link-wrapper:hover .custom-cat-toggle-btn
{
background: #fff;
color:#4ad7bd !important;
}
.custom-cat-toggle-btn:hover {
background: #000 !important;
color:#4ad7bd;
}
/* Aktywna ścieżka */
.custom-cat-item.active-path > .custom-cat-link-wrapper {
background: rgba(87,164,150,1);
border-color: rgba(87,164,150,1.00);
}
.custom-cat-item.active-path > .custom-cat-link-wrapper .custom-cat-link {
font-weight: 700;
color: #fff;
}
.custom-cat-item.active-path .custom-cat-toggle-btn
{
color: rgba(87,164,150,0.9) !important;
background: rgba(87,164,150,0.9) !important;
}
/* Styl dla aktywnego wrappera bezpośrednio wybranej kategorii */
.custom-cat-link-wrapper.active-current-wrapper {
background: #57a496 !important;
border-color: #57a496 !important;
box-shadow: 0 4px 15px rgba(87, 164, 150, 0.3);
}
.custom-cat-link-wrapper.active-current-wrapper .custom-cat-link {
color: #ffffff !important;
}
.custom-cat-link-wrapper.active-current-wrapper .custom-cat-toggle-btn {
color: #ffffff !important;
}
/* Podkategorie */
.custom-subcat-list {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
padding-left: 12px;
margin-left: 8px;
border-left: 2px solid rgba(87, 164, 150, 0.25);
display: flex;
flex-direction: column;
gap: 4px;
}
/* Pokazanie dla aktywnej ścieżki z serwera LUB dla dynamicznie rozwiniętej kategorii */
.custom-cat-item.active-path .custom-subcat-list,
.custom-cat-item.dynamic-expanded .custom-subcat-list {
max-height: 800px;
opacity: 1;
margin-top: 6px;
margin-bottom: 6px;
}
.custom-subcat-item {
transition: all 0.3s ease;
}
.custom-subcat-link {
display: block;
padding: 8px 12px;
font-size: 0.95rem;
font-weight: 500;
color: #555555;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
}
.custom-subcat-link:hover {
background: rgba(74, 215, 189, 0.1);
color: #57a496;
padding-left: 16px;
}
.custom-subcat-link.active-current {
background: #4ad7bd;
color: #fff !important;
font-weight: 700;
border-left: none
border-radius: 8px;
}
/* --- RESPONSIVE LIST OF PRODUCTS IMPROVEMENTS (<768px) --- */
@media (max-width: 767px) {
/* 1. Ukrycie breadcrumbs */
.breadcrumbs {
display: none !important;
}
/* 2. Ukrycie ilości towarów */
.quick-shopping-buttons-container__total-items {
display: none !important;
}
/* 3. Ukrycie pierwszego zbiorczego przycisku Dodaj do koszyka */
.quick-shopping-buttons-container__buttons .serial-adding-to-cart-js {
display: none !important;
}
/* 4. Sortowanie na mobile jako okrągła ikonka */
.sorting-and-views__filter-and-sorting .sorting-and-views__sorting-list.select {
margin: 0 !important;
position: relative !important;
min-width: 45px !important;
}
.sorting-and-views__filter-and-sorting .sorting-and-views__sorting-list.select label {
display: none !important;
}
.sorting-and-views__filter-and-sorting .sorting-and-views__sorting-list.select .select__input {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 50% !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.4) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
backdrop-filter: blur(5px) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
cursor: pointer;
}
.sorting-and-views__filter-and-sorting .sorting-and-views__sorting-list.select .select__input span {
display: none !important;
}
.sorting-chevron-desktop {
display: none !important;
}
.sorting-icon-mobile {
display: block !important;
width: 18px !important;
height: 18px !important;
fill: #57a496 !important;
color: #57a496 !important;
}
/* Dropdown sortowania na mobile */
.select__options[data-sorting-query] {
position: fixed !important;
top: auto !important;
bottom: 20px !important;
left: 5% !important;
right: 5% !important;
width: 90% !important;
min-width: 90% !important;
max-width: 90% !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 24px !important;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(15px) !important;
padding: 12px 0 !important;
z-index: 10000 !important;
}
.select__options[data-sorting-query] li {
padding: 12px 20px !important;
font-size: 0.95rem !important;
color: #333 !important;
transition: all 0.2s ease !important;
}
.select__options[data-sorting-query] li:hover {
background: rgba(74, 215, 189, 0.1) !important;
color: #57a496 !important;
}
.select__options[data-sorting-query] li.active-sorting-option {
background: rgba(74, 215, 189, 0.2) !important;
color: #4ad7bd !important;
font-weight: 700 !important;
}
/* 5. Przełącznik widoków (Oko) na mobile */
.sorting-and-views__views-list {
display: none !important;
}
.sorting-and-views__views-list-mobile {
display: block !important;
position: relative !important;
z-index: 160 !important;
}
.custom-views-trigger-btn {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.4) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
backdrop-filter: blur(5px) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
cursor: pointer;
}
.custom-views-trigger-btn svg {
width: 20px !important;
height: 20px !important;
fill: #57a496 !important;
color: #57a496 !important;
}
/* Dropdown wyboru widoku */
.custom-views-dropdown {
position: absolute !important;
top: 48px !important;
right: 0 !important;
width: 180px !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
backdrop-filter: blur(10px) !important;
padding: 8px 0 !important;
z-index: 9999 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.custom-views-dropdown.hidden-js {
display: none !important;
}
.custom-views-dropdown button {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 12px 18px !important;
background: none !important;
border: none !important;
font-size: 0.95rem !important;
color: #333 !important;
text-align: left !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.custom-views-dropdown button:hover {
background: rgba(74, 215, 189, 0.1) !important;
color: #57a496 !important;
}
.custom-views-dropdown button.active-js {
background: rgba(74, 215, 189, 0.2) !important;
color: #4ad7bd !important;
font-weight: 700 !important;
}
.custom-views-dropdown button svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
/* Dopasowanie flexa dla paska akcji */
.sorting-and-views__filter-and-sorting {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-grow: 1 !important;
}
.sorting-and-views {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 10px 15px !important;
background: rgba(255, 255, 255, 0.5) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(8px) !important;
margin-bottom: 15px !important;
position: relative !important;
z-index: 150 !important;
}
.sorting-and-views__toggle-filters-menu {
margin: 0 !important;
flex-grow: 1 !important;
height: 42px !important;
border-radius: 21px !important;
font-weight: 600 !important;
}
}
/* Ukrywanie kontenera widoków mobilnych na desktopie */
@media (min-width: 768px) {
.sorting-and-views__views-list-mobile {
display: none !important;
}
.sorting-icon-mobile {
display: none !important;
}
}
/* --- NEW CART LAYOUT IMPROVEMENTS (STEP 1) --- */
/* 1. Globalne style dla wierszy koszyka i stepperów w głównym koszyku */
.cart-container > .cart {
overflow: visible !important; /* Wymagane, aby pozycja sticky działała poprawnie */
}
.products-page__main-container
{
margin: 30px 130px;
}
@media (max-width: 1439px) {
.products-page__main-container
{
margin: 30px 32px;
}
.header .header-menu__content {
border-top: none;
max-width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
width: 360px;
overflow-y: auto;
}
.header .header-nav__list {
flex-direction: column;
align-items: flex-start;
padding-bottom: 8px;
border-bottom: 1px solid rgba(231, 231, 231, .91);
}
.header .header-menu__contact {
padding: 16px 24px 8px;
}
.header .header-nav__list>li {
width: 100%;
}
.header .header-nav__list>li:first-child .header-nav__btn {
padding: 8px 24px;
}
.header .header-nav__btn-icon {
display: none;
}
.header .header-nav__mobile-icon {
display: block;
transform: rotate(-90deg);
padding: 4px;
}
.header .header-nav__list>li {
width: 100%;
}
.header .header-menu__item {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: rgba(45, 45, 45, 1.00);
margin-bottom: 10px;
}
.cart-row:not(:has(.cart-row__deposit-price)) .cart-row__product {
width: 90%;
}
/* Wymuszenie w pełni mobilnego (kafelkowego) układu pozycji w koszyku w kroku 1 */
.cart-container .cart-row:not(.header-row) {
display: grid !important;
justify-content: space-between !important;
align-items: start !important;
grid-template-columns: 50% 50% !important;
grid-template-rows: repeat(3, auto) !important;
padding: 16px 0 !important;
position: relative !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.cart-container .cart-row__product {
width: 100% !important;
grid-row: 1 !important;
grid-column: 1 / 3 !important;
margin-bottom: 16px !important;
}
.cart-container .cart-row__price {
width: 100% !important;
grid-row: 2 !important;
grid-column: 1 !important;
text-align: left !important;
margin-bottom: 16px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.cart-container .cart-row__price span.cart-hide-on-desktop,
.cart-container .cart-row__value span.cart-hide-on-desktop {
display: inline-block !important;
}
.cart-container .cart-row__quantity {
width: 100% !important;
grid-row: 3 !important;
grid-column: 1 !important;
display: flex !important;
align-items: center !important;
}
.cart-container .cart-row__additional {
grid-row: 2 !important;
grid-column: 2 !important;
margin-bottom: 16px !important;
font-size: 14px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
text-align: right !important;
}
.cart-container .cart-row__value {
width: 100% !important;
grid-row: 3 !important;
grid-column: 2 !important;
text-align: right !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
}
.cart-container .cart-row__options {
width: auto !important;
grid-row: 1 !important;
grid-column: 2 !important;
align-self: flex-start !important;
justify-self: end !important;
position: absolute !important;
top: 16px !important;
right: 0 !important;
}
.cart-container .cart-row__options > * {
display: none !important;
}
.cart-container .cart-row__options-deleter {
display: block !important;
}
.cart-container .cart-row.header-row {
display: none !important;
}
.cart-container .cart-row__expandable {
display: none !important;
}
}
.cart-container .cart-row.header-row {
background: none !important;
border: none !important;
box-shadow: none !important;
padding-bottom: 8px !important;
margin-bottom: 5px !important;
font-weight: 700 !important;
color: #666 !important;
font-size: 0.9rem !important;
}
/* Stepper ilości sztuk */
.cart-container .cart-amount-stepper {
display: inline-flex !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(87, 164, 150, 0.3) !important;
border-radius: 20px !important;
padding: 3px !important;
height: 38px !important;
}
.cart-container .cart-amount-stepper button {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
border: none !important;
background: #57a496 !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
padding: 0 !important;
}
.cart-container .cart-amount-stepper button svg {
width: 12px !important;
height: 12px !important;
fill: currentColor !important;
}
.cart-container .cart-amount-stepper button:hover:not(:disabled) {
background: #4ad7bd !important;
transform: scale(1.05) !important;
}
.cart-container .cart-amount-stepper button:disabled {
background: #e0e0e0 !important;
color: #a0a0a0 !important;
cursor: not-allowed !important;
}
.cart-container .cart-amount-stepper input[name="quantity"] {
width: 45px !important;
height: 100% !important;
border: none !important;
background: transparent !important;
text-align: center !important;
font-weight: 700 !important;
color: #333 !important;
font-size: 1rem !important;
padding: 0 !important;
margin: 0 4px !important;
}
/* ==========================================
2. UKŁAD KOSZYKA - KROK 1 (order-step-first)
========================================== */
/* --- Desktop (>= 1200px) --- */
@media (min-width: 1200px) {
.order-step-first.cart-container > .cart {
display: grid !important;
grid-template-columns: 1fr 420px !important;
gap: 40px !important;
align-items: start !important;
}
.order-step-first.cart-container .cbrollinorderbasket {
grid-column: 1 !important;
}
.order-step-first.cart-container .cart__options.first-step {
grid-column: 2 !important;
position: sticky !important;
top: 120px !important;
background: rgba(255, 255, 255, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 24px !important;
padding: 30px !important;
backdrop-filter: blur(12px) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
display: flex !important;
flex-direction: column !important;
}
.order-step-first.cart-container .cart__options.first-step .cart__back-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 48px !important;
background: rgba(255, 255, 255, 0.6) !important;
color: #57a496 !important;
border: 1.5px solid rgba(87, 164, 150, 0.4) !important;
border-radius: 24px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
margin-top: 12px !important;
order: 2 !important;
}
.order-step-first.cart-container .cart__options.first-step .cart__back-btn:hover {
background: rgba(74, 215, 189, 0.08) !important;
border-color: #57a496 !important;
color: #4ad7bd !important;
}
.order-step-first.cart-container .cart__options.first-step .cart__next-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 52px !important;
background: #57a496 !important;
color: #fff !important;
border-radius: 26px !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
border: none !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 4px 15px rgba(87, 164, 150, 0.3) !important;
margin-top: 20px !important;
order: 1 !important;
}
.order-step-first.cart-container .cart__options.first-step .cart__next-btn:hover {
background: #4ad7bd !important;
box-shadow: 0 6px 20px rgba(87, 164, 150, 0.45) !important;
transform: translateY(-2px) !important;
}
.order-step-first.cart-container .cart__options.first-step .cart__next-btn:active {
transform: translateY(0) !important;
}
}
/* --- Mobile (< 1200px) --- */
@media (max-width: 1199px) {
.order-step-first.cart-container > .cart {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
/* Ukrycie akordeonu w kroku 1 - koszyk zawsze w pełni widoczny */
.order-step-first.cart-container .cbrollinorderbasket__summary-bar,
.order-step-first.cart-container .cbrollinorderbasket__expanded-bar {
display: none !important;
}
.order-step-first.cart-container .cbrollinorderbasket__content {
display: block !important;
}
.order-step-first.cart-container .cart__options.first-step {
order: 2 !important; /* Podsumowanie na samej górze */
background: rgba(255, 255, 255, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 20px !important;
padding: 20px !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03) !important;
display: flex !important;
flex-direction: column !important;
}
.order-step-first.cart-container .cbrollinorderbasket {
order: 2 !important; /* Lista pozycji pod spodem */
}
.order-step-first.cart-container .cart-row.header-row {
display: none !important;
}
.order-step-first.cart-container .cart__options.first-step .cart__back-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 46px !important;
background: rgba(255, 255, 255, 0.6) !important;
color: #57a496 !important;
border: 1.5px solid rgba(87, 164, 150, 0.4) !important;
border-radius: 23px !important;
font-weight: 600 !important;
text-decoration: none !important;
margin-top: 10px !important;
order: 2 !important;
}
.order-step-first.cart-container .cart__options.first-step .cart__next-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 50px !important;
background: #57a496 !important;
color: #fff !important;
border-radius: 25px !important;
font-weight: 700 !important;
font-size: 1.05rem !important;
border: none !important;
margin-top: 15px !important;
order: 1 !important;
}
}
/* ==========================================
3. UKŁAD PODSUMOWANIA - KROK 3 (order-step-third)
========================================== */
/* --- Desktop (>= 1200px) --- */
@media (min-width: 1200px) {
/* Nagłówek koszyka rozciąga się na pełną szerokość jako niezależny wiersz */
.cart-container > .cart > .cart__header {
grid-column: span 2 !important;
}
.order-step-third.cart-container > .cart {
display: grid !important;
grid-template-columns: 1fr 420px !important; /* Lewa szeroka, prawa dokładnie 420px */
gap: 40px !important;
align-items: start !important;
}
/* Lewa kolumna: rozwinięta lista pozycji */
.order-step-third.cart-container .cbrollinorderbasket {
grid-column: 1 !important;
order: 1 !important;
}
/* Prawa kolumna: jeden spójny blok flex o szerokości 420px podążający sticky */
.order-step-third.cart-container .cart__options.third-step {
grid-column: 2 !important;
order: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.order-step-third.cart-container .cart__delivery-section {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
/* Kolejność elementów w prawej kolumnie */
.order-step-third.cart-container .paymenthighlight {
order: 1 !important; /* 1. Sposób płatności */
}
.order-step-third.cart-container .deliveryhighlight {
order: 2 !important; /* 2. Sposób dostawy */
}
/* Adres wysyłki i do faktury */
.order-step-third.cart-container .cart-data-section:not(.last):not(.deliveryhighlight):not(.paymenthighlight) {
order: 3 !important; /* 3. Adresy */
}
/* Wiadomość do zamówienia (notatka) */
.order-step-third.cart-container .cart-data-section.last {
order: 4 !important; /* 4. Notatka */
}
/* Podsumowanie kwotowe, zgody i przycisk Zapłać */
.order-step-third.cart-container .cart__summary {
order: 5 !important; /* 5. Podsumowanie i przyciski płatności */
background: rgba(255, 255, 255, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 24px !important;
padding: 30px !important;
backdrop-filter: blur(12px) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
margin-top: 0px !important;
}
/* Ukrywamy akordeon w kroku 3 na desktopie */
.order-step-third.cart-container .cbrollinorderbasket__summary-bar,
.order-step-third.cart-container .cbrollinorderbasket__expanded-bar {
display: none !important;
}
.order-step-third.cart-container .cbrollinorderbasket__content {
display: block !important;
}
}
.cart__data.cart__delivery-section .cart-data-section
{
border: none !important;
padding: 15px 15px 0;
margin: 2px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}
/* --- Mobile (< 1200px) --- */
@media (max-width: 1199px) {
/* Używamy display: contents na elementach opakowujących na mobile */
.order-step-third.cart-container .cart__options.third-step,
.order-step-third.cart-container .cart__delivery-section {
display: contents !important;
}
.order-step-third.cart-container > .cart {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
/* 0. Nagłówek Koszyk 1 zawsze na samej górze */
.order-step-third.cart-container .cart__header {
order: 0 !important;
}
/* 1. Lista pozycji (zwinięta w akordeon) */
.order-step-third.cart-container .cbrollinorderbasket {
order: 1 !important;
}
/* 2. Podsumowanie ze zgodami i przyciskiem płatności (zaraz pod koszykiem) */
.order-step-third.cart-container .cart__summary {
order: 9 !important;
background: rgba(255, 255, 255, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 20px !important;
padding: 20px !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03) !important;
margin-top: 5px !important;
}
/* 3. Sposób płatności */
.order-step-third.cart-container .paymenthighlight {
order: 3 !important;
}
/* 4. Sposób dostawy */
.order-step-third.cart-container .deliveryhighlight {
order: 4 !important;
}
/* 5. Adresy i dane do faktury */
.order-step-third.cart-container .cart-data-section:not(.last):not(.deliveryhighlight):not(.paymenthighlight) {
order: 5 !important;
}
/* 6. Uwagi do zamówienia */
.order-step-third.cart-container .cart-data-section.last {
order: 6 !important;
}
}
/* ==========================================
4. STYL DLA AKORDEONU cbrollinorderbasket
========================================== */
.cbrollinorderbasket {
display: flex;
flex-direction: column;
width: 100%;
}
.cbrollinorderbasket__summary-bar {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 16px !important;
padding: 15px 20px !important;
backdrop-filter: blur(8px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
margin-bottom: 10px !important;
transition: all 0.3s ease !important;
}
.cbrollinorderbasket__expanded-bar {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 16px !important;
padding: 12px 20px !important;
backdrop-filter: blur(8px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
margin-bottom: 10px !important;
transition: all 0.3s ease !important;
}
.cbrollinorderbasket__summary-bar.hidden-js,
.cbrollinorderbasket__expanded-bar.hidden-js {
display: none !important;
}
.cbrollinorderbasket__summary-bar:hover,
.cbrollinorderbasket__expanded-bar:hover {
background: rgba(255, 255, 255, 0.55) !important;
}
.cbrollinorderbasket__info {
display: flex !important;
justify-content: space-around !important;
width: 100% !important;
font-size: 0.95rem !important;
color: #444 !important;
margin-bottom: 5px !important;
}
.cbrollinorderbasket__info-item strong {
color: #57a496 !important;
font-weight: 700 !important;
}
.cbrollinorderbasket__trigger-wrapper {
display: flex !important;
justify-content: center !important;
width: 100% !important;
border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
padding-top: 10px !important;
margin-top: 5px !important;
}
.cbrollinorderbasket__trigger {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
background: none !important;
border: none !important;
color: #57a496 !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
cursor: pointer !important;
padding: 5px 0 !important;
width: auto !important;
margin: 0 auto !important;
}
.cbrollinorderbasket__trigger:hover {
color: #4ad7bd !important;
}
/* Ograniczenie i precyzyjne małe wymiary strzałki na mobile z ultra-wysoką specyficznością */
.order-template-js.cart-container .cbrollinorderbasket .cbrollinorderbasket__trigger svg.cbrollinorderbasket__trigger-icon,
.order-template-js.cart-container .cbrollinorderbasket svg.cbrollinorderbasket__trigger-icon {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
max-width: 14px !important;
max-height: 14px !important;
fill: currentColor !important;
transition: transform 0.3s ease !important;
margin: 0 auto !important;
display: inline-block !important;
}
.cbrollinorderbasket__trigger-icon.rotate-180 {
transform: rotate(180deg) !important;
}
/* Ikony SVG w przyciskach koszyka krok 1 */
.cart-container .cart__back-btn svg,
.cart-container .cart__next-btn svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
margin-right: 8px !important;
}
/* ==========================================================================
PRZYCISKI REKLAMACJI (Complain) I ZWROTÓW (Return) W ZAKŁADCE ZAMÓWIENIA
========================================================================== */
.complaints-returns-actions-js {
width: auto !important;
white-space: nowrap !important;
}
.product-actions-wrapper {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
}
.product-action-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: #000000 !important; /* Głęboka czerń */
color: #ffffff !important; /* Biały tekst */
border: 1px solid #000000 !important;
border-radius: 20px !important;
padding: 8px 16px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}
.product-action-btn:hover {
background: #222222 !important; /* Grafitowy czarny przy najechaniu */
border-color: #222222 !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}
.product-action-btn:active {
transform: translateY(0) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.product-action-btn svg.product-action-icon {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
fill: #ffffff !important; /* Biała ikona */
margin: 0 !important;
display: inline-block !important;
}
/* Wersja mobilna (< 768px) dla przycisków akcji */
@media (max-width: 767px) {
.product-actions-wrapper {
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
width: 100% !important;
margin-top: 10px !important;
}
.product-action-btn {
width: 100% !important;
padding: 10px 14px !important;
font-size: 0.85rem !important;
justify-content: center !important;
}
}
/* ==========================================================================
KAFLOWY UKŁAD LIŚCI PRODUKTÓW W ZAMÓWIENIU (DLA WSZYSTKICH ROZDZIELCZOŚCI)
========================================================================== */
/* Wyłączenie domyślnego układu tabelarycznego strefy klienta */
.eshop__table-container.products {
overflow: visible !important;
}
.products-table-js {
display: block !important;
width: 100% !important;
border: none !important;
}
.products-table-js thead {
display: none !important;
}
.products-table-js tbody {
display: block !important;
width: 100% !important;
}
/* Wiersz produktu staje się kafelkowym Gridem */
.products-table-js tbody tr.row:not(.header-row) {
display: grid !important;
grid-template-columns: repeat(12, 1fr) !important;
gap: 14px 10px !important;
background: rgba(255, 255, 255, 0.45) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 20px !important;
padding: 16px !important;
margin-bottom: 16px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
backdrop-filter: blur(12px) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.products-table-js tbody tr.row:not(.header-row):hover {
border-color: rgba(0, 0, 0, 0.15) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}
/* Każda komórka td staje się elementem blokowym */
.products-table-js tbody tr.row:not(.header-row) td {
display: block !important;
padding: 0 !important;
border: none !important;
background: none !important;
width: auto !important;
height: auto !important;
}
/* --- WIERSZ 1 (Zawsze widoczny) --- */
/* ID pozycji */
.products-table-js tbody tr.row td.id {
grid-column: 1 / span 1 !important;
grid-row: 1 !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
color: #888 !important;
align-self: center !important;
}
/* Główna zawartość produktu (zdjęcie, nazwa, kod) */
.products-table-js tbody tr.row td.product-main-cell-js {
grid-column: 2 / span 9 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.products-table-js tbody tr.row td.product-main-cell-js .product-cell {
display: flex !important;
gap: 12px !important;
align-items: center !important;
}
.products-table-js tbody tr.row td.product-main-cell-js .image {
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.6) !important;
border-radius: 10px !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
padding: 4px !important;
}
.products-table-js tbody tr.row td.product-main-cell-js .image img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
.products-table-js tbody tr.row td.product-main-cell-js .product-info {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.products-table-js tbody tr.row td.product-main-cell-js .product-name {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #222 !important;
line-height: 1.3 !important;
}
.products-table-js tbody tr.row td.product-main-cell-js .product-code {
font-size: 0.8rem !important;
color: #777 !important;
}
/* Przycisk rozwijania wiersza */
.products-table-js tbody tr.row td.product-expand-cell-js {
grid-column: 11 / span 2 !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: end !important;
}
.products-table-js tbody tr.row td.product-expand-cell-js button {
background: rgba(0, 0, 0, 0.03) !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.products-table-js tbody tr.row td.product-expand-cell-js button:hover {
background: rgba(0, 0, 0, 0.08) !important;
}
/* --- WIERSZ 2 (Domyślnie ukryty, rozwija się gdy strzałka ma .expanded-js) --- */
/* Selektor sprawdzający stan ZWINIĘTY */
.products-table-js tbody tr.row:not(:has(.product-expand-cell-js button.expanded-js)) td.product-price-cell-js,
.products-table-js tbody tr.row:not(:has(.product-expand-cell-js button.expanded-js)) td.product-price-brutto-cell-js,
.products-table-js tbody tr.row:not(:has(.product-expand-cell-js button.expanded-js)) td.product-vat-cell-js,
.products-table-js tbody tr.row:not(:has(.product-expand-cell-js button.expanded-js)) td.product-quantity-cell-js,
.products-table-js tbody tr.row:not(:has(.product-expand-cell-js button.expanded-js)) td.product-discount-cell-js {
display: none !important;
}
/* Selektor sprawdzający stan ROZWINIĘTY */
.products-table-js tbody tr.row:has(.product-expand-cell-js button.expanded-js) td.product-price-cell-js,
.products-table-js tbody tr.row:has(.product-expand-cell-js button.expanded-js) td.product-price-brutto-cell-js,
.products-table-js tbody tr.row:has(.product-expand-cell-js button.expanded-js) td.product-vat-cell-js,
.products-table-js tbody tr.row:has(.product-expand-cell-js button.expanded-js) td.product-quantity-cell-js,
.products-table-js tbody tr.row:has(.product-expand-cell-js button.expanded-js) td.product-discount-cell-js {
display: flex !important;
flex-direction: column !important;
grid-row: 2 !important;
border-top: 1px dashed rgba(0, 0, 0, 0.06) !important;
border-bottom: 1px dashed rgba(0, 0, 0, 0.06) !important;
padding: 10px 0 !important;
}
/* Pozycje kolumn w wierszu 2 */
.products-table-js tbody tr.row td.product-price-cell-js {
grid-column: span 3 !important;
}
.products-table-js tbody tr.row td.product-price-brutto-cell-js {
grid-column: span 3 !important;
}
.products-table-js tbody tr.row td.product-vat-cell-js {
grid-column: span 2 !important;
align-items: center !important;
}
.products-table-js tbody tr.row td.product-discount-cell-js {
grid-column: span 2 !important;
align-items: center !important;
}
.products-table-js tbody tr.row td.product-quantity-cell-js {
grid-column: span 2 !important;
align-items: flex-end !important;
}
/* Etykiety before dla wiersza 2 */
.products-table-js tbody tr.row td.product-price-cell-js::before {
content: "Cena jedn. netto" !important;
font-size: 0.75rem !important;
color: #888 !important;
font-weight: 600 !important;
margin-bottom: 3px !important;
}
.products-table-js tbody tr.row td.product-price-brutto-cell-js::before {
content: "Cena jedn. brutto" !important;
font-size: 0.75rem !important;
color: #888 !important;
font-weight: 600 !important;
margin-bottom: 3px !important;
}
.products-table-js tbody tr.row td.product-vat-cell-js::before {
content: "VAT" !important;
font-size: 0.75rem !important;
color: #888 !important;
font-weight: 600 !important;
margin-bottom: 3px !important;
}
.products-table-js tbody tr.row td.product-discount-cell-js::before {
content: "Obniżka" !important;
font-size: 0.75rem !important;
color: #888 !important;
font-weight: 600 !important;
margin-bottom: 3px !important;
}
.products-table-js tbody tr.row td.product-quantity-cell-js::before {
content: "Ilość" !important;
font-size: 0.75rem !important;
color: #888 !important;
font-weight: 600 !important;
margin-bottom: 3px !important;
}
/* Estetyka stepperów w wierszu 2 */
.products-table-js tbody tr.row td.product-quantity-cell-js .change-quantity-in-cart-js {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
/* --- WIERSZ 3 (Zawsze widoczny) --- */
/* Wartość całkowita i waluta */
.products-table-js tbody tr.row td.product-value-cell-js,
.products-table-js tbody tr.row td.product-value-brutto-cell-js,
.products-table-js tbody tr.row td.product-currency-cell-js {
grid-row: 3 !important;
display: flex !important;
flex-direction: column !important;
align-self: center !important;
}
.products-table-js tbody tr.row td.product-value-cell-js {
grid-column: span 3 !important;
}
.products-table-js tbody tr.row td.product-value-brutto-cell-js {
grid-column: span 3 !important;
}
.products-table-js tbody tr.row td.product-currency-cell-js {
grid-column: span 1 !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
color: #333 !important;
margin-top: 17px !important; /* Wyrównanie do wartości */
}
.products-table-js tbody tr.row td.product-value-cell-js::before {
content: "Wartość netto" !important;
font-size: 0.75rem !important;
color: #888 !important;
font-weight: 600 !important;
margin-bottom: 3px !important;
}
.products-table-js tbody tr.row td.product-value-brutto-cell-js::before {
content: "Wartość brutto" !important;
font-size: 0.75rem !important;
color: #888 !important;
font-weight: 600 !important;
margin-bottom: 3px !important;
}
.products-table-js tbody tr.row td.product-value-cell-js span,
.products-table-js tbody tr.row td.product-value-brutto-cell-js span {
font-size: 1.05rem !important;
font-weight: 800 !important;
color: #111 !important;
}
/* Przyciski [Reklamacja] i [Zwrot] */
.products-table-js tbody tr.row td.complaints-returns-actions-js {
grid-column: 8 / span 5 !important;
grid-row: 3 !important;
justify-self: end !important;
align-self: center !important;
}
.products-table-js tbody tr.row td.complaints-returns-actions-js .product-actions-wrapper {
justify-content: flex-end !important;
}
/* Jeśli ekran jest bardzo wąski (np. < 560px), ułóżmy wiersz 3 pionowo */
@media (max-width: 560px) {
.products-table-js tbody tr.row td.product-value-cell-js {
grid-column: 1 / span 8 !important;
}
.products-table-js tbody tr.row td.product-currency-cell-js {
grid-column: 9 / span 4 !important;
}
.products-table-js tbody tr.row td.complaints-returns-actions-js {
grid-column: 1 / span 12 !important;
grid-row: 4 !important;
justify-self: stretch !important;
width: 100% !important;
margin-top: 5px !important;
}
}
.customer-submenu tr.summary-row
{
border: none !important;
}
.customer-submenu tr.summary-row::before
{
display: none !important;
}
.customer-submenu tr.summary-row td
{
padding: 15px;
font-size: 120%;
}
.customer-submenu tr.summary-row td:first-child
{
border-radius: 10px 0 0 10px;
}
.customer-submenu tr.summary-row td:last-child
{
border-radius: 0 10px 10px 0;
}
/* Blokada pointer-events na dzieciach przycisków strefy klienta (poprawka błędu e.target w skrypcie Comarchu) */
.product-action-btn * {
pointer-events: none !important;
}
/* --- PRZYCISKI AKCJI W SZCZEGÓŁACH ZAMÓWIENIA --- */
.order-details-actions-wrapper {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 15px 0 !important;
}
.order-details-actions-wrapper .product-action-btn {
margin: 0 !important;
}
/* --- PRZYCISK PONAWIANIA ZAMÓWIENIA NA LIŚCIE ZAMÓWIEŃ --- */
.repeat-order-cell-js {
text-align: right !important;
padding-right: 15px !important;
width: 180px !important;
vertical-align: middle !important;
}
.repeat-order-btn-js {
font-size: 0.8rem !important;
padding: 8px 16px !important;
border-radius: 20px !important;
text-transform: none !important;
letter-spacing: normal !important;
}
/* Na mobile (< 768px) zwijamy przycisk na liście do samej okrągłej ikony koszyka */
@media (max-width: 767px) {
.repeat-order-btn-js span {
display: none !important;
}
.repeat-order-btn-js {
padding: 8px !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.repeat-order-btn-js svg.product-action-icon {
margin-right: 0 !important;
width: 16px !important;
height: 16px !important;
}
.repeat-order-cell-js {
width: auto !important;
padding-right: 8px !important;
}
}
/* Animacja obracania dla ikony ładowania */
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* --- TABLET/LAPTOP BREAKPOINT OPTIMIZATIONS (768px - 1439px) --- */
@media (min-width: 768px) and (max-width: 1439px) {
.search-toggle-wrapper-js {
display: inline-flex !important;
align-items: center !important;
}
/* 1. Dla elementu '.header-top-bar' padding na wartość: '5px 32px' */
.header-top-bar {
padding: 5px 32px !important;
}
/* 3. Dla elementu '.header__main' ustaw padding na '5px 32px' */
.header__main {
grid-template-columns: auto auto 1fr auto !important;
grid-template-rows: auto auto !important;
padding: 5px 32px !important;
row-gap: 0 !important;
transition: all 0.3s ease !important;
}
/* 2. Elementy '.header .header-client-area__btn' padding ustaw na '5px 5px 5px;' oraz min-width: 90px */
.header .header-client-area__btn {
padding: 5px 5px 5px !important;
min-width: 90px !important;
justify-content: center !important;
}
.header .header-client-area__btn-icon-wrapper {
margin-top: 4px !important;
}
/* Hamburger po lewej stronie logo */
.header__menu {
grid-row: 1 !important;
grid-column: 1 !important;
display: flex !important;
align-items: center !important;
margin-right: 20px !important;
margin-left: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
height: 100% !important;
}
.header__logo {
grid-row: 1 !important;
grid-column: 2 !important;
padding-left: 0 !important;
margin-left: 0 !important;
margin-right: auto !important;
align-self: center !important;
}
/* 4. Dla elementu '.header__logo img' ustaw margines i wymiary */
.header__logo img {
padding: 5px 0 !important;
margin: 5px 0 0 !important;
max-width: 240px !important;
min-width: 190px !important;
min-height: max-content !important;
}
.header__main:not(.closed) .header-client-area {
grid-row: 1 !important;
grid-column: 3 / span 10 !important;
justify-self: end !important;
align-self: center !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding-right: 0 !important; /* Usunięcie prawego paddingu */
}
/* 5. Dla elementu '.header.fixed .header__main:not(.closed) .header-client-area' usuń prawy padding */
.header.fixed .header__main:not(.closed) .header-client-area {
padding-right: 0 !important;
}
/* 6. Dla elementu '.header.fixed .header__main:not(.closed) .header__logo' usuń lewy padding */
.header.fixed .header__main:not(.closed) .header__logo {
padding-left: 0 !important;
}
/* Wyszukiwarka - domyślnie schowana w drugim wierszu (wyśrodkowana w poziomie) */
.header__search {
grid-row: 2 !important;
grid-column: 1 / span 12 !important;
width: 100% !important;
max-width: 600px !important; /* Limit szerokości dla zgrabnego wyglądu */
margin: 0 auto !important; /* Wyśrodkowanie w poziomie */
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: 1px solid rgba(231,231,231,0) !important;
background: #fff !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
border-radius: 8px !important;
}
/* Wyszukiwarka - rozwinięta po kliknięciu lupki (wyśrodkowana w poziomie) */
.header__search.search-visible-js {
height: 48px !important;
min-height: 48px !important;
margin: 15px auto 5px !important; /* Wyśrodkowanie z zachowaniem marginesów pionowych */
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
overflow: visible !important;
border: 1px solid rgba(231,231,231,1) !important;
}
/* Zapobieganie przesłanianiu wyników wyszukiwania (autocomplete) przez baner główny */
.mainBanner[data-name="mainBanner3"] {
position: relative !important;
z-index: -1 !important;
}
}
/* Domyślne ukrycie togglera lupki poza przedziałem 768px - 1439px */
@media (max-width: 767px) {
.search-toggle-wrapper-js {
display: none !important;
}
}
@media (min-width: 1440px) {
.search-toggle-wrapper-js {
display: none !important;
}
}
/* --- EFEKT WCIŚNIĘCIA (ACTIVE) ORAZ SKUPIENIA (FOCUS) DLA ELEMENTÓW INTERAKTYWNYCH --- */
/* 1. PRZYCISKI Z TŁEM (click/active) - zmiana koloru tła i obramowania */
.pure-button:active,
.button:active,
.btn:active,
.product-action-btn:active,
.repeat-order-btn-js:active {
background-color: #4c615d !important;
border-color: #4c615d !important;
color: #ffffff !important;
transform: scale(0.98) !important; /* Efekt fizycznego wciśnięcia przycisku */
}
/* 2. ELEMENTY TEKSTOWE I IKONY BEZ TŁA (click/active) - zmiana koloru czcionki i wypełnienia ikon */
.header-client-area__btn:active,
.header-search-toggle-js:active,
.cbrollinorderbasket__trigger:active {
color: #4c615d !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
transform: scale(0.98) !important;
}
.header-client-area__btn:active svg,
.header-search-toggle-js:active svg,
.cbrollinorderbasket__trigger:active svg {
fill: #4c615d !important;
}
/* Stan wciśnięcia linku tekstowego */
a:active {
color: #4c615d !important;
}
/* Styl wyróżnienia focusu (dostępność WCAG / nawigacja klawiaturą) */
.pure-button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
.product-action-btn:focus-visible,
.header-client-area__btn:focus-visible,
.repeat-order-btn-js:focus-visible,
.cbrollinorderbasket__trigger:focus-visible,
a:focus-visible {
outline: 2px solid #4c615d !important;
outline-offset: 2px !important;
}
/* --- OVERRIDES FOR DYNAMIC SYSTEM VARIABLES (LIGHTER COLOR) --- */
/* Ramka rozwiniętych produktów w koszyku */
.cart-container .cart__products-expanded {
border-bottom: 1px solid rgba(87, 164, 150, 0.4) !important;
background-color: rgba(87, 164, 150, 0.05) !important;
}
/* Tło opcji w rozwijanych listach select */
.select__options>*.focused-option-js,
.select__options>*:hover {
background-color: rgba(74, 215, 189, 0.15) !important;
}
/* Zgoda na cookies (stan aktywny) */
.cookie-consent__consent[data-value=granted],
.cookie-consent__consent[data-value=granted]::after {
background-color: #57a496 !important;
}
/* Kropki karuzeli (bullets) */
.mainBanner .swiper-pagination-bullet,
.single-image .swiper-pagination-bullet {
background-color: rgba(87, 164, 150, 0.4) !important;
opacity: 0.7 !important;
}
.mainBanner .swiper-pagination-bullet-active,
.single-image .swiper-pagination-bullet-active {
background-color: #57a496 !important;
opacity: 1 !important;
box-shadow: 0 0 8px rgba(87, 164, 150, 0.5) !important;
}
/* --- RESPONSIVENESS: SCREEN WIDTH 768px TO 1199px --- */
@media (min-width: 768px) and (max-width: 1199px) {
.mainBanner__next {
right: 9% !important;
}
.mainBanner__prev {
left: 9% !important;
}
}
/* --- RESPONSIVENESS: SCREEN WIDTH 1200px TO 1439px --- */
@media (min-width: 1200px) and (max-width: 1439px) {
.mainBanner__slide-container-box h1 {
font-weight: 700 !important;
font-size: 3rem !important;
line-height: 3rem !important;
-webkit-line-clamp: none !important;
color: rgba(0, 0, 0, 0.9) !important;
overflow: visible !important;
}
.mainBanner__slide-container-box h3 {
text-transform: uppercase !important;
font-weight: 400 !important;
color: rgba(0, 0, 0, 0.7) !important;
font-size: 1.2rem !important;
line-height: 1.4rem !important;
-webkit-line-clamp: none !important;
overflow: visible !important;
}
}
/* --- DOMYŚLNE UKRYCIE NOWYCH ETYKIET I LINII FINANSOWEJ KOSZYKA NA INNYCH ROZDZIELCZOŚCIACH --- */
.cart-row__financial-line-tablet,
.cart-value-label-tablet,
.cart-row__total-price-expandable {
display: none !important;
}
/* --- RESPONSIVENESS KOSZYKA: PRZEDZIAŁ 1200px DO 1439px --- */
@media (min-width: 1200px) and (max-width: 1439px) {
.cart-row__total-price
{
display: none;
}
/* Przekształcenie wiersza koszyka w układ kafelkowy */
.cart-container .cart-row:not(.header-row) {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto auto !important;
gap: 15px !important;
padding: 10px !important;
position: relative !important;
border-bottom: none !important;
}
/* 1. Numer pozycji na samej górze */
.cart-container .cart-row__number {
grid-row: 1 !important;
grid-column: 1 !important;
display: block !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
color: #888 !important;
margin-bottom: 0 !important;
padding-bottom: 4px !important;
border-bottom:none !important;
}
/* 2. Produkt ze zdjęciem i nazwą */
.cart-container .cart-row__product-wrapper {
grid-row: 2 !important;
grid-column: 1 / span 2 !important;
display: flex !important;
gap: 20px !important;
width: 100% !important;
}
/* Pokazujemy i formatujemy linię finansową pod nazwą */
.cart-row__financial-line-tablet {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 20px !important;
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px dashed rgba(0,0,0,0.08) !important;
}
.cart-row__financial-line-tablet .financial-item {
display: flex !important;
gap: 6px !important;
font-size: 0.95rem !important;
}
.cart-row__financial-line-tablet .financial-label {
color: #666 !important;
font-weight: 600 !important;
}
.cart-row__financial-line-tablet .financial-value {
color: #2c7567 !important;
font-weight: 700 !important;
}
/* Ukrywamy stare, zduplikowane wiersze finansowe */
.cart-container .cart-row__price,
.cart-container .cart-row__additional,
.cart-container .cart-row__currency {
display: none !important;
}
/* 3. Stepper ilości sztuk */
.cart-container .cart-row__quantity {
grid-row: 3 !important;
grid-column: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
}
/* 4. Wartość brutto razem */
.cart-container .cart-row__value {
grid-row: 3 !important;
grid-column: 2 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 42px;
}
.cart-value-label-tablet {
display: inline-block !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
color: #666 !important;
margin-right: 8px !important;
}
/* 5. Kosz (Usuwanie) w prawym górnym rogu */
.cart-container .cart-row__options {
width: auto !important;
grid-row: 1 !important;
grid-column: 1 !important;
align-self: flex-start !important;
justify-self: end !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
}
.cart-container .cart-row__options > * {
display: none !important;
}
.cart-container .cart-row__options-deleter {
display: block !important;
}
}
/* --- RESPONSIVENESS KOSZYKA: PRZEDZIAŁ 1440px DO 1660px --- */
@media (min-width: 1440px) and (max-width: 1660px) {
/* Ukrywamy oryginalną cenę brutto w wierszach głównych oraz w nagłówku tabeli */
.cart-container .cart-row .cart-row__total-price {
display: none !important;
}
/* Zwiększamy szerokość kolumny produktu o brakujące 10% (z 27% na 37%) dla zachowania pełnej szerokości */
.cart-container .cart-row .cart-row__product {
width: 37% !important;
}
/* Pokazujemy cenę netto wewnątrz expandable w tym samym stylu co elementy obok */
.cart-container .cart-row__expandable .cart-row__total-price-expandable {
display: flex !important;
}
}
/* Domyślne ukrycie total-price w expandable poza przedziałem 1440px - 1660px */
@media (max-width: 1439px), (min-width: 1661px) {
.cart-container .cart-row__expandable .cart-row__total-price-expandable {
display: none !important;
}
}
.cart-container .cart__coupon {
margin: 10px 0;
padding: 10px;
border-radius: 10px;
border: 1px solid #56a495;
}
.cart-container .cart__coupon:has(.cart__coupon-content:not([style*="display: none"]):not([style*="display:none"])) {
background: rgba(86, 164, 149, 0.1);
}
.cart__coupon .form__input-value
{
background: #fff;
}
/* Styl dla informacji o darmowej dostawie w podsumowaniu */
.cart-address-presentation__free-delivery-info {
margin-top: 15px !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
color: #b45309 !important; /* Ciepły pomarańczowy/brązowy dla brakującej kwoty */
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 15px !important;
background-color: rgba(217, 119, 6, 0.05) !important;
border-left: 3px solid #d97706 !important;
border-radius: 8px !important;
}
.cart-address-presentation__free-delivery-info.success {
color: #57a496 !important; /* Miętowy dla darmowej dostawy */
background-color: rgba(87, 164, 150, 0.08) !important;
border-left: 3px solid #57a496 !important;
}
/* Wiersz postępu darmowej dostawy w pierwszym kroku koszyka */
.cart__free-delivery-progress-row {
font-size: 0.92rem !important;
font-weight: 500 !important;
color: #b45309 !important;
background-color: rgba(217, 119, 6, 0.05) !important;
border-radius: 8px !important;
padding: 10px 15px !important;
margin: 10px 0 !important;
border-left: 3px solid #d97706 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
.cart__free-delivery-progress-row.success {
color: #2c7567 !important;
background-color: rgba(87, 164, 150, 0.08) !important;
border-left: 3px solid #57a496 !important;
}
.cart-address-presentation__free-delivery-info small, .cart__free-delivery-progress-row small
{
font-size: 12px;
}
.cart__free-delivery-progress-row strong {
font-weight: 700 !important;
}
/* Domyślne ukrycie mobilnej sekcji kategorii */
.header-menu__categories-mobile {
display: none !important;
}
/* Styl dla kategorii bezpośrednio w menu bocznym na mobile (< 1440px) */
@media (max-width: 1439px) {
/* Ukrywamy stary element wywoływania kategorii z menu */
.header-categories-mobile-trigger {
display: none !important;
}
.header-menu__categories-mobile {
display: block !important;
padding: 20px 24px 10px 24px !important;
border-bottom: 1px solid rgba(231, 231, 231, 0.6) !important;
margin-bottom: 20px !important; /* Odpowiedni margines rozgraniczający */
}
.header-menu__categories-title {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: #333 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-bottom: 15px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.header-menu__categories-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.header-menu__categories-item {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.header-menu__categories-link-wrapper {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 10px !important;
}
.header-menu__categories-link {
flex: 1 !important;
display: flex !important;
align-items: center !important;
padding: 12px 16px !important;
background: rgba(87, 164, 150, 0.05) !important;
border: 1px solid rgba(87, 164, 150, 0.1) !important;
border-radius: 8px !important;
color: #333 !important;
font-weight: 600 !important;
font-size: 1rem;
text-decoration: none !important;
transition: all 0.25s ease !important;
}
.header-menu__categories-link:active,
.header-menu__categories-link:hover {
background: rgba(87, 164, 150, 0.15) !important;
border-color: rgba(87, 164, 150, 0.3) !important;
color: #2c7567 !important;
}
/* Przycisk rozwijania podmenu [ + ] / [ - ] */
.header-menu__categories-toggle-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
background: #f1f5f4 !important;
border: 1px solid rgba(87, 164, 150, 0.2) !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
padding: 0 !important;
}
.header-menu__categories-toggle-btn:active,
.header-menu__categories-toggle-btn:hover {
background: #57a496 !important;
border-color: #57a496 !important;
}
.header-menu__categories-toggle-btn:active svg,
.header-menu__categories-toggle-btn:hover svg {
fill: #ffffff !important;
}
.header-menu__categories-plus-icon {
width: 14px !important;
height: 14px !important;
fill: #57a496 !important;
transition: all 0.25s ease !important;
}
/* Podmenu (rozwijane podkategorie) */
.header-menu__submenu {
list-style: none !important;
padding: 5px 0 5px 15px !important;
margin: 0 !important;
display: flex;
flex-direction: column !important;
gap: 6px !important;
border-left: 2px solid rgba(87, 164, 150, 0.15) !important;
margin-left: 20px !important;
}
.header-menu__submenu-item {
width: 100% !important;
}
.header-menu__submenu-link {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 8px 12px !important;
font-size: 0.95rem !important;
color: #555 !important;
text-decoration: none !important;
font-weight: 500 !important;
border-radius: 6px !important;
transition: all 0.25s ease !important;
}
.header-menu__submenu-link:active,
.header-menu__submenu-link:hover {
background: rgba(87, 164, 150, 0.08) !important;
color: #2c7567 !important;
padding-left: 16px !important;
}
.header-menu__submenu-icon {
width: 10px !important;
height: 10px !important;
fill: #888 !important;
transition: transform 0.25s ease !important;
}
.header-menu__submenu-link:active .header-menu__submenu-icon,
.header-menu__submenu-link:hover .header-menu__submenu-icon {
fill: #57a496 !important;
transform: translateX(3px) !important;
}
/* Zarządzanie przewijaniem sidebaru mobilnego (likwidacja scroll-in-scroll) */
.header-menu-content-js,
.header-menu__content {
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
.header-menu-sidebar-js .header__sidebar-content,
.header-menu-sidebar-js.header__sidebar-content {
overflow-y: auto !important;
max-height: 100vh !important;
height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
}
/* ==========================================================================
Kierunek wysuwania sidebaru menu na mobile i tabletach
========================================================================== */
/* Telefony (poniżej 768px) -> menu wysuwa się z PRAWEJ strony */
@media (max-width: 767px) {
.header-menu-sidebar-js .header__sidebar-content,
.header-menu-sidebar-js.header__sidebar-content {
right: 0 !important;
left: auto !important;
transform: translateX(0) !important;
}
.header-menu-sidebar-js.hide .header__sidebar-content,
.header-menu-sidebar-js.none .header__sidebar-content,
.header-menu-sidebar-js .header__sidebar-content.hide {
transform: translateX(100%) !important;
}
}
/* Tablety i średnie ekrany (768px - 1439px) -> menu wysuwa się z LEWEJ strony */
@media (min-width: 768px) and (max-width: 1439px) {
.header-menu-sidebar-js .header__sidebar-content,
.header-menu-sidebar-js.header__sidebar-content {
left: 0 !important;
right: auto !important;
transform: translateX(0) !important;
}
.header-menu-sidebar-js.hide .header__sidebar-content,
.header-menu-sidebar-js.none .header__sidebar-content,
.header-menu-sidebar-js .header__sidebar-content.hide {
transform: translateX(-100%) !important;
}
}