/* ===== TOKENS / BAZA ===== */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');
:root{
--cb-bg-hero: #FFD4B8;          /* tło sekcji nagłówka/slidera – brzoskwinia */
--cb-bg: #ffffff;
--cb-text: #373D3D;
--cb-border: #e9e9e9;
--cb-accent: #111;              /* obramowania/chipy */
--cb-greenbottle: #1A4243;
--cb-cream: #FFDCB7;
--cb-radius-pill: 999px;
--cb-radius-hero: 48px;         /* duże zaokrąglenie dołu headera */
--cb-container: 1200px;
--cb-gap: 18px;
--cb-tiles-h2: rgba(0,0,0,0.65);
--cat1:#ff2d8a;
--cat2:#158D67;
--cat3:#ff8a00;
--cat4:#67F0DE;
--cb-font: "Dosis", sans-serif;
--cb-fontstyle: "Dosis", 700;
/* losowe pozycje (możesz zostawić swoje/JS) */
--g1x:20%; --g1y:10%;
--g2x:100%; --g2y:10%;
--g3x:-5%;  --g3y:60%;
--g4x:105%; --g4y:100%;
--d1:95vw;  --d2:50vw;  --d3:60vw;  --d4:55vw;
/* Promienie = połowa średnicy */
--r1:calc(var(--d1)/2);
--r2:calc(var(--d2)/2);
--r3:calc(var(--d3)/2);
--r4:calc(var(--d4)/2);
/* Twoja bazowa i docelowa barwa przycisku (far -> near) */
--cta-color-far: #46c3b2;
--cta-color-near:#ff2d8a;
--cta-ripple-min: 3s;    /* gdy kursor daleko */
--cta-ripple-max: 0.25s; /* gdy kursor na przycisku */
--cta-shadow-max: 28px;  /* moc cienia przy bliskim kursorze */
}
*
{
font-family: var(--cb-font);
}
.rndB, .primary-action-button, .secondary-action-button, .go-to-top__btn-js, .wishListInfoPopup, .temporaryPopup, textarea, .configMessages button, .cookieContainer button, .recommended-ai__item, .wishListButtonPopUp, .wishListInfoPopup, .mobileLogoutButton, .goToComparisonTool, .image360
{
border-radius: 25px !important;
}
.cartContainer .customerData .messageAndAttachments .msgToSeller__textarea, .cartContainer .customerData .messageAndAttachments .attachments__textarea {
color: #373d3d;
border-color: #fff;
width: 100%;
height: 90px;
resize: none;
padding: 10px 12px 9px 10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px !important;
}
.closeCookieBtn-all {
background-color: transparent;
border: 2px solid #46c3b2;
color: #46c3b2;
font-weight: bold;
}
.closeCookieBtn-necessary {
background-color: transparent;
border: 2px solid #6400cf;
color: #6400cf;
font-weight: bold;
}
.closeCookieBtn-settings {
border: 2px solid var(--cb-text);
background-color: transparent;
color: var(--cb-text);
font-weight: bold;
}
.closeCookieBtn-settings:hover {
background-color: var(--cb-text);
border: 2px solid var(--cb-text);
color: #ffffff;
}
.popup-banner-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background-color: rgba(0, 0, 0, .15);
margin: 0;
user-select: none;
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: none;
}
.popup-banner {
box-sizing: border-box;
background-color: rgba(250, 250, 250, 0.8);
width: 90%;
max-width: 850px;
max-height: 766px;
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
overflow-y: auto;
border-radius: 5px;
box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
}
.popup-banner__btn {
box-sizing: border-box;
width: 100%;
font-size: 14px;
font-weight: 600;
line-height: 2;
letter-spacing: 1.2px;
text-align: center;
text-transform: uppercase;
padding: 13px;
margin: 0;
background-color: transparent;
border: 2px solid #46c3b2;
color: #46c3b2;
}
.popup-banner__btn:hover
{
background-color:#46c3b2;
color: #fff;
}
.cookieContainer {
position: fixed;
z-index: 10001;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
background: rgba(1, 1, 1, .2);
margin-top: 0;
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
}
.cookieContainer-popup {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60vw;
height: 550px;
max-width: 1024px;
max-height: 600px;
min-height: 525px;
background-color: rgba(250, 250, 250, 1);
z-index: 999;
box-shadow: 0 4px 10px 2px rgba(0, 0, 0, .12);
border-radius: 20px 20px 0 0 !important;
}
.cookieContainer-popupHeader {
/* border-top-left-radius: calc(0 * 16px) !important; */
/* border-top-right-radius: calc(0 * 16px) !important; */
border-radius: 20px 20px 0 0 !important;
}
.cookieContainer-popupHeader {
font-size: 1.4rem;
line-height: 1.78;
padding: 20px 32px 16px;
background-color: var(--cb-greenbottle);
color: var(--cb-cream);
}
.cookieContainer-popupBtn, .lookbook__imageContainerList--name {
border-bottom-left-radius: calc(0 * 16px) !important;
border-bottom-right-radius: calc(0 * 16px) !important;
border-radius: 0 0 20px 20px !important;
}
.cookieContainer-popupBtn {
display: flex;
align-items: flex-end;
height: 75px;
background-color: rgba(250, 250, 250, 1);
padding: 0 32px 15px;
}
.cookieContainer-popupOptions-containerHeader div .cookieOption-StillActive {
background-color: var(--cb-cream);
cursor: auto;
}
.cookieContainer-popupOptions-containerHeader div .cookieOption-StillActive::after {
left: 21px;
background-color: rgba(255, 255, 255);
}
.cookieContainer-popupOptions-containerHeader div .cookieOption-inactive {
background-color: var(--cb-greenbottle);
}
.cookieContainer-popupOptions-containerHeader div .cookieOption::after {
content: "";
transition: all .3s ease-in-out;
content: "";
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: var(--cb-cream);
top: 4px;
}
.cookieContainer-popupOptions-containerHeader div .cookieOption-StillActive::after {
left: 21px;
background-color: rgba(255, 255, 255);
}
.cookieContainer-popupOptions-containerHeader div .cookieOption-active {
background-color: var(--cb-cream);
}
.cookieContainer-popupOptions-containerHeader div .cookieOption-active::after {
left: 21px;
background-color: #fff;
}
body
{
background-color: #fafafa !important;
color: #373D3D;
}
body.cb-body-subpage
{
/* Każdy gradient ma promień zdefiniowany w stopie transparent */
background-image:
radial-gradient(circle at var(--g1x) var(--g1y), color-mix(in oklab, var(--cat1) 15%, transparent) 0, transparent calc(var(--r1) * 0.7)),
radial-gradient(circle at var(--g2x) var(--g2y), color-mix(in oklab, var(--cat2) 20%, transparent) 0, transparent calc(var(--r2) * 0.7)),
radial-gradient(circle at var(--g3x) var(--g3y), color-mix(in oklab, var(--cat4) 20%, transparent) 0, transparent calc(var(--r3) * 0.7)),
radial-gradient(circle at var(--g4x) var(--g4y), color-mix(in oklab, var(--cat3) 30%, transparent) 0, transparent calc(var(--r4) * 0.7));
/* NIE używamy background-size – brak przycinania */
background-position:
var(--g1x) var(--g1y),
var(--g2x) var(--g2y),
var(--g3x) var(--g3y),
var(--g4x) var(--g4y);
background-repeat: no-repeat;
/* Dwie warstwy „fixed”, dwie „scroll” */
background-attachment: fixed, scroll, scroll, fixed;
}
.cb-header-main
{
position: absolute;
}
.headerSection .headerSection__logo.cb-header-logo
{
left: 15px;
width: 65px;
height: 120px;
transform: none;
margin-top: 0;
justify-content: flex-start;
align-items: flex-start;
}
.headerSection__categories.headerSection__categories__desktop.cb-categories-rail
{
margin: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 5px;
border: 1px solid #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
}
.headerSection .mainCategories__categories-wrapper {
margin: 2px 1%;
padding: 15px 2%;
}
.headerSection .headerSection__iconsMenu
{
font-size: 14px;
padding: 0;
position: relative;
top: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
}
.topBanner__text-content
{
color: #fff;
font-weight: bold;
}
.headerSection
{
position: absolute;
}
.headerSection::after{
content: "";
position: absolute; inset: 0;
pointer-events: none;
/* Twój gradient "po zablokowaniu" */
background: linear-gradient(0deg, transparent 30%, rgba(26, 66, 66, 0.2));
opacity: 0;                         /* start: niewidoczny */
transition: opacity 0.3s ease-out;  /* płynna zmiana */
z-index: -1;                        /* pod zawartością headera */
}
.headerSection__categories.headerSection__categories__desktop.cb-categories-rail {
margin: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 5px;
border: 1px solid #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
width: calc(90% - 15px);
justify-self: end;
left: 10%;
display: flex;
flex-direction: row;
justify-content: right;
padding: 0 15px 0 0;
}
.headerSection .mainCategories {
text-align: center;
font-size: 18px;
font-weight: 700;
color: var(--cb-greenbottle);
margin: 0;
display: flex;
width: -webkit-fill-available;
justify-self: center;
}
.headerSection .mainCategories__categories-wrapper
{
background: rgba(255,255,255,0);
border-radius: 5px;
transition: all ease-out 0.3s;
}
.headerSection .mainCategories__categories-wrapper:hover {
background: rgba(26, 66, 67, 1);
color: #FFDCB7;
background: -webkit-linear-gradient(0deg, rgba(1, 46, 46, 1) 0%, rgba(29, 92, 92, 1) 100%);
background: -moz-linear-gradient(0deg,rgba(1, 46, 46, 1) 0%, rgba(29, 92, 92, 1) 100%);
background: linear-gradient(0deg, rgba(1, 46, 46, 1) 0%, rgba(29, 92, 92, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#012E2E", endColorstr="#1D5C5C", GradientType=0 );
}
.cartItemsList-btn {
position: relative;
white-space: nowrap;
}
.headerSection .header__icon svg
{
width: 20px;
position: relative;
height: 18px;
top: 5px;
fill: var(--cb-greenbottle);
stroke: var(--cb-greenbottle);
stroke-linecap: round;
stroke-width: 20px;
stroke-linejoin: bevel;
}
.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text {
display: inline-block;
font-weight: 700;
color: var(--cb-greenbottle);
}
.headerSection .headerSection__shopData
{
font-size: 16px;
font-weight: 500;
color: var(--cb-greenbottle);
}
.headerSection.frozenHeader {
position: fixed !important;
top: 0;
box-shadow: none !important;
z-index: 99;
min-height: 75px;
transition: all 0.3s ease-out;
}
.headerSection.frozenHeader::after{
opacity: 1; /* płynne „wjechanie” gradientu */
}
.headerSection .headerSection__logo.cb-header-logo {
filter: invert() !important;
transition: all ease-in-out 0.3s;
}
@media only screen and (min-width: 769px) {
.headerSection.headerSection__bg.frozenHeader .headerContainer>.headerSection__row .headerMainMenu--showOnDesktop {
display: none !important;
}
}
.headerSection.frozenHeader .headerSection__categories.headerSection__categories__desktop.cb-categories-rail
{
margin-top: 10px;
}
.headerSection.frozenHeader .headerContainer>.scrollHeader .headerSection__iconsMenu {
top: auto;
}
.headerSection.frozenHeader .headerSection__logo.cb-header-logo {
filter: none !important;
}
@media only screen and (max-width: 768px) {
.headerSection .headerSection__categories__desktop.cb-categories-rail {
display: none;
}
.headerSection__logo img, .headerSection__logo svg {
max-height: 70px;
max-width: 40px;
width: auto;
background: transparent !important;
}
}
@media screen and (min-width: 769px) {
.headerSection .headerSection__logo img, .headerSection .headerSection__logo svg {
max-height: 100px;
width: auto;
max-width: 200px;
background-color: initial;
}
.headerSection.headerSection__bg .headerContainer>.headerSection__row {
min-height: 75px;
}
.headerSection__categories {
position: relative;
margin-top: 0;
}
.headerSection .mainCategories {
position: relative;
margin: 0;
}
}
@media screen and (min-width: 1601px) {
.headerSection .headerSection__iconsMenu {
right: 0 !important;
}
}
/* Nawigacja zawsze nad płótnem Slicebox i overlayem */
.sb-wrapper .sb-nav{
position:absolute; inset:0;
pointer-events:none; z-index: 50;
}
.sb-wrapper .sb-nav .sb-btn{
pointer-events:auto;
position:absolute; top:50%; transform:translateY(-50%);
width:44px; height:44px; border-radius:50%; border:0;
background:rgba(0,0,0,.35); color:#fff; cursor:pointer;
}
.sb-wrapper .sb-nav .sb-btn-prev{ left:12px; }
.sb-wrapper .sb-nav .sb-btn-next{ right:12px; }
/* Overlay do cross-fade ma być POD nawigacją */
.sb-coverfade{
position:absolute; inset:0;
z-index: 40;            /* było 55 – obniżamy poniżej .sb-nav (50) */
pointer-events:none;
opacity:0;
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
transition: opacity 220ms ease;
}
.recommended-products-border
{
text-align: center !important;
border: none !important;
margin: 5rem 0 3rem !important;
}
.recommended-products-title {
background: none !important;
padding: 0 !important;
bottom: 0 !important;
position: relative !important;
font-size: 3rem !important;
line-height: 3rem !important;
display: inline-block !important;
color: #373D3D !important;
font-weight: 700 !important;
max-width: 70%;
text-align: left;
}
@media screen and (max-width: 1199px) {
.recommended-products-border
{
margin: 3rem 0 1rem !important;
}
}
.recommended-products-title b
{
color: var(--cat4);
}
.cb-container-some .recommended-products-title b
{
color: var(--cat1);
}
.cbhomepage-proporsal
{
margin-top: 4rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(255,255,255,1);
}
.cbhomepage-proporsal .recommended-products1 .recommended-products-border
{
display: flex;
flex-direction: row;
}
.recommended-products1 .recommended-products-border.cbtitle-changer {
text-align: center;
border: none !important;
margin: 3rem 0 2rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.recommended-products1 .recommended-products-border.cbtitle-changer a
{
color: var(--cb-greenbottle);
font-weight: bold;
background-color: #fff;
border: 2px solid var(--cb-greenbottle);
display: block;
padding: 13px 23px;
border-radius: 40px;
box-shadow: 0 0 0 rgba(255, 212, 184, 0);
transition: all ease-out 0.3s;
}
.recommended-products1 .recommended-products-border.cbtitle-changer a::after
{
content: "";
display: inline-block;
width: 0;
margin: 0;
line-height: 16px;
font-size: 16px;
transition: all ease 0.6s;
}
.recommended-products1 .recommended-products-border.cbtitle-changer a:hover::after
{
width:16px;
margin-left: 5px;
animation: cb-stars var(--cb-icon-anim-dur) steps(1, end)
var(--cb-icon-expand-dur) forwards;
}
.recommended-products1 .recommended-products-border.cbtitle-changer a:hover
{
color: var(--cb-bg-hero);
box-shadow: 0 0 75px rgba(255, 212, 184, 0.6);
background-color: var(--cb-greenbottle);
}
.product-item__placeholder {
border-radius: 5px !important;
}
.breadcrumbs-wrapper {
margin: 0;
width: 100%;
height: auto;
background: var(--cb-cream);
border-radius: 0 0 10vw 10vw;
padding-top: 6rem;
}
@media (max-width:768px)
{
.breadcrumbs-wrapper
{
padding-top: 9rem;
}
}
.productsList__gridView-js .product-item-third, .product-list__gridView-js .product-item-third
{
transition: all ease-out 0.6s;
}
.product-item__placeholder-third .product-item-third {
border-radius: 5px !important;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.05);
transition: all ease-out 0.4s;
height: 100%;
width: 100%;
padding: 0;
overflow: hidden;
}
.recommended-products1 .product-item {
border-radius: 5px !important;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.05);
transition: all ease-out 0.4s;
height: 100%;
max-width: 95%;
padding: 0;
overflow: hidden;
}
.recommended-products1 .product-item:hover {
border-radius: 5px !important;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 1);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0);
}
@media screen and (min-width: 769px) {
.productsList__gridView-js .product-item-third:hover, .product-list__gridView-js .product-item-third:hover
{
position: relative;
left: 0;
top: 0;
z-index: 3;
box-shadow: none !important;
width: 100%;
background:rgba(255,255,255,1);
transform: none !important;
}
.product-item__placeholder-third:hover .product-item-third {
clear: both;
left: 0;
top: 0;
z-index: 2;
box-shadow: none;
position: absolute;
transform: none !important;
padding: 0;
width:100%;
}
.productsList__gridView-js .product-item-third:hover .product-item__shortDescription, .product-list__gridView-js .product-item-third:hover .product-item__shortDescription {
visibility: hidden !important;
height: 0 !important;
margin-bottom: 0 !important;
}
}
.productsList__gridView-js .product-item-third .product-item__addToCart, .product-list__gridView-js .product-item-third .product-item__addToCart {
visibility: visible;
display: flex;
width: 30px;
height: 30px;
padding: 8px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.product-list__gridView-js .product-item-third:hover .product-item__addToCart
{
transition: none;
}
.product-list-js .productListNameTooltip {
display: none;
background-color: rgba(255, 255, 255, 0.75);
position: fixed;
width: auto;
min-height: 25px;
max-width: 200px;
padding: 5px 10px;
z-index: 100;
font-size: 14px;
margin-top: -20px;
color: var(--cb-text);
line-height: inherit;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}
.productsList__gridView-js .product-item__placeholder, .product-list__gridView-js .product-item__placeholder {
margin-bottom: 25px;
position: relative;
height: 435px;
}
.productsList__gridView-js .product-item-third .product-item__link, .product-list__gridView-js .product-item-third .product-item__link {
margin: 0 auto 5px auto;
height: 312px;
}
.product-item-third .product-item__link, .product-item:not(.product-item-pl) .product-item__link {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.recommended-products1 .product-item.hover img
{
max-height: 100%;
position: absolute;
}
.productsList__gridView-js .product-item-third.hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(2), .product-list__gridView-js .product-item-third.hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(2) {
display: block;
bottom: -200%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: all ease-in 0.3s;
}
.recommended-products1 .product-item.hover img:nth-child(2) {
display: block;
bottom: -100%;
width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: center center;
transition: all ease-in 0.3s;
}
.productsList__gridView-js .product-item-third.hover:hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(2), .product-list__gridView-js .product-item-third.hover:hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(2), .recommended-products1 .product-item.hover:hover img:nth-child(2) {
display: block;
bottom: 0%;
transition: all ease-out 0.5s;
}
.productsList__gridView-js .product-item-third.hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(1), .product-list__gridView-js .product-item-third.hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(1), .recommended-products1 .product-item.hover img:nth-child(1) {
display: block;
top: 0%;
width: 100%;
transition: all ease-in 0.3s;
height: 100%;
object-fit: cover;
object-position: center center;
}
.productsList__gridView-js .product-item-third.hover:hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(1), .product-list__gridView-js .product-item-third.hover:hover img:not(.product-item__phantom-img):not(.tmpImage):nth-child(1) {
display: block;
top: -200% !important;
transition: all ease-out 0.5s;
}
.recommended-products1 .product-item.hover:hover img:nth-child(1) {
display: block;
top: -100% !important;
transition: all ease-out 0.5s;
}
.productsList__gridView-js .product-item-third .product-item__link .product-item__image, .product-list__gridView-js .product-item-third .product-item__link .product-item__image {
width: auto;
height: 100%;
max-width: 100%;
display: block;
margin: auto;
border-radius: 5px !important;
overflow: hidden;
}
.product-item:not(.product-item-pl) .product-item__image
{
width: 100%;
height: 100%;
max-width: 100%;
display: block;
margin: auto;
border-radius: 5px !important;
overflow: hidden;
position: relative;
}
.productsList__gridView-js .product-item-third .product-item__description, .product-list__gridView-js .product-item-third .product-item__description {
width: calc(100% - 30px);
padding: 10px 15px 0;
}
.product-item:not(.product-item-pl) .product-item__description
{
width: calc(100% - 30px);
padding: 10px 15px 0;
text-align: left;
}
.product-item:not(.product-item-pl) .price
{
font-weight: 500;
font-size: 16px;
line-height: 32px;
letter-spacing: 1.4px;
display: inline-block;
text-align: left;
color: var(--cb-text);
}
.product-item:not(.product-item-pl) .product-item__description h4
{
width: 100%;
height: 2.3rem;
max-height: none;
margin-bottom: 5px;
letter-spacing: 0.1px;
margin-top: 0;
text-align: left;
white-space: initial;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 1rem;
line-height: 1.1rem;
color: var(--cb-tiles-h2);
font-weight: 500;
text-transform: uppercase;
}
.productsList__gridView-js .product-item-third .product-item__priceAndExtraButton, .product-list__gridView-js .product-item-third .product-item__priceAndExtraButton {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 10px auto 0;
height: fit-content;
position: relative;
}
.productsList__gridView-js .product-item-third .product-item__description h2, .product-list__gridView-js .product-item-third .product-item__description h2 {
width: 100%;
height: 2.3rem;
max-height: none;
margin-bottom: 5px;
letter-spacing: 0.1px;
margin-top: 0;
white-space: initial;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 1rem;
line-height: 1.1rem;
color: var(--cb-tiles-h2);
font-weight: 500;
text-transform: uppercase;
}
.productsList__gridView-js .product-item-third .product-item__priceAndDiscountsContainer, .product-list__gridView-js .product-item-third .product-item__priceAndDiscountsContainer {
display: flex;
justify-content: start;
align-items: unset;
flex-direction: column;
width: calc(100% - 30px);
padding: 0 15px;
}
.cb-button-open-more {
display: inline-block;
padding: 9px 16px;
border: 2px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg,var(--cb-tiles-h2),var(--cb-tiles-h2)) border-box;
border: 2px solid transparent;
background-size: 100% 100%, 200% 100%;
background-position: 0 0, 0 0;
transition: color 0.8s ease-in, background-position .45s ease-out;
border-radius: 20px;
color: var(--cb-tiles-h2);
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem !important;
}
span.cb-button-open-more
{
float: right;
}
/* Konfigurowalne czasy (opcjonalnie) */
:root{
--cb-icon-expand-dur: 320ms;   /* czas rozsuwania ikony */
--cb-icon-anim-dur:   700ms;   /* czas sekwencji znaków */
}
/* Kontener (pomocniczo) */
.cb-button-open-more{
display: inline-flex;
align-items: center;
gap: .4rem; /* jeśli chcesz mały odstęp od tekstu/przycisku */
}
/* Stan bazowy: ikona zwinięta i niewidoczna */
.cb-button-open-more .cb-button-open-more-icon{
display: inline-block;
width: 0;
opacity: 0;
overflow: hidden;            /* ukrywa znak, gdy width:0 */
line-height: 1;
transition:
width var(--cb-icon-expand-dur) ease,
opacity 120ms linear;
will-change: width, opacity;
}
.cb-button-open-more:hover
{
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--cb-tiles-h2) 0%, var(--cb-tiles-h2) 50%, var(--rand) 50%, var(--rand) 100%) border-box;
background-size: 100% 100%, 200% 100%;
background-position: 0 0, 100% 0;
color: var(--rand);
}
/* Wysunięcie na hover rodzica */
.cb-button-open-more:hover .cb-button-open-more-icon{
width: 15px;
opacity: 1;
}
/* Pseudo-element z sekwencją znaków */
.cb-button-open-more .cb-button-open-more-icon::after{
content: '▥';
display: inline-block;
width: 15px;                 /* stałe „okienko” na znak */
text-align: center;
}
/* Start animacji DOPIERO po rozsunięciu (delay = expand-dur) */
.cb-button-open-more:hover .cb-button-open-more-icon::after{
animation: cb-frames var(--cb-icon-anim-dur) steps(1, end)
var(--cb-icon-expand-dur) forwards;
}
/* Klatki kluczowe – kolejne znaki */
@keyframes cb-stars {
0%   { content: '😎'; }
12.5%{ content: '⭐'; }
25%  { content: '❤️'; }
37.5%{ content: '👍'; }
50%  { content: '🏅'; }
62.5%{ content: '😁'; }
75%  { content: '🃏'; }
100% { content: '⭐'; }  /* zostaje na końcu podczas hovera */
}
@keyframes cb-frames {
0%   { content: '◯'; color:var(--cb-tiles-h2); }
12.5%{ content: '♪'; color:var(--cat1); }
25%  { content: '✕'; color:var(--cat2); }
37.5%{ content: '©'; color:var(--cat3); }
50%  { content: '#'; color:var(--cat4); }
62.5%{ content: '▽'; color:var(--cat3); }
75%  { content: '◇'; color:var(--cat1); }
100% { content: '›';  color:var(--rand); }  /* zostaje na końcu podczas hovera */
}
/* Respect: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.cb-button-open-more .cb-button-open-more-icon{
transition: none;
}
.cb-button-open-more:hover .cb-button-open-more-icon{
width: 15px; opacity: 1;
}
.cb-button-open-more:hover .cb-button-open-more-icon::after{
animation: none;
content: '›';
}
}
.breadcrumbs {
list-style: none;
display: block;
margin: 0;
padding: 25px 0 25px;
text-align: center;
width: 100%;
}
.breadcrumbs__piece {
margin-right: 5px;
font-size: 12px;
font-weight: 300;
color: #1A4243;
cursor: pointer;
display: inline-flex;
white-space: nowrap;
}
.breadcrumbs__piece:first-child
{
margin-left: -10px;
}
.breadcrumbs__piece a {
text-decoration: none;
color: #1A4243;
display: inline-block;
padding: 6px 10px;
border-radius: 20px;
border: 1px solid rgba(0,0,0,0);
text-transform: uppercase;
font-weight: 600;
transition: all ease-out 0.3s;
}
.breadcrumbs__piece .separator
{
display: inline-block;
padding: 6px 0;
font-weight: 500;
}
.breadcrumbs__piece a:hover {
border: 1px solid #1A4243;
}
.breadcrumbs__piece--last {
cursor: default;
color: #1a4243;
overflow: hidden;
text-overflow: ellipsis;
display: block;
font-size: 5rem;
line-height: 6.1rem;
font-style: normal;
font-weight: 700;
letter-spacing: 1.2px;
margin-top: 0;
}
.breadcrumbs__piece.breadcrumbs__piece--last.cb-cart-title {
font-size: 2.8rem;
line-height: 3.3rem;
white-space: normal !important;
max-height: 6.6rem;
}
.breadcrumbs__piece--previous {
display: none;
}
.info-banner-2__list.slider .slick-next, .slider .slick-next {
right: -60px;
}
.info-banner-2__list.slider .slick-prev, .slider .slick-prev {
left: -60px;
}
@media screen and (max-width:990px)
{
.info-banner-2__list.slider .slick-next, .slider .slick-next {
right: -40px;
}
.info-banner-2__list.slider .slick-prev, .slider .slick-prev {
left: -40px;
}
}
.info-banner-2__list.slider .slick-prev, .info-banner-2__list.slider .slick-next, .slider .slick-prev, .slider .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 48px;
height: 48px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: var(--cb-tiles-h2);
border: 2px solid var(--cb-tiles-h2) !important;
box-shadow: 0 0 40px rgba(255,255,255,0);
outline: none;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: all ease-out 0.3s;
}
.info-banner-2__list.slider .slick-prev:hover, .slider .slick-prev:hover
{
border: 2px solid var(--cat4) !important;
color: var(--cat4) !important;
background: #fff !important;
box-shadow: -10px 0 20px var(--cat4);
}
.info-banner-2__list.slider .slick-prev:hover::before, .slider .slick-prev:hover::before
{
color: var(--cat4) !important;
}
.info-banner-2__list.slider .slick-next:hover, .slider .slick-next:hover
{
border: 2px solid var(--cat1) !important;
color: var(--cat1);
background: #fff !important;
box-shadow: 10px 0 20px var(--cat1);
}
.info-banner-2__list.slider .slick-next:hover::before, .slider .slick-next:hover::before
{
color: var(--cat1) !important;
}
.info-banner-2__list.slider .slick-next:before, .recommended-products1 .slick-next:before
{
border: solid;
border-width: 0 !important;
display: inline-block;
padding: 7px;
top:50%;
transform: translateY(-50%);
content: "›" !important;
}
.info-banner-2__list.slider .slick-prev:before, .recommended-products1 .slick-prev:before
{
border: solid;
border-width:0 !important;
display: inline-block;
padding: 3px;
top:50%;
transform: translateY(-50%);
content: "‹" !important;
}
.cbhomepage-recomended-news {
background-image: url(img/shadow-slide.webp);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 90% 60%;
padding-bottom: 3rem;
}
.cb-container-some
{
background-image: url(img/newsletter-bg.webp);
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
background-color: #f0f0f0;
padding: 1rem 0 3rem;
border-radius: 10vw;
}
.some-links {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: center;
text-transform: uppercase;
font-weight: bold;
}
.some-link-container a {
display: inline-block;
background: #ffff;
padding: 15px 20px;
margin: 5px 0 0 5px;
border-radius: 25px;
font-weight: bold;
text-transform: lowercase;
}
.some-link-container a.some-link-ig
{
color: #FB3C99;
border: 2px solid #FB3C99;
transition: all ease-out 0.3s;
}
.some-link-container a.some-link-ig:hover
{
background: transparent;
color: #fff;
border: 2px solid #c86bcb;
}
.some-link-container a.some-link-fb
{
color: #1878f1;
border: 2px solid #1878f1;
transition: all ease-out 0.3s;
}
.some-link-container a.some-link-fb:hover
{
background: #1878f1;
color: #fff;
border: 2px solid #1878f1;
}
.some-link-container a.some-link-tt
{
background: #000;
color: #fff;
border: 2px solid #FB3C99;
text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
transition: all ease-out 0.3s;
}
.some-link-container a.some-link-tt:hover
{
background: #000;
color: #fff;
text-shadow: 5px 5px 8px #3CD8FB, -5px -5px 8px #FB3C99;
border: 2px solid #3CD8FB;
}
.cb-ig-section{margin:40px 0}
.cb-ig-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cb-ig-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1200px){.cb-ig-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.cb-ig-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:650px){.cb-ig-grid{grid-template-columns:repeat(2,1fr)}}
.cb-ig-card{background:rgba(255,255,255,.06);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.cb-ig-card-link{display:block;color:inherit;text-decoration:none}
.cb-ig-media-wrap{position:relative;aspect-ratio:1/1;overflow:hidden}
.cb-ig-img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .3s ease}
.cb-ig-card:hover .cb-ig-img{transform:scale(1.04)}
.cb-ig-badge{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:999px;font-size:12px;line-height:1;background:rgba(0,0,0,.55);color:#fff}
.cb-ig-play{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:4px 7px;font-size:12px;display:none}
.cb-ig-card[data-type="VIDEO"] .cb-ig-play{display:inline-block}
.cb-ig-caption{margin:10px 12px 6px;font-size:14px;max-height:3.2em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cb-ig-time{display:block;margin:0 12px 12px;color:#777;font-size:12px}
.newsletter2 {
display: flex;
max-width: 1400px;
margin: 0 auto;
transition: .4s;
padding: 40px 20px;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.05) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 50px 50px 0 0;
box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5);
}
.newsletter2__text-content
{
text-align: left;
}
.newsletter2__title
{
font-size: 32px;
color: var(--cb-text);
}
.newsletter2__title b
{
display: block;
}
.newsletter2__text
{
font-size: 18px;
font-weight: 300;
margin-bottom: 0;
color: var(--cb-text);
}
.newsletter2__form {
width: 60%;
height: 100%;
margin: 0;
padding-top: 35px;
display: block;
}
.newsletter2-wrapper {
width: 100%;
background-color: transparent !important;
border-bottom: none !important;
border-top: none !important;
}
@media screen and (min-width: 971px) {
.newsletter2__inputWrapper {
flex-direction: row;
justify-content: stretch;
align-items: stretch;
}
}
.newsletter2__input-container {
width: auto;
margin: 0;
max-width: 745px;
}
.newsletter2__input-container input[type=email] {
font-size: 16px;
border: 1px solid rgba(255, 255, 255, 1);
box-sizing: border-box;
margin: 0;
outline: none;
max-width: 495px;
width: calc(100% - 245px);
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.6);
text-align: left;
border-radius: 30px 0 0 30px;
}
.newsletter2__btn-subscribe {
padding: 13px 12px;
min-width: 200px;
display: inline-block;
box-sizing: border-box;
font-size: 14px;
border-radius: 0 35px 30px 0 !important;
background: rgba(70, 195, 179, 0.65);
border: 1px solid rgba(255, 255, 255, 0.8);
transition: all ease-out 0.3s;
}
.cb-ig-section {
margin:40px 0
}
.cb-ig-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px
}
.cb-ig-grid {
display: flex;
flex-direction: row;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width:1200px) {
.cb-ig-grid {
grid-template-columns: repeat(4, 1fr)
}
}
@media (max-width:900px) {
.cb-ig-grid {
grid-template-columns: repeat(3, 1fr)
}
}
@media (max-width:650px) {
.cb-ig-grid {
grid-template-columns: repeat(2, 1fr)
}
}
.cb-ig-card {
display: block;
background: rgba(255, 255, 255, .06);
border-radius: 5px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, .06), 30px -30px 200px rgba(250, 210, 122, 0), -40px -40px 500px rgb(195, 102, 201, 0), 0px 50px 400px rgb(237, 102, 178, 0);
z-index: 1;
position: relative;
flex-grow: 1;
transition: all ease-out 0.4s;
flex-basis: 180px;
flex-shrink: 0;
}
.cb-ig-card-link {
display: block;
color: inherit;
text-decoration: none
}
.cb-ig-media-wrap {
position: relative;
aspect-ratio: 1/1;
overflow: hidden
}
.cb-ig-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
transition: transform .3s ease
}
.cb-ig-card:hover {
box-shadow:0 6px 20px rgba(0, 0, 0, 0), -40px -40px 50px rgba(250, 210, 122, 0.4), 0px 50px 60px rgb(195, 102, 201, .3), 30px -30px 90px rgb(237, 102, 178, .7);
}
.cb-ig-card:hover .cb-ig-img {
transform: scale(1.04)
}
.cb-ig-badge {
position: absolute;
left: 8px;
top: 8px;
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
line-height: 1;
background: rgba(0, 0, 0, .55);
color: #fff
}
.cb-ig-play {
position: absolute;
right: 8px;
bottom: 8px;
background: rgba(0, 0, 0, .55);
color: #fff;
border-radius: 999px;
padding: 4px 7px;
font-size: 12px;
display: none
}
.cb-ig-card[data-type="VIDEO"] .cb-ig-play {
display: inline-block
}
.cb-ig-caption {
margin: 10px 12px 6px;
font-size: 14px;
max-height: 3.2em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.cb-ig-time {
display: block;
margin: 0 12px 12px;
color: #777;
font-size: 12px
}
@media screen and (min-width: 769px) {
.gridMainElement {
margin-bottom: 20px;
}
}
.cbhomepage-proporsal .sliderItem {
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05);
margin-top: 5px;
margin-bottom: 10px;
padding: 40px 24px;
text-align: center;
align-items: center;
transition: all ease-out 0.3s;
}
.cbhomepage-proporsal .sliderItem:nth-child(1)
{
background: linear-gradient(-20deg, var(--cat1) -400%, transparent 50% 85%, var(--cat1) 300%);
background-size: 100% 100%;
}
.cbhomepage-proporsal .sliderItem:nth-child(2)
{
background: linear-gradient(-20deg, var(--cat4) -400%, transparent 50% 85%, var(--cat4) 300%);
background-size: 100% 100%;
}
.cbhomepage-proporsal .sliderItem:nth-child(3)
{
background: linear-gradient(-20deg, var(--cat2) -400%, transparent 50% 85%, var(--cat2) 300%);
background-size: 100% 100%;
}
.cbhomepage-proporsal .sliderItem:nth-child(1):hover
{
/*box-shadow: 1px 1px 15px rgba(255,45,138,0.2);
background-size: 200% 200%;*/
}
.cbhomepage-proporsal .sliderItem:nth-child(2):hover
{
/*box-shadow: 1px 1px 15px rgba(103,240,222,0.2);
background-size: 200% 200%;*/
}
.cbhomepage-proporsal .sliderItem:nth-child(3):hover
{
/*box-shadow: 1px 1px 15px rgba(21,141,103,0.2);
background-size: 200% 200%;*/
}
.cbhomepage-proporsal.blog-wrapper .otherPosts__post-three-and-four-posts
{
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
overflow: clip;
}
.cbhomepage-proporsal.blog-wrapper .otherPosts__post .image-container
{
width: 100%;
height: auto;
border-radius: 5px;
overflow: clip;
}
.cbhomepage-proporsal.blog-wrapper .otherPosts__post .image-container a
{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.cbhomepage-proporsal.blog-wrapper .otherPosts__post .data-container {
display: flex;
flex-direction: column;
padding: 15px;
}
.cbhomepage-proporsal.blog-wrapper .otherPosts__post .data-container .title {
font-weight: 500;
text-align: left;
font-size: 16px;
color: var(--cb-text);
line-height: 24px;
letter-spacing: 1.2px;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 0 10px 0;
text-transform: uppercase;
font-weight: bold;
}
.footer {
background-color: #1a4243;
margin-top: 2rem;
padding-top: 30px;
border-radius: 10vw 10vw 0 0;
}
.footer__section {
color: #fff;
margin-bottom: 38px;
}
.footer__section-title {
text-transform: uppercase;
font-weight: bold;
color: var(--cb-cream);
font-size: 1.6rem;
}
.footer__section a
{
text-transform: uppercase;
}
.footer__section svg
{
fill:var(--cb-cream);
}
.footer__section ul {
font-size: 1rem;
}
.footer__copyright {
padding: 14px 0px;
width: 100%;
background-color: #1a4243;
color: #fffce9;
font-size: 12px;
box-sizing: border-box;
text-align: center;
}
.footer .totalAndSubtotalPricesInformation {
display: block;
color: #fffce9;
font-size: 12px;
margin: 20px auto 0px auto;
max-width: 1400px;
width: 100%;
text-align: center;
}
.configMessages.configMessages__footer {
bottom: 0;
left: 15px;
right: 15px;
width: auto;
padding-right: 35px;
border-radius: 20px 20px 0 0;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 -5px 100px rgba(0, 0, 0, 0.3);
}
.productDetails
{
background-color: transparent;
}
.productDetails-wrapper {
background-color: transparent !important;
}
.productDetails-section--top {
background-color: transparent !important;
}
.productDetails-section--left {
background-color: transparent !important;
}
.productDetails-section--innerLeft {
background-color: rgba(255, 255, 255, 0.85);
border-radius: 5px;
border: 1px solid #fff;
overflow: clip;
padding: 0 0 10px;
}
.productDetails-section--innerRight
{
background-color:transparent;
}
.productDetails-section--innerCenter {
background-color:transparent !important;
margin-top: 20px;
}
.productDetails-section--fixed {
width: calc(100% - 30px);
padding: 20px 15px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05);
background-color: rgba(255, 255, 255, 0.85);
border: 1px solid #fff;
}
.productDetails-attributes--quantity button {
border: 1px solid #fff;
text-align: center;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 1);
position: relative;
transition: 300ms;
}
.button-minus-add-product
{
border-radius: 20px 0 0 20px !important;
}
.button-plus-add-product
{
border-radius: 0 20px 20px 0 !important;
}
.productDetails-attributes--quantity button.button-minus-add-product:hover {
cursor: pointer;
border-color: rgb(103 240 222) !important;
box-shadow: -10px 0 20px rgba(103, 240, 222, 0.3) !important;
}
.productDetails-attributes--quantity button.button-plus-add-product:hover {
cursor: pointer;
border-color: rgb(255 45 138) !important;
box-shadow: 10px 0 20px rgba(255, 45, 138, 0.3)  !important;
}
.productDetails-attributes--quantity button.button-minus-add-product svg
{
fill: var(--cat4) !important;
}
.productDetails-attributes--quantity button.button-plus-add-product svg
{
fill:var(--cat1)
}
.productDetails-attributes--quantity input {
width: 45px;
height: 44px;
text-align: center;
border: 1px solid #fff !important;
background-color: rgba(255, 255, 255, 0.5) !important;
font-weight: bold;
color: var(--cb-greenbottle);
}
.productDetails-attributes--quantity input:focus
{
background: rgba(255,255,255,1) !important;
border: 1px solid var(--cb-cream) !important;
}
.productDetails-detailsButtons {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 40px;
border-bottom: none !important;
}
.productDetails-detailsButtons--button {
min-width: 20%;
height: 60px;
padding: 0 20px;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: 1.2px;
color: var(--cb-greenbottle);
line-height: 60px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
margin-bottom: -1px;
border-radius: 5px 5px 0 0;
transition: all ease-in 0.3s;
margin: 0 1px 0;
}
.productDetails-detailsButtons--button:nth-child(1)
{
border-radius: 5px 5px 0 5px !important;
}
.productDetails-detailsButtons--button:hover
{
background-color: rgba(255,255,255,1);
}
.productDetails .productDetails-detailsButtons--button.activeButton
{
border-top-left-radius:5px !important;
border-top-right-radius:5px !important;
}
.productDetails-detailsButtons--button.activeButton {
border: 1px solid #fff;
border-bottom: inherit !important;
background-color: rgba(255, 255, 255, 1);
z-index: 2;
}
.productDetails-detailsButtons--button {
border: 1px solid rgba(255,255,255,0.85);
background-color: rgba(255,255,255,0.6);
border-bottom: none;
}
.productDetails-content {
margin: 0 0 70px !important;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1));
border-radius: 5px;
border: 1px solid #fff;
padding: 2rem 2rem !important;
}
.productDetails-setList--border, .productDetails-recent--border, .productDetails-related--border {
display: none !important;
width: 100%;
border:none !important;
position: static;
top: 0;
transform: translate(0, -50%);
left: 0;
right: 0;
margin: auto;
}
.productDetails-setList--title span:not(.productDetails-setList--border):not(.productDetails-recent--border):not(.productDetails-related--border), .productDetails-recent--title span:not(.productDetails-setList--border):not(.productDetails-recent--border):not(.productDetails-related--border), .productDetails-related--title span:not(.productDetails-setList--border):not(.productDetails-recent--border):not(.productDetails-related--border) {
background-color: transparent;
z-index: 1;
}
.productDetails-setList--title, .productDetails-recent--title, .productDetails-related--title
{
background: none !important;
padding: 0 !important;
bottom: 0 !important;
position: relative !important;
font-size: 3rem !important;
display: inline-block !important;
color: #373D3D !important;
font-weight: 700 !important;
}
.productDetails-setList--title b, .productDetails-recent--title b, .productDetails-related--title b
{
color: var(--cat1);
}
.productDetails-setList--set .slick-track, .productDetails-setList--recentList .slick-track, .productDetails-setList--relatedList .slick-track, .productDetails-recent--set .slick-track, .productDetails-recent--recentList .slick-track, .productDetails-recent--relatedList .slick-track, .productDetails-related--set .slick-track, .productDetails-related--recentList .slick-track, .productDetails-related--relatedList .slick-track {
align-items: unset;
padding: 20px 0;
}
.productDetails-recent .slick-slide, .productDetails-related .slick-slide {
margin: 10px 12px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 0 0 10px 0 !important;
height: fit-content !important;
transition: all ease-out 0.3s;
}
.productDetails-recent .slick-slide:hover, .productDetails-related .slick-slide:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 1);
}
.productDetails-setList--set__item--image, .productDetails-setList--recentList__item--image, .productDetails-setList--relatedList__item--image, .productDetails-recent--set__item--image, .productDetails-recent--recentList__item--image, .productDetails-recent--relatedList__item--image, .productDetails-related--set__item--image, .productDetails-related--recentList__item--image, .productDetails-related--relatedList__item--image {
height: auto;
width: 100%;
display: block;
aspect-ratio: 1 / 1;
}
.productDetails-setList--set__item--name, .productDetails-setList--recentList__item--name, .productDetails-setList--relatedList__item--name, .productDetails-recent--set__item--name, .productDetails-recent--recentList__item--name, .productDetails-recent--relatedList__item--name, .productDetails-related--set__item--name, .productDetails-related--recentList__item--name, .productDetails-related--relatedList__item--name {
height: 2.2rem;
max-height: none;
margin-bottom: 5px;
letter-spacing: 0.1px;
margin-top: 10px;
text-align: left;
white-space: initial;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 1rem;
line-height: 1.1rem;
color: var(--cb-tiles-h2);
font-weight: 500;
text-transform: uppercase;
padding: 10px;
}
.productDetails-setList--set__item--image img, .productDetails-setList--recentList__item--image img, .productDetails-setList--relatedList__item--image img, .productDetails-recent--set__item--image img, .productDetails-recent--recentList__item--image img, .productDetails-recent--relatedList__item--image img, .productDetails-related--set__item--image img, .productDetails-related--recentList__item--image img, .productDetails-related--relatedList__item--image img {
max-height: 100% !important;
height: 100% !important;
max-width: 100%;
margin:0;
aspect-ratio: 1;
object-fit: cover;
}
.productDetails-setList--set__item--itemPrices, .productDetails-setList--recentList__item--itemPrices, .productDetails-setList--relatedList__item--itemPrices, .productDetails-recent--set__item--itemPrices, .productDetails-recent--recentList__item--itemPrices, .productDetails-recent--relatedList__item--itemPrices, .productDetails-related--set__item--itemPrices, .productDetails-related--recentList__item--itemPrices, .productDetails-related--relatedList__item--itemPrices {
display: block;
text-align: left;
position: static;
bottom: 0;
left: 0;
flex-wrap: unset;
padding: 10px;
}
.productDetails-setList--set__item--price, .productDetails-setList--set__item--redprice, .productDetails-setList--recentList__item--price, .productDetails-setList--recentList__item--redprice, .productDetails-setList--relatedList__item--price, .productDetails-setList--relatedList__item--redprice, .productDetails-recent--set__item--price, .productDetails-recent--set__item--redprice, .productDetails-recent--recentList__item--price, .productDetails-recent--recentList__item--redprice, .productDetails-recent--relatedList__item--price, .productDetails-recent--relatedList__item--redprice, .productDetails-related--set__item--price, .productDetails-related--set__item--redprice, .productDetails-related--recentList__item--price, .productDetails-related--recentList__item--redprice, .productDetails-related--relatedList__item--price, .productDetails-related--relatedList__item--redprice {
font-weight: 500;
font-size: 16px;
line-height: 32px;
letter-spacing: 1.4px;
display: inline-block;
text-align: left;
color: var(--cb-text);
}
.productDetails .slick-next {
right: 10px;
font-size: 0;
line-height: 0;
position: absolute;
top: -70px;
display: block;
width: 40px;
height: 40px;
padding: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
cursor: pointer;
color: var(--cb-tiles-h2) !important;
border: 2px solid var(--cb-tiles-h2) !important;
outline: none;
transition: all ease-out 0.3s;
}
.productDetails .slick-prev {
left: 10px;
font-size: 0;
line-height: 0;
position: absolute;
top: -70px;
display: block;
width: 40px;
height: 40px;
padding: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
cursor: pointer;
color: var(--cb-tiles-h2) !important;
border: 2px solid var(--cb-tiles-h2) !important;
outline: none;
transition: all ease-out 0.3s;
}
.productDetails .slick-next:hover {
border: 2px solid var(--cat1) !important;
color:var(--cat1);
background: #fff;
box-shadow: 10px 0 20px rgba(255, 45, 138, 0.3)  !important;
}
.productDetails .slick-prev:hover {
border: 2px solid var(--cat1) !important;
color:var(--cat1);
background: #fff;
box-shadow: -10px 0 20px rgba(255, 45, 138, 0.3)  !important;
}
.productDetails .slick-prev:before, .productDetails .slick-next:before {
width: 4px;
height: 4px;
top: 14px;
content: " ";
transition: all ease-out 0.3s;
}
.productDetails .slick-prev:before
{
margin-right: -15%;
}
.productDetails .slick-next:before
{
margin-left: -15%;
}
.productDetails .slick-next:hover::before
{
margin-left: 0;
border-color: inherit !important;
}
.productDetails .slick-prev:hover::before
{
margin-left: 0;
border-color: inherit !important;
}
.productDetails-section--right
{
background: transparent !important;
}
.cb-oldcart-controler
{
width: 100%;
margin: 0 auto 50px;
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.cbpdp__meta .productDetails-options--option {
display: flex;
margin-bottom: 10px;
width: auto;
margin-right: 8%;
}
.cbpdp__meta .productDetails-options--option {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 3px;
width: auto;
margin-right: 0;
padding: 6px 10px;
border: 1px solid transparent;
border-radius: 25px;
font-weight: 500;
color: #6c7373;
text-transform: uppercase;
transition: all ease-out 0.3s;
}
.cbpdp__meta .productDetails-options--option:hover {
border: 1px solid var(--cb-greenbottle);
color: var(--cb-greenbottle);
}
.cbpdp__meta .productDetails-options--option svg {
fill: var(--cb-greenbottle);
width: 18px;
height: 18px;
}
.cbpdp__meta .productDetails-options--option span {
color: inherit !important;
font-size: 0.65rem;
margin-left: 4px;
}
.popupDialog, .popup-dialog {
background-color: rgba(0, 0, 0, .2);
bottom: 0;
left: 0;
overflow: hidden;
padding: 10%;
position: fixed;
right: 0;
top: 0;
z-index: 100;
margin-top: 0;
display: none;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.popupDialog .share-container, .popup-dialog .share-container {
max-width: unset;
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
right: 0;
margin: auto;
background-color: rgba(255, 255, 255, 0.8);
min-height: auto;
box-sizing: border-box;
border: 1px solid #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
.popupDialog .share-container .form__header, .popup-dialog .share-container .form__header, .popup-dialog .form-container .form__header, .popupDialog .form-container .form__header
{
opacity: 1 !important;
font-weight: bold;
text-transform: uppercase;
color: var(--cb-greenbottle);
}
.popupDialog .popupDialog__closeBtn, .popupDialog .close-button, .popupDialog .close-button-in-popup, .popupDialog .hide-order-details-popup, .popup-dialog .popupDialog__closeBtn, .popup-dialog .close-button, .popup-dialog .close-button-in-popup, .popup-dialog .hide-order-details-popup {
color: var(--cb-greenbottle);
font-size: 24px;
right: 5px;
position: absolute;
top: 5px;
padding: 10px;
display: flex;
cursor: pointer;
z-index: 10;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
border: 2px solid transparent;
border-radius: 25px;
background: #fff;
transition: all ease-out 0.3s;
}
.popupDialog .popupDialog__closeBtn:hover, .popupDialog .close-button:hover, .popupDialog .close-button-in-popup:hover, .popupDialog .hide-order-details-popup:hover, .popup-dialog .popupDialog__closeBtn:hover, .popup-dialog .close-button:hover, .popup-dialog .close-button-in-popup:hover, .popup-dialog .hide-order-details-popup:hover
{
background: #fff;
border: 2px solid var(--cat1);
color: var(--cat1) !important;
}
.popupDialog .share-icons a, .popupDialog .share-icons div, .popup-dialog .share-icons a, .popup-dialog .share-icons div {
margin: 0 0 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--cb-greenbottle);
transition: 300ms;
text-align: center;
padding: 10px;
border-radius: 5px;
width: 70%;
background: #fff;
}
.popupDialog .share-icons a:hover, .popupDialog .share-icons div:hover, .popup-dialog .share-icons a:hover, .popup-dialog .share-icons div:hover {
background: var(--cb-greenbottle);
color: var(--cb-cream) !important;
}
.popupDialog .share-icons a:hover span, .popupDialog .share-icons div:hover span, .popup-dialog .share-icons a:hover span, .popup-dialog .share-icons div:hover span {
color: var(--cb-cream) !important;
}
.popupDialog .share-icons a:hover svg, .popupDialog .share-icons div:hover svg, .popup-dialog .share-icons a:hover svg, .popup-dialog .share-icons div:hover svg
{
fill: var(--cb-cream) !important;
}
.popupDialog .form-container, .popup-dialog .form-container {
position: fixed !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: auto;
max-height: 90vh;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
}
.form input, .form select {
border: none;
outline: none;
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.8);
background-color: rgba(255,255,255,0.5);
font-size: 14px;
color: var(--cb-greenbottle);
width: 100%;
transition: 200ms;
box-sizing: border-box;
padding: 8px !important;
margin-bottom: 12px;
top: 5px;
position: relative;
}
.form__input-wrapper>label {
color: var(--cb-greenbottle);
font-size: 1rem !important;
line-height: 1rem;
left: 8px;
top: 25px;
}
.form input:focus, .form select:focus, .form__input-wrapper:focus-within>textarea.form__input-value
{
border-radius: 5px;
background-color: rgba(255,255,255,0.85);
border: 1px solid #fff;
}
.form textarea
{
border-radius: 5px !important;
background: rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.8);
}
.widgetContainerleftTop, .widgetContainerrightTop, .widgetContainerrightBottom, .widgetContainerleftBottom {
position: fixed;
display: grid;
grid-template-columns: 1fr auto;
max-height: 250px;
margin: 0 !important;
transition: width .3s ease;
z-index: 9999;
min-height: 205px;
background-color: transparent;
color: var(--cb-tiles-h2);
}
.widgetContainerleftTop__hiddenContent, .widgetContainerrightTop__hiddenContent, .widgetContainerrightBottom__hiddenContent, .widgetContainerleftBottom__hiddenContent {
background-color: rgba(255, 255, 255, 0.85);
border: 1px solid #fff;
box-shadow: 0px 0px 100px rgba(0, 0, 0, .6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
@media screen and (max-width: 768px) {
.widgetContainerleftTop__hiddenContent, .widgetContainerleftBottom__hiddenContent, .widgetContainerrightBottom__hiddenContent, .widgetContainerrightTop__hiddenContent {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
/* ===== Zmienne / fallbacki ===== */
:root{
/* Kolory blendu tła (daleko -> blisko) */
--cta-color-far:  #46c3b2;
--cta-color-near: #ff2d8a;
/* Kolory bąbelków (fallback, jeśli już masz to zostaną użyte Twoje) */
}
/* ===== Przygotowanie przycisku ===== */
.cta-animated{
position: relative;
isolation: isolate;
overflow: hidden;
cursor: pointer;
/* Reakcja na odległość kursora (JS ustawia 0..1) */
--near: 0;
/* Rezerwujemy miejsce na okienko emoji po prawej */
padding-right: 2.2em;
padding-left: 2.2em;
/* Tło miksowane z odległością (nowe Chromium/Firefox/Safari) */
background: color-mix(in srgb,
var(--cta-color-far)  calc(100% - (var(--near) * 100%)),
var(--cta-color-near) calc(var(--near) * 100%)
);
color:#fff;
border-color: transparent;
font-size: 1rem;
font-weight: bold;
width: 100%;
}
.cta-animated:hover
{
background-color: var(--cat1) !important;
border: 2px solid #fff !important;
}
.cta-animated .cta-emoji-stage--left,
.cta-animated .cta-emoji-stage--right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 1.6em; height: 1.6em;
display: inline-grid; place-items: center;
pointer-events: none; line-height: 1;
opacity: 0; transition: opacity .15s ease;
}
/* pozycje */
.cta-animated .cta-emoji-stage--left{  left:  .6rem; }
.cta-animated .cta-emoji-stage--right{ right: .6rem; }
/* stan aktywny (na hoverze przycisku, gdy pętla twarzy działa) */
.cta-animated.face-loop-on .cta-emoji-stage--left,
.cta-animated.face-loop-on .cta-emoji-stage--right{
opacity: 1;
}
/* ukryj starą „prawą” scenę sekwencji, kiedy działa pętla twarzy */
.cta-animated.face-loop-on .cta-emoji-stage{ opacity: 0; }
/* ===== Scena emoji po prawej (jedno "okienko") ===== */
.cta-animated .cta-emoji-stage{
position: absolute;
right: .6rem;
top: 50%;
transform: translateY(-50%);
width: 1.6em; height: 1.6em;
display: inline-block;
pointer-events: none;
line-height: 1;
}
.cta-animated .cta-emoji-stage .cta-emoji{
position: absolute;
inset: 0;
display: grid;
place-items: center;
opacity: 0;
transform: scale(1);
font-size: 1.2rem;
will-change: transform, opacity;
}
.cta-animated .cta-emoji-stage .cta-emoji.play{ opacity: 1; }
/* ===== Animacje emoji ===== */
/* 1) 🖐️ machanie */
@keyframes cta-wave{
0%{transform:scale(1) rotate(0deg)}
20%{transform:scale(1.05) rotate(20deg)}
40%{transform:scale(1.05) rotate(-15deg)}
60%{transform:scale(1.05) rotate(12deg)}
80%{transform:scale(1.05) rotate(-8deg)}
100%{transform:scale(1) rotate(0deg)}
}
.cta-emoji--hand.play{ animation: cta-wave 5s ease-in-out both; }
/* 2) ❤️ serce */
@keyframes cta-heart{
0%,100%{transform:scale(1)}
10%{transform:scale(1.25)}
20%{transform:scale(0.95)}
30%{transform:scale(1.2)}
40%{transform:scale(1)}
50%{transform:scale(1.2)}
60%{transform:scale(0.95)}
80%{transform:scale(1.15)}
}
.cta-emoji--heart.play{ animation: cta-heart 5s ease-in-out both; }
/* 3a) 🫵 wjazd/powiększenie */
@keyframes cta-you{
0%{transform:translateY(8%) scale(.7);opacity:0}
30%{transform:translateY(0) scale(1.2);opacity:1}
100%{transform:translateY(0) scale(1);opacity:1}
}
.cta-emoji--you.play{ animation: cta-you 1.5s cubic-bezier(.2,.7,.2,1) both; }
/* 3b) 👈 wiggle */
@keyframes cta-wiggle{
0%{transform:translateX(0) rotate(0)}
25%{transform:translateX(-3px) rotate(-8deg)}
50%{transform:translateX(3px) rotate(6deg)}
75%{transform:translateX(-2px) rotate(-4deg)}
100%{transform:translateX(0) rotate(0)}
}
.cta-emoji--point.play{ animation: cta-wiggle 1.5s ease-in-out both; }
/* 3c) 👌 2s zoom & fade */
@keyframes cta-zoomout{
0%{transform:scale(1);opacity:1}
100%{transform:scale(2.2);opacity:0}
}
.cta-emoji--ok.play{ animation: cta-zoomout 2s ease both; }
/* ===== Bąbelki po kliknięciu ===== */
.cta-animated.cta-bubbling{ pointer-events: none; }
.cta-bubbles{
position:absolute; inset:0; overflow:hidden; z-index:2;
}
.cta-bubble{
position:absolute; bottom:-8px;
width:8px; height:8px; border-radius:50%;
opacity:.85;
animation:
cta-bubble-rise var(--rise-dur) ease-out forwards,
cta-bubble-pop .4s ease forwards var(--pop-delay);
}
@keyframes cta-bubble-rise{
0%  { transform: translate(var(--x,0), 0) scale(1); }
90% { transform: translate(var(--x,0), -140%) scale(1.1); }
100%{ transform: translate(var(--x,0), -160%) scale(0); opacity:0; }
}
@keyframes cta-bubble-pop{
0%{ filter: drop-shadow(0 0 0 rgba(0,0,0,.2)); }
100%{ filter: drop-shadow(0 0 8px rgba(0,0,0,.25)); }
}
/* ===== Konfetti (emoji) ===== */
.cta-confetti{
position: fixed; left:0; top:0; width:12px; height:12px;
transform: translate(-50%,-50%);
pointer-events: none; z-index: 9999; font-size:14px;
will-change: transform, opacity;
animation: cta-confetti-fly var(--confetti-dur) linear forwards;
}
@keyframes cta-confetti-fly{
0%  { transform: translate(var(--cx),var(--cy)) translate(0,0) rotate(0deg); opacity:1; }
100%{ transform: translate(var(--cx),var(--cy)) translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0; }
}
/* ===== Preferencje dostępności ===== */
@media (prefers-reduced-motion: reduce){
.cta-animated{ animation: none !important; }
.cta-emoji-stage .cta-emoji,
.cta-bubble,
.cta-confetti{ animation: none !important; transition: none !important; }
}
.productDetails-buttons--wishList {
padding: 17px 17px;
background-color: #6400cf;
border: 2px solid #ffffff;
transition: 300ms;
margin: 0;
display: flex;
transition: all ease-out 0.3s;
}
.productDetails-buttons--wishList:hover
{
background-color: var(--cat1);
border-color: var(--cat1);
}
.login-container
{
background: transparent !important;
color: var(--cb-tiles-h2);
}
.login-form__signIn {
color: var(--cb-greenbottle);
text-align: center;
margin: 0;
font-weight: 900;
font-size: 32px;
display: block;
text-transform: uppercase;
}
.login-container .form .form__icon_left, .login-container .form__icon_left
{
left: 8px;
}
.login-container .form__icons:not(.form__preview) {
color: var(--cb-greenbottle);
position: absolute;
transform: translateY(-50%);
top: 25px;
left: -30px;
}
.login-container .svgIcon {
fill: var(--cb-greenbottle);
}
.reg-container__required-fields--login {
margin-top: -10px;
margin-bottom: 10px;
text-align: right;
}
.login-form__more-options {
margin: 18px 0 21px;
display: block;
text-align: center;
}
.login-form__forget-password {
font-size: 15px;
font-weight: 400;
color: var(--cb-greenbottle);
text-decoration: none;
text-transform: uppercase;
}
.login-container .form.inputs-container-js.customerLoginForm-js
{
padding: 20px;
background: var(--cb-cream);
border-radius: 20px;
}
.form__icons.form__preview.form__preview-js
{
top:50%;
right: 10px;
}
.reg-container
{
background: transparent !important;
color: var(--cb-greenbottle);
}
.reg-container .form.inputs-container-js.registrationFormStandard-js
{
padding: 10px 20px 20px 20px;
background-color: var(--cb-cream);
margin-top: 20px;
border-radius: 5px;
box-shadow: 0 -10px 100px var(--cb-cream);
}
.tosLabel
{
text-align: left;
}
.reg-container__LogIn a
{
display: inline-block;
padding: 8px 16px;
margin: 0 5px;
border: 2px solid transparent;
text-transform: uppercase;
font-weight: bold;
color: var(--cb-greenbottle);
transition: all ease-in 0.3s;
font-size: 80%;
border-radius: 25px;
}
.reg-container__LogIn a:hover
{
border: 2px solid var(--cb-greenbottle);
}
.reg-container__input-wrappers-home {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.form__input-info
{
text-align: left;
}
.reg-container .form select {
border-bottom: 1px solid #191616;
background-repeat: no-repeat;
background-image: url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.9.0-web/svgs/solid/caret-down.svg);
background-position: 95% 50%;
-webkit-appearance: none;
background-size: 8px;
}
.consentsList, .consentsList li
{
text-align: left;
}
.cartItemsList-wrapper {
position: absolute;
background: rgba(255, 255, 255, 0.98) !important;
width: 432px;
max-height: 712px;
margin-top: 5px;
z-index: 13;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px);
border: 1px solid #fff;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
z-index: 9999;
float: right;
}
.cartSteps__container .cartStep__light {
background: var(--cb-cream);
border: none;
color: var(--cb-greenbottle);
font-weight: bold;
}
.cartSteps__container .cart__activeStep {
background: var(--cat1);
color: #fff;
}
.cartSteps__container .cart__pastStep {
background: #46C3B2;
color: #fff;
}
.cartSteps__container .cartStep__name {
font-weight: 500;
margin-left: 15px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
color: var(--cb-greenbottle);
}
.cartStep:has(.cart__activeStep) .cartStep__name
{
color: var(--cat1);
}
.cartStep:has(.cart__pastStep) .cartStep__name
{
color: #46C3B2;
}
.cartSteps__container::before {
content: "";
position: absolute;
z-index: -1;
height: 4px;
width: calc(1400px - 12%);
border-radius: 5px;
background: linear-gradient(to right, #46C3B2, transparent);
}
.cartSteps__container .cartStep {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
padding-right: 15px;
border-radius: 30px;
overflow: clip;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.cartStep:has(.cart__activeStep) + .cartSteps__line {
/* style dla .cart_sep następującego po aktywnym .cartStep */
background: linear-gradient(to right, var(--cat1), transparent);
}
.cartSteps__line:has(+ .cartStep .cart__activeStep) {
background: linear-gradient(to right, #46C3B2, var(--cat1));
}
.cartSteps__container {
width: 100%;
max-width: calc(1400px - 12%);
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cartSteps__container .cartSteps__line {
width: 10% !important;
height: 4px;
background-color: transparent;
display: inline-block;
margin: 5px 0 !important;
}
@media screen and (min-width:901px) and (max-width:1400px)
{
.cartSteps__line
{
width: 10% !important;
margin: 5px 0 !important;
}
}
.cartSteps {
border-bottom: none !important;
}
.cartContainer .stepBack--allCart {
width: fit-content;
padding: 10px 20px;
border: 2px solid transparent;
background: none;
transition: all ease-in 0.4s;
color: var(--cb-greenbottle);
border-radius: 30px;
margin: 30px 0 20px;
text-transform: uppercase;
font-weight: 600;
}
.cartContainer .stepBack--allCart:hover {
background: none;
border: 2px solid var(--cb-greenbottle);
color: var(--cb-greenbottle);
}
.cartContainer .stepBack--allCart svg, .cartContainer .stepBack--allCart:hover svg
{
fill: var(--cb-greenbottle) !important;
color: var(--cb-greenbottle);
}
.cartContainer .cartClearAll {
position: absolute;
top: 0;
display: flex;
cursor: pointer;
padding: 8px 16px;
border-radius: 25px;
border: 2px solid transparent;
color: var(--cb-greenbottle);
text-transform: uppercase;
font-weight: 600;
transition: all ease-in 0.3s;
}
.cartContainer .cartClearAll span
{
font-size: 0.9rem;
color: var(--cb-greenbottle);
}
.cartContainer .cartClearAll:hover
{
border: 2px solid var(--cb-greenbottle);
color: var(--cb-greenbottle);
}
.cartContainer .cartClearAll svg, .cartContainer .cartClearAll:hover svg
{
fill: var(--cb-greenbottle);
}
.cartContainer .productsList .cart__list-item--products {
list-style: none;
display: flex;
flex-direction: row;
margin: 24px 30px 0 0;
border-bottom: 1px solid #d1d1d1;
height: fit-content;
min-height: 140px;
position: relative;
padding: 10px;
border-radius: 5px;
overflow: clip;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
transition: all ease-in 0.3s;
}
@media (max-width:990px)
{
.cartContainer .productsList .cart__list-item--products {
margin: 10px 0 0 0;
}
}
.cartContainer .productsList .cart__figure {
width: 140px;
height: 140px;
margin: 0 10px;
position: relative;
object-fit: cover;
}
.cartContainer .productsList .cart__figure img
{
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
object-fit: cover;
}
.cartContainer .productsList .cart__list-item--products:hover
{
background: rgba(255, 255, 255, 1);
box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
.cartContainer .cartInfo {
color: var(--cb-greenbottle);
font-weight: 900;
font-size: 1.4rem;
text-transform: uppercase;
border-bottom: none !important
}
.cartContainer .productsList .cart__details-box .cart__text--delete {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: var(--cat1);
z-index: 1;
padding: 6px 12px;
border: 2px solid transparent;
border-radius: 25px;
text-transform: uppercase;
font-weight: 500;
transition: all ease-in 0.3s;
}
.cartContainer .productsList .cart__details-box .cart__text--delete svg {
fill: var(--cat1) !important;
}
.cartContainer .productsList .cart__details-box .cart__text--delete:hover
{
border: 2px solid var(--cat1);
color: var(--cat1);
}
.cartContainer .productsList .cart__details-box .cart__text--delete:hover svg {
fill: var(--cat1);
}
.cartContainer .productsList .cart__details-box .cart__qty-box .cart__qty-container {
display: inline-flex;
align-items: center;
border: none !important;
}
.cartContainer .cart__qty-col--minus
{
border: 1px solid #fff;
text-align: center;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 1);
border-color: rgb(103 240 222) !important;
color: rgb(103 240 222) !important;
position: relative;
transition: 300ms;
border-radius: 20px !important;
}
.cartContainer .cart__qty-col--minus:hover
{
cursor: pointer;
background: transparent !important;
border-color: rgb(103 240 222) !important;
color: rgb(103 240 222) !important;
box-shadow: -10px 0 20px rgba(103, 240, 222, 0.3) !important;
}
.cartContainer .cart__qty-col--minus svg, .cartContainer .cart__qty-col--minus:hover svg
{
color: var(--cat4) !important;
}
.cartContainer .cart__qty-col--plus
{
border: 1px solid #fff;
text-align: center;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 1);
border-color: rgb(255 45 138) !important;
position: relative;
transition: 300ms;
border-radius: 20px !important;
}
.cartContainer .cart__qty-col--plus svg, .cartContainer .cart__qty-col--plus:hover svg
{
fill: var(--cat1) !important;
}
.cartContainer .cart__qty-col--plus:hover
{
cursor: pointer;
background: transparent !important;
border-color: rgb(255 45 138) !important;
box-shadow: 10px 0 20px rgba(255, 45, 138, 0.3) !important;
}
.cartContainer .productsList .cart__details-box .cart__qty-box .cart__qty-col--change {
width: 15px;
height: 15px;
transition: 300ms;
}
.cartContainer .productsList .cart__details-box .cart__qty-box .cart__qty-col {
display: flex;
padding: 9px 10px 10px !important;
font-size: 18px;
text-align: center;
font-weight: 600;
color: #191616;
line-height: 18px;
justify-content: center;
align-items: center;
}
.cartContainer .productsList .cart__details-box .cart__qty-box .cart__qty-col--input {
width: 50px;
display: flex;
height: 44px;
text-align: center;
border: 1px solid #fff !important;
background-color: rgba(255, 255, 255, 0.5) !important;
font-weight: bold;
color: var(--cb-greenbottle);
justify-content: stretch;
align-items: stretch;
padding: 0;
margin: 0 !important;
}
.cartContainer .productsList .cart__details-box .cart__qty-box .js-value input {
text-align: center;
color: var(--cb-greenbottle);
max-width: 50px;
font-weight: 500;
font-size: 18px;
margin: 0;
padding: 0;
}
.cartContainer .deliveryAndPayment .deliveryMethods .deliveryMethod__container, .cartContainer .deliveryAndPayment .deliveryMethods .paymentMethod__container, .cartContainer .deliveryAndPayment .paymentMethods .deliveryMethod__container, .cartContainer .deliveryAndPayment .paymentMethods .paymentMethod__container {
margin: 10px 20px 10px 0;
border: 1px solid rgba(255, 255, 255, 1);
width: 16%;
min-height: 180px;
padding: 15px 5px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
cursor: pointer;
position: relative;
transition: all ease-in 0.3s;
}
@media (max-width:990px)
{
.cartContainer .deliveryAndPayment .deliveryMethods .deliveryMethod__container, .cartContainer .deliveryAndPayment .deliveryMethods .paymentMethod__container, .cartContainer .deliveryAndPayment .paymentMethods .deliveryMethod__container, .cartContainer .deliveryAndPayment .paymentMethods .paymentMethod__container {
width: 40%;
}
.cartContainer
{
margin: 0 auto 0;
}
}
.cartContainer .deliveryAndPayment .cart__label--delivery
{
cursor: pointer !important;
}
.cartContainer .deliveryAndPayment .selected::before {
display: flex;
content: "✓";
position: absolute;
text-align: center;
width: 21px;
height: 21px;
line-height: 16px;
background-color: var(--cat4);
color: #fff;
justify-content: center;
align-items: center;
border-radius: 21px;
right: -10px;
top: -10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.cartContainer .deliveryAndPayment .deliveryMethods .deliveryMethod__container.selected,
.cartContainer .deliveryAndPayment .deliveryMethods .paymentMethod__container.selected,
.cartContainer .deliveryAndPayment .paymentMethods .deliveryMethod__container.selected,
.cartContainer .deliveryAndPayment .paymentMethods .paymentMethod__container.selected,
.cartContainer .deliveryAndPayment .deliveryMethods .deliveryMethod__container:hover,
.cartContainer .deliveryAndPayment .deliveryMethods .paymentMethod__container:hover,
.cartContainer .deliveryAndPayment .paymentMethods .deliveryMethod__container:hover,
.cartContainer .deliveryAndPayment .paymentMethods .paymentMethod__container:hover {
border: 1px solid rgba(255,255,255,1);
background: rgba(255,255,255,1);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}
.cartContainer .deliveryAndPayment .paymentChannel__container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .2);
z-index: 101;
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
}
.cartContainer .deliveryAndPayment .paymentChannel__box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: rgba(255, 255, 255, 0.85);
width: 50%;
height: 61%;
overflow-y: auto;
overflow-x: hidden;
padding: 20px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 5px;
border: 1px solid #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.cartContainer .deliveryAndPayment .paymentChannel__label {
width: 155px;
border: 1px solid rgba(255, 255, 255, 1);
min-height: 95px;
max-height: 105px;
overflow: visible;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: all ease-in 0.3s;
}
.cartContainer .deliveryAndPayment .paymentChannel__label:hover, .cartContainer .deliveryAndPayment .js-active {
border: 1px solid #dfdfdf;
background: rgba(255, 255, 255, 1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.cartContainer .deliveryAndPayment .js-active::before {
display: flex;
content: "✓";
position: absolute;
text-align: center;
width: 21px;
height: 21px;
line-height: 16px;
background-color: var(--cat4);
color: #fff;
justify-content: center;
align-items: center;
border-radius: 21px;
right: -10px;
bottom: -10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.cartContainer .deliveryAndPayment .paymentChannel__title {
line-height: 26px;
color: var(--cb-greenbottle);
margin-bottom: 50px;
display: block;
width: 100%;
font-weight: 700;
text-transform: uppercase;
font-size: 1.4rem;
letter-spacing: 0.5px;
}
.cartContainer .customerData .loginContainer {
margin-right: 20px;
border: 0 !important;
padding: 25px 8%;
flex: 34%;
border-radius: 5px;
background: var(--cb-cream);
}
.cartContainer .customerData .loginContainer__title
{
width: 100%;
text-align: center;
display: block;
font-size: 24px;
font-weight: 700;
color: var(--cb-greenbottle);
letter-spacing: 0.5px;
margin-bottom: 30px;
text-transform: uppercase;
}
.cartContainer .customerData .registerContainer {
margin-left: 20px;
border: 0 !important;
padding: 25px 8%;
flex: 34%;
background: var(--cb-greenbottle);
border-radius: 5px;
color: var(--cb-cream);
}
.cartContainer .customerData .registerContainer__title {
width: 100%;
text-align: center;
display: block;
font-size: 24px;
font-weight: 700;
color: var(--cb-cream);
letter-spacing: 0.5px;
margin-bottom: 10px;
text-transform: uppercase;
}
.cartContainer .customerData .registerContainer__visitor {
margin-top: 40px;
}
.cartContainer .customerData .registerContainer__description {
font-size: 14px;
display: block;
text-align: center;
letter-spacing: 1.2px;
color: #fff;
margin: 10px 0 20px;
min-height: 42px;
}
.cartContainer .cartError {
font-size: 16px;
color: var(--cb-greenbottle);
font-weight: 700;
text-transform: uppercase;
font-stretch: normal;
font-style: normal;
line-height: 1.71;
letter-spacing: 1.2px;
margin-right: 30px;
margin-top: 30px;
padding: 15px 25px !important;
position: relative;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
border-radius: 6px !important;
}
.reminder-container {
background-color: transparent !important;
color: var(--cb-greenbottle);
}
.reminder-container .reminder-header {
color: var(--cb-greenbottle);
text-align: center;
margin: 0;
font-weight: 700;
font-size: 1.4rem;
display: block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.reminder-container .form {
margin: 30px 0 0 0;
padding: 15px;
border-radius: 5px;
background: var(--cb-cream);
}
.reminder-container .form__icons {
top: 27px;
left: 5px;
color: var(--cb-greenbottle);
}
.product-list-js .product-list-wrapper
{
background: transparent !important;
}
@media only screen and (min-width: 769px) {
.headerSection.headerSection__bg .headerContainer>.headerSection__row .headerMainMenu--showOnDesktop {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.footer__primaryContainer-navigation .footer__section {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer__section {
color: #fff;
padding: 0 0 15px;
margin: 0 20px 15px;
box-sizing: border-box;
cursor: pointer;
}
.footer__section-title
{
text-align: center !important;
justify-content: center;
}
.footer__section ul {
font-size: 14px;
margin-left: 0;
padding-top: 10px;
margin-top: 0px;
text-align: center;
}
.footer__section.activeSection .footer__section-title svg {
fill: #fff;
transform: rotate(-90deg);
}
.footer__section.activeSection .footer__section-title
{
color: #fff;
}
}
@media screen and (min-width: 769px) and (max-width: 965px) {
.blog-wrapper .otherPosts__post-three-and-four-posts
{
width: 48%;
margin-bottom: 2%;
}
}
@media screen and (max-width: 768px) {
.blog-wrapper-mobile .otherPosts__post .image-container {
width: 100%;
height: auto;
border-radius: 5px;
overflow: clip;
}
}
@media screen and (max-width: 768px) {
.blog-wrapper-mobile .otherPosts__post {
margin: 0 0 20px 0;
width: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
}
@media screen and (max-width: 768px) {
.blog-wrapper-mobile .otherPosts__post .data-container {
display: flex;
flex-direction: column;
padding: 15px;
}
}
@media screen and (max-width: 768px) {
.blog-wrapper-mobile .otherPosts__post .data-container .title {
font-weight: 900;
text-align: center;
font-size: 21px;
color: var(--cb-greenbottle);
line-height: 24px;
letter-spacing: 0.5px;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 0 10px 0;
text-transform: uppercase;
}
}
@media screen and (max-width: 768px) {
.blog-wrapper-mobile .otherPosts__post .data-container .content {
color: var(--cb-greenbottle);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px;
}
}
@media only screen and (max-width: 768px) {
.headerSection__logo {
margin-top: 15px !important;
}
.breadcrumbs-wrapper {
margin: 0;
width: 100%;
height: auto;
background: var(--cb-cream);
border-radius: 0 0 10vw 10vw;
padding-top: 4rem;
padding-bottom: 1rem;
}
.breadcrumbs {
list-style: none;
display: block;
margin: 0;
padding: 25px 0 25px;
text-align: center;
width: 100%;
position: relative;
z-index: 5;
}
.breadcrumbs__piece--last {
cursor: default;
color: var(--cb-greenbottle);
overflow: hidden;
text-overflow: ellipsis;
display: block;
font-size: 9vw;
line-height: 9vw;
font-style: normal;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 0;
padding: 10px 10px 0;
white-space: inherit;
}
.breadcrumbs__piece.breadcrumbs__piece--last.cb-cart-title {
font-size: 1.6rem;
line-height: 1.8rem;
white-space: normal !important;
max-height: 6.6rem;
max-width: calc(100% - 130px);
margin: 0 auto;
}
}
.container-blog
{
background: transparent !important;
}
.container-post
{
background: transparent !important;
}
@media screen and (max-width:1440px)
{
.recommended-products1
{
max-width: 90%;
}
.info-banner-2 {
max-width: 90%;
margin: 0 auto;
}
}
@media screen and (max-width:768px)
{
.some-links
{
flex-direction: column-reverse;
}
.some-links .some-link-container:nth-child(2)
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width:1200px)
{
.recommended-products-title
{
text-align: center;
}
.recommended-products-title b
{
display: block;
}
}
@media screen and (max-width: 990px) {
.newsletter2 .newsletter2__form .newsletter2__input-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 100%;
}
.newsletter2__inputWrapper {
flex-direction: row;
justify-content: center;
width: 100%;
}
.newsletter2 .newsletter2__form .newsletter2__input-container input[type=email] {
width: 100%;
max-width: 600px;
display: block;
margin: 0;
}
.newsletter2 .newsletter2__btn-subscribe {
display: block;
margin: 0;
padding: 14px 12px;
width: 200px;
order: 2;
}
.newsletter2 .checkBoxes__container input+label {
margin: 0 auto;
display: inline;
}
.newsletter2
{
flex-direction: column;
}
.newsletter2__text-content {
text-align: center;
}
.newsletter2__form
{
width: 100%;
}
.newsletter2__input-container
{
width: 100%;
}
.consentsList, .consentsList li {
text-align: center;
}
.newsletter2__consents {
margin: 15px auto 0 auto;
font-size: 14px;
transition: max-height .2s ease-out;
overflow: hidden;
padding: 0;
text-align: center;
max-width: 90%;
}
}
@media only screen and (min-width: 769px) {
.headerSection {
min-height: 75px;
}
}
.headerSection.frozenHeader .headerSection__logo.cb-header-logo
{
padding-top: 7px;
height: 70px;
}
@media screen and (min-width: 769px) {
.headerSection.frozenHeader .headerSection__logo img, .headerSection .headerSection__logo svg {
max-height: 65px;
width: auto;
max-width: 200px;
background-color: initial;
}
}
@media only screen and (max-width: 769px) {
.bottomMenu {
width: 100%;
height: 46px;
background-color: rgba(255, 255, 255, 0.85);
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: fixed;
bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
z-index: 99;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 20px 20px 0 0;
box-shadow: 0 -10px 45px rgba(26, 66, 66, 0.2);
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 1);
}
.bottomMenu .menuItem .text {
font-size: 11px;
line-height: 18px;
color: var(--cb-greenbottle);
font-weight: 500;
text-align: center;
margin: 0 auto;
text-transform: uppercase;
}
.bottomMenu .menuItem svg {
fill: var(--cb-greenbottle);
width: 20px;
height: 18px;
margin: 0 auto 2px;
}
.bottomMenu .menuItem {
flex: 0 1 15%;
margin: 0 auto;
display: flex;
padding: 5px 0 5px;
flex-direction: column;
justify-content: center;
}
a.menuItem.activePage {
background: linear-gradient(0deg, rgba(26, 66, 66, 1), rgba(26, 66, 66, 0.8));
border-radius: 10px 10px 0 0;
color: var(--cb-cream);
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.bottomMenu .menuItem.activePage svg
{
fill: var(--cb-cream) !important;
}
a.menuItem.activePage .text
{
color: var(--cb-cream) !important;
}
.headerSection .headerSection__mainMenu {
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
color: var(--cb-greenbottle);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.headerSection .headerSection__mobilePopup {
display: none;
position: fixed;
top: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
z-index: 99;
padding: 35px 20px 20px;
}
}
@media only screen and (max-width: 599px) {
.breadcrumbs {
padding: 0;
line-height: inherit;
}
}
@media only screen and (max-width: 768px) {
.headerSection .headerSection__mainMenu .mainMenu__navLink {
padding: 15px 0;
border-bottom: 1px solid #d1d1d1;
width: 100%;
text-align: left;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
}
}
@media only screen and (max-width: 768px) {
.headerSection .headerSection__iconsMenu {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 10px;
position: static;
bottom: 22px;
right: 35px;
}
.recommended-products-title
{
font-size: 2.5rem !important;
line-height: 2.6rem !important;
}
.cbhomepage-recomended-news
{
padding-bottom: 1rem;
margin-bottom: 0;
}
.cbhomepage-proporsal
{
margin-top: 3rem;
}
.recommended-products1 .product-item:not(.product-item-pl) img {
max-height: 100% !important;
max-width: 100% !important;
}
}
@media (min-width: 769px) and (max-width:1199px) {
.gridMainElement {
margin-bottom: 0;
padding-bottom: 1rem;
}
}
@media only screen and (max-width: 768px) {
.headerSection .headerSection__categories__mobile .mainCategories__categories-wrapper .mainCategories__category {
display: block;
width: calc(100% - 10px);
padding: 15px 0 15px 10px;
border-bottom: 1px solid #d1d1d1;
}
}
/* ======= CORE LAYOUT ======= */
.cbv3{
--active-from: var(--cat1);        /* gradient kategorii */
--active-to:#000;
--next-color: var(--cat2);         /* kolor obramowania NEXT na hover */
width:min(100%,1400px);
margin-inline:auto;
position:relative;
}
@media (min-width:990px){ .cbv3{ height:75svh; max-height:75svh; } }
@supports not (height:1svh){ @media (min-width:990px){ .cbv3{ height:75vh; max-height:75vh; } } }
@media (min-width:990px){
.cbv3__nav{
position:absolute; top:0; left:0; width:32%; height:100%;
display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem; padding:1rem 2rem 1rem 10px; z-index:3;
}
.cbv3__stage{
position:relative; height:100%; display:flex; align-items:center; justify-content:center; z-index:1;
perspective:1200px;
}
}
@media (min-width:1199px)
{
.cbv3__meta{
position:absolute; right:0; bottom:0; width:26%; padding:1rem 1rem 1.2rem 1.2rem;
display:grid; gap:.8rem; align-content:end; justify-items:end; text-align:right; z-index:3;
}
}
@media (max-width:1199px) {
.cbv3{ height:80svh; max-height:80svh; display:flex; flex-direction:column; gap:1rem; }
@supports not (height:1svh){ .cbv3{ height:80vh; max-height:80vh; } }
.cbv3__nav{
position: relative;
padding-inline: 1rem;
z-index: 3;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
column-gap: 16px;
}
.cbv3__stage{ position:relative; flex:0 0 60%; display:flex; align-items:center; justify-content:center; z-index:1; }
.cbv3__meta{ position:relative; padding-inline:1rem; display:grid; gap:.8rem; align-content:start; justify-items:end; z-index:3; }
}
/* Kategorie */
.cbv3-cat{
all:unset; cursor:pointer; display:block; font-weight:900; line-height:1.05; letter-spacing:.01em;
font-size:clamp(2.2rem,2.2vw + .6rem,5.4rem); color: rgba(0, 0, 0, 0.2);
background-clip:text; -webkit-background-clip:text; transition:transform .2s ease, opacity .2s ease;
}
.cbv3-cat:hover{ transform:translateX(2px); }
.cbv3-cat.is-active{ color:transparent; background-image:linear-gradient(90deg,var(--active-from),var(--active-to)); }
/* Meta */
.cbv3__title{ margin:0; font-weight:900; text-transform:uppercase; text-align:right; font-size:clamp(1.2rem,1.2vw + .6rem,2.2rem); }
.cbv3__price{ color:#8e8e8e; font-weight:700; text-align:right; font-size:clamp(1rem,1vw + .4rem,1.6rem); }
.cbv3__actions{ display:grid; gap:.6rem; }
/* Buttons */
.cbv3-btn{ all:unset; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
padding:.9rem 1.6rem; border-radius:999px; text-transform:uppercase; font-weight:900; letter-spacing:.04em; font-size:1.2rem; cursor:pointer;
}
.cbv3-btn svg{ width:1.1em; height:1.1em; }
.cbv3-btn--view {
border: 2px solid #000;
color: #000;
background: rgba(255, 255, 255, 0.8);
display: block;
width: inherit;
text-align: center;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: all ease-out 0.3s;
}
.cbv3-btn--view:hover {
border: 2px solid var(--cat-active-from);
color: var(--cat-active-from);
background: #fff;
display: block;
text-align: center;
transition: all ease-out 0.3s;
}
.cbv3-navbtns{ display:flex; gap:.6rem; justify-content:space-between; }
.cbv3-btn--prev
{
width: 35%;
border: 2px solid rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: border-color .25s ease;
}
.cbv3-btn--prev:hover{ border: 2px solid rgba(0, 0, 0, 1);
color: rgba(0, 0, 0, 1); }
.cbv3-btn--next{
width:60%; color:#000;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(90deg,#000,#000) border-box;
border:2px solid transparent;
background-size:100% 100%, 200% 100%;
background-position:0 0, 0 0;
transition:background-position .45s ease;
}
.cbv3-btn--next:hover{
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(90deg,#000 0%, #000 50%, var(--next-color) 50%, var(--next-color) 100%) border-box;
background-size:100% 100%, 200% 100%;
background-position:0 0, 100% 0;
}
/* ======= SCENA / OBRAZ / CIEŃ ======= */
.cbv3__media{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cbv3-slide{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; will-change:transform,opacity; }
.cbv3-cover{
position:relative;
display:inline-block;        /* było: display:block */
isolation:isolate;
max-width:65%;
max-height:100%;             /* było: height:100%; max-height:100% */
/* transformy bez zmian */
transform-style:preserve-3d;
transform:
translate3d(var(--tx,0px),var(--ty,0px),var(--tz,0px))
rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
scale(var(--scale,1)) scaleX(var(--sx,1)) scaleY(var(--sy,1));
border-radius:20px;          /* zachowujemy zaokrąglenie */
}
.cbv3-cover img{
display:block;
width:auto;                  /* było: width:auto (ok) */
height:auto;                 /* było: height:100% */
max-width:100%;
max-height:100%;             /* klucz: nie wyżej niż scena */
object-fit:contain;
border-radius:20px;
background:transparent !important; /* usuwa białe tło */
position:relative;
z-index:1;
}
@media (max-width:1199px){
.cbv3-cover{ max-height:100%; max-width:75%; }
.cbv3-cover img{
width:auto;                /* było: width:100% */
height:auto;
max-width:100%;
max-height:56vh;
}
.cbv3__title
{
text-align: center;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Połysk (nad obrazkiem) */
.cbv3{ --glint-x:50%; --glint-y:8%; --glint-o:0; }
.cbv3-cover::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:2; mix-blend-mode:screen;
background:
radial-gradient(260px 190px at var(--glint-x) var(--glint-y),
rgba(255,255,255,0.38),
rgba(255,255,255,0.16) 40%,
rgba(255,255,255,0.04) 58%,
transparent 72%);
opacity:var(--glint-o);
transition:opacity .38s ease, background-position .2s ease;
}
/* Cień (POD obrazkiem) – jedna, unikalna definicja */
.cbv3-cover::after{
content:"";
position:absolute;
left:50%; bottom:-2rem;                 /* zawsze przy dole okładki */
width:var(--shw,70%); height:var(--shh,22px);
transform:translateX(-50%) scaleX(var(--sdx,1)) scaleY(var(--sdy,1));
border-radius:50%;
background:radial-gradient(closest-side, rgba(0,0,0,var(--sdo,.30)), transparent 70%);
filter:blur(1px);
opacity:0.7;
pointer-events:none;
z-index:0;                          /* pod obrazkiem (z-index:1) */
transition:opacity .25s ease, filter .25s ease, transform .25s ease;
}
/* ======= Poświaty tła kontenera (lewa + mięta) ======= */
.cbhomepage-recommended{
position: relative;
z-index: 0;
padding: 20rem 0 0;
margin: -20rem 0 0;
overflow: visible;
/* kolor aktywnej kategorii dla startu */
--cat-active-from: #ff2d8a;
--glow-current: var(--cat-active-from);
--glow-next: var(--glow-current);
/* mięta (druga poświata) – bez zmian */
background-image:
radial-gradient(70rem 70rem at 100% 0%,
rgba(103,240,222,0.20),
rgba(103,240,222,0.00) 70%);
background-repeat: no-repeat;
background-position: center center;
}
.cbhomepage-recommended::before,
.cbhomepage-recommended::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0; /* pod treścią modułu (.cbv3 będzie nad tym) */
transition: opacity .45s ease;
background:
radial-gradient(60rem 40rem at 6% 50%,
color-mix(in srgb, var(--_glow-color) 55%, transparent) 0%,
transparent 65%);
}
/* aktualny kolor */
.cbhomepage-recommended::before{
--_glow-color: var(--glow-current);
opacity: 1;
}
/* docelowy kolor (fade-in) */
.cbhomepage-recommended::after{
--_glow-color: var(--glow-next);
opacity: 0;
}
/* w trakcie przejścia – krzyżowe przenikanie */
.cbhomepage-recommended.glow-xfade::before{ opacity: 0; }
.cbhomepage-recommended.glow-xfade::after { opacity: 1; }
/* upewnij się, że moduł jest nad tłem */
.cbv3{ position:relative; z-index:1; }
/* ======= Animacje wejścia/wyjścia slajdów ======= */
.cbv3__panel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.cbv3__panel.is-entering  .cbv3-slide{ animation:cbv3-enter-left .55s cubic-bezier(.21,.9,.24,1) both; }
.cbv3__panel.is-leaving   .cbv3-slide{ animation:cbv3-leave-right .42s cubic-bezier(.45,0,.9,.2) both; }
@keyframes cbv3-enter-left{
0%   { opacity:0; transform:translateX(-16%) scale(.98); }
60%  { opacity:1; }
100% { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes cbv3-leave-right{
0%   { opacity:1; transform:translateX(0) scale(1); }
100% { opacity:0; transform:translateX(20%) scale(1.02); }
}
/* === MOBILE (portrait, <1200px): meta POD obrazkiem i wyśrodkowane === */
@media (max-width:1199px) {
.cbv3{
height:auto; min-height:80svh;
display:flex; flex-direction:column; align-items:center;
gap:1rem;
}
@supports not (height:1svh){
.cbv3{ height:80vh; max-height:80vh; }
}
/* kolejność: kategorie -> obrazek -> meta */
.cbv3__nav
{
order: 1;
position: static;
padding: 0 0 0 1rem;
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
align-items: center;
width: 100%;
justify-content: center;
}
.cbv3__stage{
order:2;
position:static;
flex:1;
width:100%;
display:flex; align-items:center; justify-content:center;
}
.cbv3__meta {
order: 3;
position: relative;
width: min(100, 36rem);
margin: 0 auto;
display: flex;
gap: .8rem;
align-content: start;
justify-items: center;
text-align: center;
flex-direction: column;
}
.cbv3__actions{
width:100%;
justify-items:stretch;           /* pełna szerokość przycisku ZOBACZ */
}
.cbv3-btn--view{ width:auto; }
.cbv3-navbtns{ width:100%; }       /* prev/next skalują się razem */
}
@media (max-width:768px){
.cbv3__stage {
position:relative;
flex:0 0 55%;
display:flex;
align-items:center;
justify-content:center;
z-index:1;
}
.cbv3 {
height: 70svh;
max-height: max-content;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cbv3__nav {
order: 1;
position: static;
padding: 1rem 0 0 0;
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
align-items: center;
width: 100%;
justify-content: center;
}
.cbv3-cat
{
font-size: 1.6rem;
}
}
@media only screen and (max-width: 768px) {
.headerSection .headerSection__shopData>span:nth-child(1), .headerSection .headerSection__shopData>span:nth-child(2) {
display: block;
}
.headerSection .headerSection__shopData {
display: flex;
flex-direction: column;
top: unset;
gap: 1rem;
position: relative;
border-bottom: 1px solid #d1d1d1;
padding: 15px 0px;
text-align: center;
}
.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a {
color: var(--cb-greenbottle);
text-decoration: none;
display: inline-block;
padding: 5px 0 5px 10px;
text-transform: uppercase;
font-size: 17px;
font-weight: 500 !important;
letter-spacing: 0.5px;
}
}
.contactSection__contactData .contactData__content
{
font-size: inherit !important;
}
.contactSection__imgContainer {
position: relative;
background-color: transparent !important;
width: 100%;
}
.contactSection__imgContainer, .contactSection__imgContainer img, .contactSection__imgContainer__titleBox {
border-radius: 5px 0px 0px 0px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.contactSection .titleBox__title {
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
width: calc(100% - 80px);
height: 80px;
box-sizing: border-box;
padding: 30px;
text-align: center;
}
.contactSection .titleBox__arrowContainer {
background: transparent !important;
height: 80px;
width: 80px;
box-sizing: border-box;
padding: 32px 0;
text-align: center;
}
.contactSection {
width: 85%;
max-width: 1400px;
margin: 100px auto;
}
@media only screen and (max-width: 1000px) {
.contactSection__cell__banner .contactSection__imgContainer, .contactSection__cell__banner.hide-on-mobile {
display: inherit;
}
}
@media only screen and (max-width: 1000px) {
.contactSection {
margin: 60px auto;
}
}
@media only screen and (max-width: 1000px) {
.contactSection__grid {
grid-gap: 0px 20px;
}
}
.contactSection__cell.contactSection__cell__form  {
padding: 20px;
border-radius: 5px;
background: var(--cb-cream);
}
.contactSection__title {
font-size: 40px;
font-weight: 700;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--cb-greenbottle);
}
.customer, .customer .customer__submenu, .customer .customer__submenu li
{
color: var(--cb-greenbottle) !important;
}
.customer .customer__menu {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 5px;
border: 1px solid #fff;
transition: 200ms;
z-index: 9;
overflow: clip;
}
@media screen and (min-width: 769px) {
.customer .customer__menu li.active-js .customer__menu--submenu {
display: block;
background-color: rgba(255, 255, 255, 1);
padding: 5px 0 5px 30px;
margin: 9px 0 -10px -30px;
}
}
@media screen and (max-width: 768px) {
.customer .customer__menu {
position: absolute;
top: 0;
padding-top: 50px;
left: -300px;
flex-grow: 1;
border-radius: 10vw;
overflow: clip;
}
}
a.menuItem.menuButton.showBottomMenuSection-js.menuActive {
border-radius: 0 0 15px 15px;
border-color: rgba(0, 0, 0, 0.1);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent);
border-style: solid;
border-width: 0 0 1px 0;
top: -5px;
position: relative;
}
.headerSection__searchForm
{
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.header-recommended-popupBackground {
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .2);
z-index: 1;
height: 100vh;
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
}
.headerSection .headerSection__searchForm {
position: absolute;
top: 150px;
background-color: rgba(255, 255, 255, 0.85);
left: 0;
right: 0;
max-width: 1440px;
display: none;
padding: 30px 15px;
margin: 0 auto;
box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
border: 1px solid #fff;
width: 90%;
z-index: 99;
}
.header-recommended {
display: none;
position: absolute;
transform: translate(50%);
right: 50%;
background-color: rgba(255, 255, 255, 0.95);
grid-template-columns: 890px 410px;
max-width: 1300px;
padding: 20px;
height: 474px;
z-index: 15;
top: 45px;
box-shadow: 0 10px 30px 10px rgba(0, 0, 0, .12);
border-radius: 5px;
}
.header-recommended-productItem__imageContainer img {
max-width: 100%;
max-height: 100%;
width: 100%;
object-fit: cover;
height: 100%;
}
.header-recommended-productItem__detailsContainer {
padding: 5px;
}
.header-recommended-productItem {
display: flex;
border-radius: 5px;
border: 1px solid #fff;
transition: all ease-out 0.3s;
}
.header-recommended-productItem:hover {
background-color: #fff;
}
.header-recommended-productItem__detailsContainer h2
{
white-space: inherit;
}
@media screen and (max-width: 1346px) {
.header-recommended {
width: 860px;
grid-template-columns: 450px 410px;
}
}
@media screen and (max-width: 916px) {
.header-recommended {
width: 730px;
grid-template-columns: 450px 280px;
}
}
@media screen and (max-width: 768px) {
.header-recommended {
position: static;
transform: unset;
display: block !important;
height: unset;
width: calc(100% - 40px);
box-shadow: unset;
}
}
@media only screen and (max-width: 768px) {
.headerSection .header-recommended {
padding: 20px 0px;
width: 100%;
}
}
@media only screen and (max-width: 769px) {
.headerSection .headerSection__mobilePopup {
display: none;
position: fixed;
top: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
z-index: 99;
padding: 35px 20px 20px;
}
.headerSection .headerSection__searchForm
{
width: 100%;
}
}
/* ==== CB PDP (prefiks .cbpdp-) ==== */
.cbpdp {
--card-bg: #fff;
--muted: #6b7280;
--ring: rgba(0, 0, 0, .06);
--radius: 20px;
margin: 2rem 0 5rem 0;
display: flex;
flex-direction: column;
}
.cbpdp--hidden { display:none }
.cbpdp__top { display:grid; gap:24px; align-items:start; justify-items: end; grid-template-columns:60% 1fr }
@media (min-width:1200px){ .cbpdp__top { grid-template-columns:60% 1fr } }
/* duże foto */
.cbpdp__gallery { position:relative; border-radius:var(--radius); background:transparent !important; }
.cbpdp__gallery img{ display:block; width:100%; height:auto; }
/* overlay „ciekawostki” */
.cbpdp__facts {
position: absolute;
right: 12px;
top: 3rem;
display: grid;
gap: 10px;
width: fit-content;
margin-right: -8rem;
}
.cbpdp__fact {
background: rgba(255, 255, 255, .7);
border-radius: 14px;
border: 1px solid #fff;
box-shadow: 0 0px 20px rgba(0, 0, 0, 0.05);
padding: 0;
display: grid;
grid-template-columns: 110px 100px;
align-items: center;
gap: 10px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
overflow: clip;
transition: all ease-out 0.3s;
}
.cbpdp__fact:hover
{
background: rgba(255, 255, 255, 1);
box-shadow: 0 0px 35px rgba(0, 0, 0, 0.15);
}
.cbpdp__factCol
{
text-align: center;
width: 100%;
background: transparent !important;
object-fit: cover;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cbpdp__fact img.cbpdp__attrIcon {
width: 60%;
object-fit: cover;
display: inline-block;
margin: 0 auto;
border-radius: 5px;
}
.cbpdp__fact img.cbpdp_attrImg {object-fit:cover; width: 100%; height: 100%;}
.cbpdp__factText{display:flex;flex-direction:column;line-height:1.2}
.cbpdp__factTitle{font-weight:700;font-size:14px;color:#454545;margin:0 0 2px}
.cbpdp__factLine2{font-weight:200;font-size:21px;text-transform:uppercase;letter-spacing:.02em}
.cbpdp__factLine3{font-weight:400;font-size:14px}
/* prawa kolumna */
.cbpdp__side { display:grid; gap:14px; width: calc(100% - 8rem); }
.cbpdp__side .cbpdp__meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
font-size: .92rem;
margin-bottom: 0px;
}
.cbpdp__side .cbpdp__meta a{ text-decoration:underline; }
.cbpdp__price{ font-size:1.8rem; font-weight:700 }
/* CBPDP: układ priceboxa */
.cbpdp__pricebox {
border-radius: 0;
box-shadow: none;
padding: 0;
display: grid;
gap: 10px;
background: transparent !important;
}
.cbpdp__pricebox .productDetails-prices{ margin:0 } /* nie zmieniamy klasy, tylko otoczenie */
.cbpdp__pricebox .cbpdp__sep{ border-top:0; padding-top:2rem; }
.cb-count-price-row
{
display: flex;
flex-direction: row;
align-items: end;
}
/* ilość w priceboxie */
.cbpdp__pricebox .productDetails-attributes--quantity {
margin: 0;
height: auto !important;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
}
.productDetails-attributes--quantity__title {
color: var(--cb-greenbottle);
width: fit-content;
font-size: 0.8rem;
font-weight: bold;
line-height: 2rem;
letter-spacing: normal;
text-transform: uppercase;
}
.cbpdp__pricebox .productDetails-prices
{
text-align: right;
justify-content: end;
margin: 0;
padding: 0;
border: 0;
display: flex;
}
.cbpdp__pricebox .productDetails-prices .price
{
font-size: 4rem;
color: var(--cb-text);
letter-spacing: normal;
line-height: 2rem;
font-weight: 500;
display: inline-block;
}
.cbpdp__pricebox .productDetails-prices .currency-price {
color: var(--cb-greenbottle);
font-size: 2rem;
line-height: 1.44;
letter-spacing: normal;
font-weight: 600;
text-transform: uppercase;
}
.productDetails-prices.input-group.prices .price::before {
content: "CENA";
display: block;
font-weight: 700;
font-size: 1rem;
}
.productDetails-info--row {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-bottom: 5px;
}
.cb-delivery-container {
padding: 8px 15px;
border-radius: 20px;
background: #E5F9F5;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 500;
}
.cb-freedelivery-container {
padding: 8px 15px;
border-radius: 20px;
background: #F8E9D9;
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 500;
}
.cb-delivery-container .cb-label, .cb-freedelivery-container .cb-label
{
font-weight: bold;
}
/* przyciski: „Kup teraz” + ulubione obok siebie */
.cbpdp__pricebox .productDetails-buttons{
display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; order: 3;
}
.cbpdp__pricebox .productDetails-buttons--wishList{ justify-self:end; }
.cbpdp__info{ color:var(--muted); font-size:.9rem }
.cbpdp__short {
border-radius: 0;
background: none;
padding: 0;
box-shadow: none;
margin: 10px 0 0 0;
text-align: justify;
color: var(--cb-tiles-h2);
order: 2;
}
.cbpdp__short strong
{
display: block;
color: var(--cb-greenbottle);
text-transform: uppercase;
margin-bottom: 2px;
font-size: 0.8rem;
}
.cbpdp__short h2
{
margin: 0;
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 900;
line-height: 1.2rem;
color: var(--cb-greenbottle);
}
.cbpdp__seo {
margin: 28px 0 38px;
padding: 15px;
border-radius: 5px;
background: rgba(255,255,255,0.35);
border: 1px solid rgba(255,255,255,0.85);
box-shadow: 0 0 15px rgba(0,0,0,0.05);
order: 4;
}
.cbpdp__seo h1, .cbpdp__seo h2, .cbpdp__seo h3, .cbpdp__seo h4
{
text-transform: uppercase;
font-size: 90%;
font-weight: bold;
margin: 15px 0 5px;
color: var(--cb-greenbottle);
}
/* jeśli w środku trafią zwykłe tabele, dajmy im minimum ergonomii (fallback) */
.cbpdp__seo table{ width:100%; border-collapse:collapse; }
.cbpdp__seo td, .cbpdp__seo th{ padding:6px 8px; vertical-align:top; }
@media (max-width: 767px){
.cbpdp__seo table{ display:block; overflow:auto; }
}
/* Zastosowanie */
.cbpdp__apps .faketitle
{
display: block;
font-size: 1.6rem;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: 0.05rem;
color: var(--cb-greenbottle);
font-weight: 900;
text-align: right;
}
.cbpdp__panel .cb-divtable__cell
{
text-align: center;
}
.cb-divtable__cell h3, .cb-divtable__cell h4
{
font-size: 1.4rem;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: 0.05rem;
color: var(--cb-greenbottle);
font-weight: 900;
text-align: left;
}
.cbpdp__appsGrid{ display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:900px)
{
.cbpdp__appsGrid
{
grid-template-columns:repeat(3,1fr);
width:calc(100% - 1rem);
margin-left: 1rem;
}
}
@media (max-width:768px)
{
.cbpdp__appsGrid {
display: flex;
flex-wrap: wrap;
}
}
.cbpdp__apps a {
display:block;
border-radius:5px;
overflow:hidden;
box-shadow:0 0 10px rgba(0,0,0,0.1);
transition: all ease-out 0.5s !important;
}
.cbpdp__apps a span.cbpdp-apps-title
{
position: absolute;
z-index: 5;
padding: 8px 15px;
margin: 1rem 1rem 0 0;
font-weight: bold;
text-transform: uppercase;
border-radius: 0 10px 10px 0;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
transition: all ease-in 0.3s;
}
.cbpdp__apps img {
width:100%;
height:100%;
position: relative;
z-index: 0;
object-fit: cover;
transition: all ease-in 0.3s;
}
.cbpdp__apps a:hover {
box-shadow:0 5px 20px rgba(0,0,0,0.2);
}
.cbpdp__apps a:hover span
{
background: rgba(255, 255, 255, 0.95);
}
.cbpdp__apps a:hover img {
transform: scale(1.1);
}
/* Dół — 2 kolumny z opisu */
.cbpdp__bottom{
margin-top:3rem;
display:grid;
gap:24px;
grid-template-columns:1fr
}
@media (min-width:1200px){ .cbpdp__bottom{ grid-template-columns:1fr 1fr } }
.cbpdp__panel, .cbpdp__details{
border-radius:0;
background:transparent;
padding:0;
box-shadow:none;
}
.cbpdp ul{ padding-left:1.1rem; margin:.4rem 0 }
.cbpdp ul li::first-line {font-weight: bold;}
.cbpdp ul li {margin-bottom: 5px;}
/* CBPDP: animacje bloga (rozwinięcie + fade-in) */
.cbpdp__apps {
overflow: hidden;
opacity: 0;
max-height: 0;
transition: max-height .6s ease, opacity .35s ease;
position: relative;
z-index: 2;
margin-top: -8rem;
}
.cbpdp__apps.is-open{
opacity:1;
max-height:9999px; /* <<< ważne: po animacji element zostaje otwarty */
}
.cbpdp__appsGrid > a{
opacity:0;
transform:translateY(8px);
transition:opacity .45s ease, transform .45s ease;
}
.cbpdp__appsGrid > a.is-in{ opacity:1; transform:none; }
/* === CBPDP: strzałki slidera (subtelne kółka) === */
.cbpdp__slider{
position: relative; /* upewnij się, że strzałki pozycjonują się względem slidera */
border-radius:var(--radius);
overflow: hidden;
}
.cbpdp__nav {
position: absolute;
bottom: 20%;
transform: none;
width: 44px;
height: 44px;
border-radius: 999px;
border: 0;
cursor: pointer;
display: grid;
place-items: center;
background: rgba(255, 255, 255, .8);
border: 1px solid #fff;
color: var(--cb-tiles-h2);
font-size: 20px;
line-height: 39px;
font-weight: bold;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
transition: all ease-out 0.3s;
z-index: 3;
opacity: .5;
}
/* położenie */
.cbpdp__nav--prev{ left: 12px; }
.cbpdp__nav--next{ right: 12px; }
/* hover / focus */
.cbpdp__nav:hover,
.cbpdp__nav:focus-visible{
background: rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(0,0,0,.22);
outline: none !important;
}
.cbpdp__nav--prev:hover { left: 7px; }
.cbpdp__nav--next:hover { right: 7px; }
/* focus ring dla dostępności z klawiatury */
.cbpdp__nav:focus-visible{
box-shadow:
0 0 0 3px rgba(17, 94, 217, .20),
0 10px 30px rgba(0,0,0,.22);
}
/* stan „wyłączony” lub pojedyncze zdjęcie (gdy JS nada disabled albo display:none) */
.cbpdp__nav[disabled],
.cbpdp__nav.is-hidden{
opacity: 0;
pointer-events: none;
}
/* mniejsze ekrany: większy „tap target” */
@media (max-width: 600px){
.cbpdp__nav{ width: 48px; height: 48px; font-size: 22px; }
.cbpdp__nav--prev{ left: 8px; }
.cbpdp__nav--next{ right: 8px; }
}
/* tryb ciemnych zdjęć – lekko przyciemnij tło na hover, by zachować kontrast */
.cbpdp__slider:hover .cbpdp__nav{
background: rgba(255,255,255,.94);
}
/* opcjonalnie: pokazuj strzałki bardziej dyskretnie i podbijaj widoczność przy hoverze slidera */
.cbpdp__nav{ opacity: .85; }
.cbpdp__slider:hover .cbpdp__nav{ opacity: 1; }
/* === CBPDP: slide transition === */
.cbpdp__viewport{overflow:hidden;width:100%;}
.cbpdp__track{
display:flex;
will-change: transform;
transition: transform .45s cubic-bezier(0.22,1,0.36,1);
}
.cbpdp__item{flex:0 0 100%; user-select:none;}
.cbpdp__item img{display:block;width:100%;height:auto;pointer-events:none;border-radius:var(--radius);}
/* lepsza płynność podczas przeciągania */
.cbpdp__track.is-dragging{transition:none; cursor:grabbing;}
/* „fałszywy” przycisk z tokenu #BTN[...] */
.cb-fake-button {
display: inline-block;
padding: 1px 2px;
border-radius: 0;
border: 0;
background: var(--cat1);
box-shadow: none;
font-weight: 900;
font-size: 20px;
color: #fff;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-align: center;
margin: 0 auto -47px;
transform: skew(-5deg, 10deg) scale(1.35);
}
.cb-divtable__cell:nth-child(2) p .cb-fake-button
{
border: 0;
color: #fff;
background-color: var(--cat4);
margin: -47px auto 0;
transform: skew(5deg, -10deg) scale(1.35);
}
/* obrazki wstawiane z @IMG-*.webp */
.cbpdp__inlineImg{
display:inline-block;
max-width:100%;
height:auto;
vertical-align:middle;
border-radius:5px;
}
.cbpdp__details .cb-divtable__cell:first-child
{
text-align: justify;
}
.cb-divtable{display:grid;gap:10px 14px;grid-template-columns:repeat(var(--cb-divtable-cols,1),minmax(0,1fr))}
.cb-divtable__row{display:contents}
.cb-divtable__cell{min-width:0}
@media (max-width: 767px){ .cb-divtable{ --cb-divtable-cols:1 !important; } }
@media (max-width: 1349px)
{
.productDetails-prices.input-group.prices::before
{
margin-bottom: auto;
}
.cbpdp__pricebox .productDetails-prices .price
{
line-height: 3rem;
}
.cbpdp__pricebox .productDetails-prices .currency-price
{
margin-top: -10px;
}
.cbpdp__apps
{
margin-top: 0;
}
.cbpdp__nav
{
bottom: 5%;
}
.cbpdp__top {
grid-template-columns: 55% 1fr;
}
}
.productDetails .wishListInfoPopup {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
background-color: rgba(255, 255, 255, 0.85);
font-size: 14px;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: 1.2px;
color: #191616;
position: fixed;
padding: 10px 15px;
z-index: 1;
border: 1px solid #ffffff;
border-radius: 10px !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.cbpdp__top
{
order: 1;
}
.cbpdp__apps
{
order: 2;
}
.cbpdp__bottom
{
order: 3;
}
@media (max-width:990px)
{
.cbpdp__apps
{
order: 4;
margin-top: 1rem;
width: 90%;
}
.cbpdp__seo {
order:3;
width: calc(90% - 15px);
}
.cbpdp__bottom
{
order: 2;
margin-top: 1rem;
width: 90%;
}
}
@media (max-width:1199px)
{
.cbpdp__apps .faketitle
{
text-align: left;
}
.cbpdp__appsGrid {
grid-template-columns: repeat(3, 1fr);
width: 100%;
margin-left: 0;
}
}
@media (min-width: 990px) and (max-width:1349px)
{
.cbpdp__gallery {
position: relative;
border-radius: var(--radius);
background: transparent !important;
display: flex;
gap: 10px;
}
.cbpdp__facts {
position: static;
}
.cbpdp__nav
{
bottom: 0;
}
}
@media (max-width:990px)
{
.cbpdp
{
flex-direction: column;
align-items: center;
}
.cbpdp__top {
display: flex;
gap: 24px;
align-items: start;
justify-items: end;
flex-direction: column;
}
.cbpdp__facts {
position: static;
right: 0;
top: 0;
display: flex;
gap: 10px;
margin: 0 auto -5rem;
order: 1;
flex-direction: row;
width: 90%;
flex-basis: 30%;
}
.cbpdp__slider {
position: relative;
border-radius: var(--radius);
overflow: hidden;
order: 2;
}
.cbpdp__gallery
{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.productDetails-prices.input-group.prices::before {
content: "CENA";
display: block;
font-weight: 700;
margin-bottom: -25px;
position: absolute;
}
.cbpdp__side
{
width: 90%;
}
.cbpdp__fact {
background: rgba(255, 255, 255, .7);
border-radius: 14px;
border: 1px solid #fff;
box-shadow: 0 0px 20px rgba(0, 0, 0, 0.05);
padding: 0;
display: grid;
grid-template-columns: 50% 50%;
align-items: center;
gap: 10px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
overflow: clip;
transition: all ease-out 0.3s;
}
.productsList__gridView-js .product-item__placeholder, .product-list__gridView-js .product-item__placeholder {
margin-bottom: 25px;
position: relative;
height: 465px;
}
.productsList__gridView-js .product-item-third .product-item__priceAndExtraButton, .product-list__gridView-js .product-item-third .product-item__priceAndExtraButton {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 10px auto 0;
height: fit-content;
position: relative;
flex-direction: column;
}
}
@media (max-width:768px)
{
.cbpdp__fact {
grid-template-columns: 100%;
flex-basis: 30%;
padding: 2%;
}
.cbpdp__fact .cbpdp__factCol:nth-child(2)
{
display: none;
}
.productDetails-setList--set, .productDetails-setList--recentList, .productDetails-setList--relatedList, .productDetails-recent--set, .productDetails-recent--recentList, .productDetails-recent--relatedList, .productDetails-related--set, .productDetails-related--recentList, .productDetails-related--relatedList {
width: 100%;
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
flex-direction: row;
flex-wrap: wrap;
gap: 1%;
}
.productDetails-setList--set__item--link, .productDetails-setList--recentList__item--link, .productDetails-setList--relatedList__item--link, .productDetails-recent--set__item--link, .productDetails-recent--recentList__item--link, .productDetails-recent--relatedList__item--link, .productDetails-related--set__item--link, .productDetails-related--recentList__item--link, .productDetails-related--relatedList__item--link {
color: #191616;
outline: none;
text-decoration: none;
font-size: 18px;
text-align: center;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 200px;
}
.productDetails-related .slick-slide, .productDetails-related img, .productDetails-related a, .productDetails-recent .slick-slide, .productDetails-recent img, .productDetails-recent a, .productDetails-setList--container .slick-slide, .productDetails-setList--container img, .productDetails-setList--container a {
border-radius: 5px;
display: flex;
flex-basis: 40%;
flex-grow: 1;
height: auto !important;
padding: 0 0 10px !important;
margin: 0 0 2% !important;
}
.productDetails-setList--set__item--name, .productDetails-setList--recentList__item--name, .productDetails-setList--relatedList__item--name, .productDetails-recent--set__item--name, .productDetails-recent--recentList__item--name, .productDetails-recent--relatedList__item--name, .productDetails-related--set__item--name, .productDetails-related--recentList__item--name, .productDetails-related--relatedList__item--name {
height: 2.2rem;
max-height: none;
margin-bottom: 5px;
letter-spacing: 0.1px;
margin-top: 10px;
text-align: left;
white-space: initial;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 1rem;
line-height: 1.1rem;
color: var(--cb-tiles-h2);
font-weight: 500;
text-transform: uppercase;
padding: 0 5px !important;
}
}
@media screen and (max-width: 768px) {
.cbhomepage-recommended .recommended-products1.slider .recommended-products-title b {
display: block;
color: #fff;
}
}
@media screen and (max-width: 768px) {
.breadcrumbs-blog {
visibility: visible;
display: block;
}
}
.allPosts-mobile
{
background: transparent !important;
}
@media screen and (max-width: 768px) {
.allPosts-mobile {
visibility: visible;
display: inline-flex;
height: 70px;
width: 100%;
margin-top: 0px;
background: transparent !important;
font-weight: 600;
}
}
@media screen and (max-width: 768px) {
.container-post .title {
width: calc(100% - 40px);
padding: 0 20px 0 20px;
word-wrap: break-word;
font-size: 30px;
font-weight: bold;
}
}
@media (max-width:990px)
{
.cartSteps__container {
width: 100%;
max-width: calc(1400px - 12%);
height: auto !important;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.cartSteps__container::before {
display: none;
}
.cartSteps__container .cartStep {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
padding-right: 15px;
border-radius: 25px;
overflow: clip;
display: none;
flex-direction: row;
justify-content: space-between;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
height: 35px;
position: static;
align-items: center;
margin-bottom: 5px;
padding: 0;
}
.cartSteps__container .cartStep__name {
font-weight: 500;
margin-left: 15px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
color: var(--cb-greenbottle);
margin: 0;
padding: 0 10px;
height: auto;
position: static;
display: block;
}
.cartSteps__container .cartSteps__line {
display: none;
}
.cartStep
{
display: none;
}
.cartStep:has(.cart__pastStep)
{
opacity: 0.5;
display: flex;
}
.cartStep:has(.cart__activeStep)
{
display: flex;
}
}
.cart__btn-wrapper.inputs-container-js, .cart__button.cart__button--submit
{
order: -1;
}
.customer .customer__orderContent
{
position: static !important;
}
.customer .customer__orderContent .orderContent
{
height: auto !important;
position: static;
}
.customer__flexboxContainer
{
position: static;
}
.cookie-message-opener .cookie-message-opener-icon
{
fill: var(--cb-cream);
}
.categoryDescription-container
{
width: calc(100% - 20px);
max-width: 1400px;
display: flex;
justify-content: space-between;
padding: 10px 10px 20px !important;
flex-wrap: wrap;
margin-top: 2rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
.categoryDescription-description--name {
font-size: 1.6rem;
font-weight: 900;
color: var(--cb-greenbottle);
line-height: 26px;
margin-top: 5px;
margin-bottom: 16px;
letter-spacing: 0.5px;
}
.categoryDescription-description--text p, .categoryDescription-description--text p *
{
font-size: 1rem !important;
font-weight: 400 !important;
color: var(--cb-text);
line-height: 1.3rem !important;
letter-spacing: 0 !important;
font-family: Dosis;
}
.categoryDescription-description--text h2, .categoryDescription-description--text h3
{
font-size: 1.2rem !important;
font-weight: 700;
color: var(--cb-greenbottle);
line-height: 1.4rem !important;
font-family: Dosis;
text-transform: uppercase;
letter-spacing: 1px !important;
margin: 25px 0 5px !important;
padding: 0 !important;
}
.popup-dialog.after-adding-to-cart-popup .popup-dialog-wrapper
{
background: #fff !important;
}
.cb-size-row{ margin-bottom: 12px; }
.productDetails-attributes {
margin-top: 0px !important;
}
.productDetails-attributes .input-group {
height: auto !important;
position: relative;
min-height: auto !important;
}
.productDetails-attributes .button-option.units-container input.unitId
{
height: auto !important;
min-height: 20px !important;
}
.Sizechart-content {
border-radius: 5px;
background: #fff !important;
}