:root {
--font-family-headline: 'Poppins', sans-serif;
--font-family-text: 'Montserrat', sans-serif;
--color-primary: #36783E;
--color-secondary: #4e9457;
--color-text: #333;
--color-background: #f9f9f9;
--color-hover: rgba(255, 255, 255, 0.6);
--color-green: #4caf50;
--color-red: #000000;
--hover-opacity: 0.8;
--border-radius: 8px; --border-color: #ececec;
--border: 1px solid var(--border-color);
--box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
--transition: 0.2s ease-in-out;
--admin-bar: 0px; --woocommerce: var(--color-primary);
--wc-green: var(--color-green);
--wc-red: var(--color-red); --swiper-theme-color: #333;
--swiper-navigation-size: 36px;
} .admin-bar {
--admin-bar: 32px
}
@media screen and (max-width: 782px) {
#wpadminbar{
display: none;
}
.admin-bar {
--admin-bar: 0;
}
} *{
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-text);
margin: 0;
font-size: 16px;
line-height: 1.8rem;
font-weight: 400;
letter-spacing: .5px;
color: var(--color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
body.fixed-position{
overflow: hidden;
}
img{
object-fit: contain;
max-width: 100%;
}
.wp-block-image img{
height: auto;
width: 100%; }
.container, 
.gb-inside-container{
max-width: 1300px;
margin: 0 auto;
padding: 0 15px 0px 15px;
}
section{
position: relative;
padding: 32px 0;
}
article{
padding-top: 40px;
padding-bottom: 40px;
}
@media (max-width: 768px){
article{
padding-top: 0px;
}
} .rank-math-breadcrumb{
font-size: 13px;
width: 100%;
padding: 20px 0px;
}
.rank-math-breadcrumb p{
margin: 0;
}
.rank-math-breadcrumb a:hover{
color: var(--color-red);
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.text-bold{
font-weight: bold;
} h1, h2, h3, h4{
font-family: var(--font-family-headline);
}
h1{
font-size: clamp(1.6rem, 3vw, 3rem);
line-height: clamp(2rem, 3vw, 3.5rem);
}
h2{
font-size: clamp(1.4rem, 3vw, 2.4rem);
line-height: clamp(2rem, 3vw, 2.5rem);
}
.section-title{
margin-bottom: 60px;
} a{
color: inherit;
text-decoration: none;
-webkit-transition: var(--transition);
transition: var(--transition);
}
a:hover{
color: var(--color-red);
} .ordered-list{
list-style: none;
position: relative;
padding-left: 0;
margin-top: 20px;
margin-bottom: 60px;
counter-reset: li;
}
.ordered-list li {
display: flex;
align-items: center;
margin-bottom: 10px;
counter-increment: li;
}
.ordered-list li::before {
content: counter(li);
display: inline-block;
font-size: 12px;
line-height: 24px;
width: 24px;
height: 24px;
border-radius: 30px;
text-align: center;
margin-right: 20px;
color: #fff;
background-color: var(--color-primary);
}
.underline{
position: relative;
line-height: 2rem;
}
.underline:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 12px;
width: 100px;
background-color: var(--color-primary);
opacity: 0.3;
z-index: -1;
}
.subheadline{
margin-bottom: -32px;
color: var(--color-primary);
opacity: 0.3;
text-transform: uppercase;
font-weight: 900;
font-size: 2.75rem;
letter-spacing: 0.1rem;
text-align: center;
}
blockquote, .wp-block-quote{
background-color: var(--color-background);
padding: 32px;
text-align: center;
font-weight: 600;
font-size: 1.1rem;
line-height: 1.7rem;
border: var(--border);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin-block: 32px;
margin-inline: auto;
max-width: 900px;
}
button {
-webkit-transition: var(--transition);
transition: var(--transition);
cursor: pointer;
} .btn{
background-color: var(--color-red);
padding: 10px 24px;
border-radius: 4px; 
font-weight: 600;
}
.btn:hover{
color: #fff;
background-color: var(--color-primary);
} .btn,
.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
color: #ffffff;
background-color: var(--color-red);
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.btn:hover,
.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
background-color: var(--color-primary);
color: #FFF;
opacity: var(--hover-opacity);
}
.woocommerce div.product form.cart .button.loading,
.woocommerce div.product form.cart .button.added,
.woocommerce a.button.added{
padding-right: 16px;
}
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce #respond input#submit.alt:disabled[disabled]:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce a.button.alt:disabled[disabled]:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover {
background-color: var(--color-primary);
color: #fff;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.single_add_to_cart_button.loading::after, 
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.ajax_add_to_cart.loading::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.single_add_to_cart_button.loading::after, 
:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.ajax_add_to_cart.loading::after,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.ajax_add_to_cart.add_to_cart_button.added::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.ajax_add_to_cart.add_to_cart_button.added::after,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.ajax_add_to_cart.add_to_cart_button.added::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.ajax_add_to_cart.add_to_cart_button.added::after{
position: relative;
top: unset;
right: unset;
transform: unset;
transform-origin: center; 
margin-left: 10px;
}
.woocommerce ul.products li.product a.added_to_cart{
display: none;
} .btn--secondary{
border: var(--border);
border-radius: var(--border-radius);
} .btn--back{
display: flex;
align-items: center;
font-family: var(--font-family-text);
font-size: 1rem;
font-weight: 600;
font-style: normal;
cursor: pointer;
}
.link--back:before,
.btn--back:before{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-back-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-back-outline.svg);
background-color: currentColor;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 10px;
} .link--back{
display: flex;
align-items: center;
cursor: pointer;
-webkit-transition: var(--transition);
transition: var(--transition);
}
.link--back:hover{
color: var(--color-primary);
}
.wp-block-button__link{
background-color: var(--color-primary);
border-radius: 4px;
margin-top: 15px;
padding: 12px 32px;
text-transform: uppercase;
font-family: var(--font-family-headline);
font-size: 0.8rem;
font-weight: 600;
color: #fff;
}
.wp-block-button__link:hover{
color: #fff;
background-color: var(--color-text);
}
.background-gray{
position: relative;
padding-block: 50px;
}
.background-gray:after{
content: '';
position: absolute;
top: 0;
height: 100%;
background-color: var(--color-background);
z-index: -2;
}
@media screen and (min-width: 1300px){
.background-gray:after{
width: 100vw;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width: 1299px){
.background-gray:after{
width: calc(100% + 30px);
left: 0;
margin-inline: -15px;
}
}  .page-content{
padding-block: 40px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner{
z-index: 999999;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
flex-direction: row-reverse;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-deny{
order: 1;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after{
visibility: visible;
}
@media screen and (max-width: 360px){
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
flex-direction: column-reverse;
}
} #topbar{
padding: 5px 0;
background-color: var(--color-background);
font-size: 12px;
color: var(--color-text);
text-transform: uppercase;
}
#topbar .wp-block-columns{
align-items: center;
margin-bottom: 0;
}
#topbar .wp-block-column:nth-of-type(2){
text-align: center;
}
#topbar .wp-block-column:last-of-type{
text-align: right;
}
#topbar p{
margin: 0;
} #topbar ul{
margin: 0;
display: inline-flex;
list-style: none;
gap: 1em;
}
#topbar .menu{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
} @media screen and (max-width: 991px){
#topbar{
display: none;
}
}
.header-primary{
background-color: #FFF;
}
.header-primary .container{
display: flex;
align-items: center;
justify-content: space-between;
}
.header-col{
display: flex;
align-items: center;
flex-basis: 30%;
}
.header-left{
justify-content: flex-start;
}
.header-center {
justify-content: center;
flex-basis: 40%;
}
.header-right{
justify-content: flex-end;
}
.header--desktop{
position: relative;
box-shadow: var(--box-shadow);
z-index: 9;
position: sticky;
top: 0;
} .header-primary__bottom{
position: -webkit-sticky;
position: sticky;
top: var(--admin-bar);
z-index: 20;
box-shadow: var(--box-shadow);
background-color: var(--color-background);
} .sw-shop-logo{
width: 150px;
height: auto;
padding: 10px 0;
}
@media screen and (max-width: 767px){
.sw-shop-logo{
width: 80px;
height: auto;
padding: 5px 0;
}
} .sw-logo-mark__link{
flex-shrink: 0;
}
.sw-logo-mark{
-webkit-transition: width .4s cubic-bezier(.35,0,.15,1);
transition: width .4s cubic-bezier(.35,0,.15,1);
}
.is-sticky .sw-logo-mark{
width: 32px
} .header-primary .menu{
display: flex;
align-items: center;
gap: 12px;
}
.header-primary .menu a{
display: flex;
padding: 4px 16px;
font-size: 0.9rem;
white-space: nowrap;
font-weight: 600;
text-transform: uppercase;
font-family: var(--font-family-headline);
}
.header-primary .menu .current-menu-item{
border-bottom: 2px solid var(--color-primary);
border-radius: 4px;
color: var(--color-primary);
} .menu-item-has-children{
position: relative;
}
.megamenu-trigger > a,
.menu-item-has-children > a{
position: relative;
align-items: center;
gap: 5px;
}
.megamenu-trigger > a:after,
.menu-item-has-children > a:after{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-down-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-down-outline.svg);
background-color: currentColor;
width: 13px;
height: 13px;
display: inline-block;
transition: transform 0.3s ease-in-out;
}
.menu-item-has-children:hover > a:after,
.megamenu-trigger:hover > a:after{
transform: rotate(180deg);
}
.sub-menu{
background: #FFF;
visibility: hidden;
opacity: 0;
padding: 10px 15px;
position: absolute;
left: 0;
top: 110%;
z-index: 2;
display: block;
box-shadow: var(--box-shadow);
border-top: 3px solid var(--color-primary);
border-radius: 5px;
} @media screen and (min-width: 992px){
ul li:hover > .sub-menu,
ul li:focus-within > .sub-menu,
ul li .sub-menu:hover,
ul li .sub-menu:focus {
visibility: visible;
opacity: 1;
}
}
.megamenu-trigger:hover .megamenu{
display: block !important;
}
.megamenu{
background: #FFF;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 1300px;
max-width: 100%;
border-radius: 5px;
transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
box-shadow: var(--box-shadow);
border-top: 3px solid var(--color-primary);
z-index: 9999;
}
.megamenu .container{
padding: 16px 24px;
column-gap: 16px;
display: flex;
align-items: stretch;
}
.megamenu .text-bold{
letter-spacing: 0.1rem;
color: var(--color-primary);
text-transform: uppercase;
font-weight: 700;
border-bottom: unset;
font-family: var(--font-family-headline);
}
.mm-col{
display: flex;
flex-direction: column;
flex-basis: 20%;
max-width: 20%;
}
.mm-col:last-child{
flex-basis: 40%;
max-width: 40%;
gap: 12px;
}
.mm-col .menu{
flex-direction: column;
align-items: flex-start;
}
.megamenu .menu-item{
display: inline-flex;
flex-basis: 40%;
}
.megamenu .menu-item a{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 0px;
font-weight: normal;
text-transform: uppercase;
border-bottom: unset;
}
.megamenu .menu-item a:hover{
color: var(--color-primary);
} .baner-col img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
transition: transform var(--transition);
}
.mm-col.baner-col a{
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
position: relative;
padding: 16px 38px;
height: 175px;
text-align: right;
font-size: 1.5rem;
overflow: hidden;
}
.mm-col.baner-col a:last-child{
text-align: left;
}
.baner-col a p{
margin: 0;
font-size: 0.9rem;
letter-spacing: 0.15rem;
text-transform: uppercase;
}
.baner-col a:hover img{
transform: scale(1.08);
}
.header--mobile{
display: none;
}
.header--mobile{
padding: 0 15px 0px 15px;
justify-content: space-between;
box-shadow: var(--box-shadow);
position: sticky;
top: 0;
z-index: 1000;
background-color: #ffffff;
}
@media screen and (max-width: 767px){
.header--desktop,
.header-primary__bottom{
display: none;
}
.header--mobile{
display: flex;
}
} .mobile-menu-icon{
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
padding: 15px;
margin-left: -15px;
line-height: 1;
position: relative;
height: 100%;
text-transform: uppercase;
font-size: 0.75rem;
}
.mobile-menu-icon:before{
content: '';
display: inline-block;
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/menu-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/menu-outline.svg);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
background-color: var(--color-text);
width: 30px;
height: 30px;
}
@media screen and (max-width: 480px){
.mobile-menu-icon{
padding: 15px 10px;
}
} .mobile-menu{
position: fixed;
z-index: 2000;
width: 360px;
max-width: 100%;
height: 100%;
background-color: #FFF;
top: var(--admin-bar);
padding: 55px 15px 0;
visibility: hidden;
opacity: 0;
overflow: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
right: 0;
transform: translateX(100%);
}
.mobile-menu.open{
visibility: visible;
opacity: 1;
transform: none;
}
.mobile-menu-close{
position: absolute;
left: 12px;
top: 10px;
width: 24px;
height: 24px;
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/close-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/close-outline.svg);
background-color: var(--color-text);
cursor: pointer;
}
.mobile-menu-container{
overflow-x: hidden;
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.mobile-menu-container > p{
margin: 0;
} .menu-mobile-menu-container{
border-block: var(--border);
padding-block: 12px;
margin-bottom: 16px;
}
.mobile-menu .menu-header-menu-container{
margin: 25px 0 30px;
}
.mobile-menu .menu-item a{
padding: 8px 0;
display: block;
width: 100%;
position: relative;
}
.mobile-menu .menu-item,
.mobile-menu .menu-breadcrumbs{
font-weight: 700;
}
.mobile-menu .menu-breadcrumbs{
padding-bottom: 10px;
display: block;
}
.mobile-menu .menu-back{
display: flex;
align-items: center;
text-transform: uppercase;
margin-bottom: 30px;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
color: var(--color-secondary);
}
.mobile-menu .menu-back::before{
content: '';
display: block;
width: 14px;
height: 14px;
flex-shrink: 0;
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-back-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-back-outline.svg);
background-color: currentColor;
margin-right: 10px;
}
.mobile-menu .menu-item.menu-item-has-children{
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-menu .menu-item.menu-item-has-children a::after{
content: '';
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 14px;
height: 14px;
flex-shrink: 0;
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
background-color: currentColor;
} .mobile-menu .header-tools{
flex-direction: column;
align-items: flex-start;
margin-top: auto;
}
.mobile-menu .header-tools a:not(.sw-cart-icon){
flex-direction: row;
padding-inline: 0;
padding-block: 12px;
border: none;
}  .mobile-menu .wp-block-social-links{
order: 1;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 0.06rem;
}
@media screen and (min-width: 320px){
.mobile-menu .wp-block-social-links{
flex-wrap: nowrap;
}
}
.page-hero {
padding-block: 50px;
background-color: var(--color-primary);
color: #FFF;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.page-hero h1{
margin-bottom: 10px;
}
.page-hero .container > *:not(.page-hero__img){
position: relative;
z-index: 1;
}
.page-hero .rank-math-breadcrumb {
padding: 0;
}
.page-hero img.page-hero__img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
@media screen and (max-width: 480px) {
.page-hero {
padding-block: 20px;
}
.page-hero h1 {
margin-bottom: 5px;
}
}
.page-content--left-sidebar .container,
.page-content--right-sidebar .container {
display: flex;
flex-wrap: wrap;
line-height: 1.5;
}
.page-content--left-sidebar #primary,
.page-content--right-sidebar #primary {
-webkit-box-flex: 0;
-ms-flex: 0 0 80%;
flex: 0 0 80%;
max-width: 80%;
flex: 1 1 0%;
} .sidebar-widget p{
margin: 0;
}
.sidebar-widget h3 {
text-align: left;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin-block: 0;
}
.sidebar-widget h5 {
font-size: 16px;
margin: 5px 0 5px 0px;
display: inline-block;
font-weight: bold;
padding: 6px 0px;
line-height: 1.5;
text-transform: uppercase;
color: #000;
} .sidebar-widget ul {
list-style: none;
padding-left: 0px;
margin: 0;
}
.sidebar-widget ul li.current-cat {
font-weight: 800;
}
.sidebar-widget ul li a{
position: relative;
}
.sidebar-widget ul li a:hover{
color: var(--color-primary);
} .post-sidebar ul li a{
padding-block: 8px;
display: block;
padding-left: 8px;
border-bottom: var(--border);
}
.post-sidebar ul li:last-child a{
border-bottom: unset;
}
.post-sidebar h3{
margin-block: 24px 12px;
} @media screen and (min-width: 993px){
.sidebar-close {
display: none;
}
.page-content--left-sidebar .sidebar-widget,
.page-content--right-sidebar .sidebar-widget {
-webkit-box-flex: 0;
-ms-flex: 0 0 22%;
flex: 0 0 22%;
}
.page-content--right-sidebar .sidebar-widget {
padding-left: 24px;
}
.page-content--left-sidebar .sidebar-widget {
padding-right: 24px;
order: -1;
}
}
@media (max-width: 992px) {
.page-content--left-sidebar #primary,
.page-content--right-sidebar #primary {
flex-basis: 100%;
max-width: 100%;
}
.post-sidebar {
position: fixed;
left: 0;
z-index: 2000;
width: 360px;
max-width: 100%;
height: 100%;
background-color: #FFF;
top: var(--admin-bar);
padding: 60px 16px 32px;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in-out;
transform: translateX(-100%);
box-shadow: var(--box-shadow);
}
.post-sidebar.open{
visibility: visible;
opacity: 1;
transform: none;
}
.sidebar-close{
position: absolute;
right: 20px;
top: 15px;
width: 26px;
height: 26px;
cursor: pointer;
}
.sidebar-close:after{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/close-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/close-outline.svg);
background-color: currentColor;
width: 100%;
height: 100%;
display: inline-block;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
}
.footer-top{
background-color: var(--color-primary);
color: #fff;
padding-block: 16px;
}
.footer-top .menu{
display: flex;
align-items: center;
gap: 20px;
font-weight: 600;
}
.copyright{
padding-block: 1px;
background-color: var(--color-background);
}
.copyright p{
text-align: center;
font-size: 0.75rem;
color: var(--color-secondary);
line-height: 1.2rem;
} .js-toggle-mobile--active .widgettitle,
.js-toggle-mobile--active .block-title{
position: relative;
cursor: pointer;
}
.opener{
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
border-radius: 2px;
position: absolute;
top: 0;
right: 0;
z-index: 0;
color: #FFF;
background-color: var(--color-primary);
}
.opener:after{
content: '';
width: 18px;
height: 18px;
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-down-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-down-outline.svg);
background-color: currentColor;
-webkit-transition: var(--transition);
transition: var(--transition);
}
.js-toggle-mobile--active.open .opener:after{
transform: rotate(180deg);
} .sw-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(35, 35, 44, 0.5);
z-index: 1000;
opacity: 0;
visibility: hidden;
-webkit-transition: var(--transition);
transition: var(--transition);
}
.sw-backdrop.open {
opacity: 1;
visibility: visible;
} @media screen and (max-width: 992px){
footer .footer-top,
footer .footer-bottom{
gap: 20px;
}
footer .ft-col{
max-width: 40%;
width: calc(50% - 10px);
}
}
@media screen and (max-width: 767px){
footer .ft-col{
width: 100%;
}
} .addtoany_list{
display: flex;
flex-direction: row;
}
span.a2a_svg.a2a_s__default{
width: 42px !important;
height: 42px !important;
line-height: 42px !important;
background-color: transparent !important;
padding: 5px;
border-radius: 50% !important;
}
span.a2a_svg.a2a_s__default svg path{
fill: var(--color-text);
}
.a2a_kit a:hover span.a2a_svg.a2a_s__default{
opacity: 0.8;
}
.a2a_svg.a2a_s__default.a2a_s_link{
background-color: var(--border-color) !important;
}
body .blocker{
z-index: 9999999999;
background: rgba(35, 35, 44, 0.5);
}
body .modal{
text-align: center;
width: 100%;
max-width: 700px;
padding: 40px;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
body .modal h4{
font-size: 24px;
font-weight: 400;
line-height: 1.1;
margin: 0 0 10px;
}
@media screen and (max-width: 767px){
body .modal{
padding: 25px 30px;
}
}
@media screen and (max-width: 480px){
body .modal{
padding: 25px 20px;
}
body .modal h4{
font-size: 20px;
}
} #ask-for-product-modal{
padding: 40px 40px 20px;
z-index: 999999999999999;
}
#ask-for-product-modal .submit-wrapper{
display: flex;
justify-content: center;
position: relative;
}
#ask-for-product-modal .screen-reader-response ul{
display: none;
}
#ask-for-product-modal .wpcf7-not-valid-tip{
color: var(--color-red);
}
#ask-for-product-modal .wpcf7-response-output{
margin-top: 20px;
}
#ask-for-product-modal .wpcf7-list-item-label{
font-size: 13px;
line-height: 1.2;
}
#ask-for-product-modal textarea{
font-size: 13px;
height: 120px;
}
#ask-for-product-modal .custom-file-upload-wrapper{
margin-bottom: 25px;
}
#ask-for-product-modal .wpcf7-spinner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(95px, -50%);
margin-top: 0;
margin-inline: 0;
}
@media screen and (max-width: 767px){
#ask-for-product-modal{
padding: 20px;
}
} .check-icon{
display: flex;
align-items: center;
text-align: left;
font-weight: 600;
margin-top: -40px;
margin-inline: -40px;
padding: 20px 45px 20px 20px;
background-color: var(--color-background);
font-size: clamp(0.85rem, 3vw, 1.2rem);
line-height: clamp(1rem, 3vw, 1.4rem);
}
.check-icon::before{
content:'';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/checkmark-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/checkmark-outline.svg);
background-color: currentColor;
}
.related-products__title{
font-weight: 600;
font-size: clamp(1rem, 3vw, 1.2rem);
display: block;
text-align: left;
}
.modal .product-thumbnail{
margin-right: 35px;
width: 160px;
max-width: 100%;
flex-shrink: 0;
}
.modal .product-info{
text-align: left;
}
.modal .product-name{
font-weight: 600;
font-size: clamp(0.85rem, 3vw, 1rem);
line-height: clamp(1rem, 3vw, 1.6rem);
}
.modal .woocommerce-cart-form__cart-item{
margin-block: 35px;
display: flex;
margin-inline: -40px;
padding-inline: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.modal .woocommerce-cart-form__cart-item .price{
display: flex;
flex-direction: column;
}
.modal .woocommerce-cart-form__cart-item .price ins{
text-decoration: none;
font-weight: 600;
}
@media screen and (max-width: 767px){
.modal{
padding: 25px 30px;
}
.check-icon{
margin-top: -25px;
margin-inline: -30px;
}
.modal .woocommerce-cart-form__cart-item{
margin-inline: -30px;
}
}
@media screen and (max-width: 480px){
.modal .product-thumbnail{
margin-right: 15px;
}
.modal .product-thumbnail {
width: 100px;
}
} .modal .blockUI.blockOverlay::before {
height: 1em;
width: 1em;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
content: "";
animation: spin 1s ease-in-out infinite;
background: url(//babysteps.com.pl/wp-content/plugins/woocommerce/assets/images/icons/loader.svg) center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
color: rgba(0,0,0,.75)
}
iframe{
margin-top: 0px;
width: 100%;
border: 0;
}
.iframe-container iframe{
margin-top: 0;
margin-bottom: 20px;
}  #back-to-top {
position: fixed;
bottom: 15px;
right: 20px;
z-index: 990;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #ffffffde;
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
background-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-up-outline.svg);
-webkit-transition: var(--transition);
transition: var(--transition);
box-shadow: var(--box-shadow);
transform: translateX(100%);
visibility: hidden;
opacity: 0;
}
#back-to-top.show{
visibility: visible;
opacity: 1;
transform: none;
}  .rank-math-list-item,
.faq-wrapper{
margin-bottom: 16px;
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
}
.faq-wrapper:hover{
background-color: var(--color-background);
}
.faq-question{
font-size: clamp(1.2rem, 3vw, 1.4rem);
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
gap: 15px;
padding: 16px;
}
.faq-question:after{
content: '';
display: inline-block;
width: 24px;
height: 24px;
flex-shrink: 0;
transition: var(--transition);
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/add-circle-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/add-circle-outline.svg);
background-color: var(--color-primary);
}
.rank-math-list-item.open .faq-question:after,
.faq-wrapper.open .faq-question:after{
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/remove-circle-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/remove-circle-outline.svg);
background-color: var(--color-red);
}
.faq-answer{
padding: 0px 16px 16px;
}
body:not(.home) .faq-answer{
display: none;
} .cta{
margin-block: 60px 20px;
position: relative;
}
.cta-wrapper{
position: relative;
}
.cta img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
filter: brightness(0.8) contrast(0.9);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.cta-content{
padding-block: 120px;
text-align: center;
color: #fff;
}
.cta-content a{
background-color: var(--color-red);
padding: 10px 24px;
border-radius: 4px;
font-weight: 600;
}
.cta-content a:hover{
color: #fff;
background-color: var(--color-primary);
}
.wp-block-social-links {
font-size: 16px;
}  ul.menu,
ul.sub-menu {
list-style: none;
padding-left: 0;
margin-block: 0;
}   .wc-block-product-categories-list {
list-style: none;
padding-left: 0;
margin-block: 0;
}
.wc-block-product-categories-list li+li {
margin-top: .6rem;
}  .wp-block-latest-posts {
margin-block: 0;
}
.wp-block-latest-posts li {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
padding-left: 90px;
min-height: 75px;
}
.wp-block-latest-posts li+li {
margin-top: 15px;
}
.wp-block-latest-posts__featured-image {
position: absolute;
left: 0;
}
.wp-block-latest-posts__featured-image img{
width: 75px;
}
.wp-block-latest-posts__post-title {
font-size: 1rem;
line-height: 1.3rem;
font-weight: 600;
}
.wp-block-latest-posts__post-date {
display: flex;
align-items: center;
}
.wp-block-latest-posts__post-date::before {
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/calendar-number-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/calendar-number-outline.svg);
background-color: currentColor;
width: 1em;
height: 1em;
margin-right: 3px;
}  .wp-block-search__inside-wrapper{
background-color: var(--color-background);
border: var(--border);
border-radius: var(--border-radius);
padding: 5px;
}
.wp-block-search__label {
display: none;
}
.wp-block-search__input {
background-color: var(--color-background);
padding-inline: 8px;
}
.wp-block-search__button.has-icon {
background-color: transparent;
border: none;
margin-left: 0;
}
.wp-block-search__button svg {
transform: rotate(-90deg);
}  .wp-block-tag-cloud .tag-cloud-link {
padding: 2px 12px;
border: 1px solid var(--border-color);
display: inline-block;
font-size: 12px;
margin-bottom: 3px;
background: #fff;
margin-right: 0;
border-radius: 3px;
}
.calendar{
margin-bottom: 60px;
}
.timeline__more-btn{
background-color: transparent;
color: var(--color-red);
text-transform: uppercase;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
margin-inline: auto;
margin-top: 40px;
display: flex;
justify-content: center;
}
.timeline__more-btn:hover{
color: var(--color-primary);
}
.timeline{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.timeline-ele-wrapper{
position: relative;
}
.timeline-ele-wrapper:before{
content: '';
display: block;
width: 16px;
height: 16px;
border: 1px solid var(--color-text);	
border-radius: 50%;
margin-bottom: 32px;
flex-shrink: 0;
}
.timeline-ele-wrapper:not(:last-child):after{
content: "";
display: block;
border-top: 1px solid #707070;
width: calc(100% - 32px);
position: absolute;
left: 32px;
top: 0.5rem;
}
.timeline-ele__date{
font-weight: 600;
color: var(--color-primary);
}
.timeline-ele-wrapper:first-child:before{
background-color: var(--color-red);
border-color: var(--color-red);
}
@media screen and (max-width: 992px){
.timeline{
grid-template-columns: 1fr;
}
.timeline-ele-wrapper{
display: flex;
gap: 32px;
}
.timeline-ele__date{
margin-top: 0;
line-height: 1.2rem;
}
.timeline-ele-wrapper:not(:last-child):after{
border-left: 1px solid #707070;
width: 1px;
height: calc(100% - 32px);
position: absolute;
left: 0.5rem;
top: 2.5rem;
}
} input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none;
}
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="password"],
textarea, 
select {
height: 40px;
width: 100%;
padding: 10px 24px;
border:	unset;
border-bottom: 1px solid var(--color-secondary);
display: block;
font-size: 0.8rem;
line-height: 1.25;
font-family: var(--font-family-text);
transition: var(--transition);
background-color: transparent;
border-radius: 3px;
color: var(--color-text);
}
textarea,
.woocommerce form .form-row textarea{
height: 180px;
resize: vertical;
} input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #a4a4a4;
text-transform: uppercase;
}
input.yith-s{
outline: none;
}
@media (max-width: 1025px){
input.yith-s{
display: none;
}
} select{
transition: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.nice-select{
height: 40px;
transition: none;
border: var(--border);
border-radius: 3px;
padding-inline: 10px;
font-size: 0.85rem;
font-family: var(--font-family-text);
transition: var(--transition);
}
.nice-select:hover{
border: 1px solid var(--color-secondary);
}
.nice-select:after{
border-bottom: 1px solid var(--color-text);
border-right: 1px solid var(--color-text);
}
@media screen and (max-width: 480px){
.nice-select .nice-select-dropdown{
left: unset;
right: 0;
}
} input[type="submit"] {
color: #fff;
background-color: var(--color-primary);
border: unset;
height: 40px;
padding-inline: 16px;
min-width: 160px;
text-transform: uppercase;
font-family: inherit;
font-weight: 600;
transition: var(--transition);
cursor: pointer;
width: 100%;
border-radius: 30px;
}
input[type="submit"]:hover {
background-color: var(--color-text);
border: none;
}
.wpcf7 .wpcf7-submit:disabled {
opacity: 0.8;
} .wpcf7-form .wpcf7-form-control-wrap{
display: block;
margin-bottom: 20px;
width: 100%;
}
.wpcf7 form .wpcf7-response-output{
margin: 20px 0;
}
label{
width: 100%;
}
label.row-6{
display: inline-flex;
width: 48%;
} .wpcf7-spinner{
vertical-align: middle;
} .get_gus_data{
cursor: pointer;
font-size: 12px;
display: block;
width: 100%;
text-align: right;
transition: var(--transition);
}
.get_gus_data:hover{
color: var(--color-primary);
} @media screen and (min-width: 768px){
form .row{
display: flex;
justify-content: space-between;
gap: 15px;
margin-bottom: 15px;
}
form .row > *{
width: 100%;
}
}
@media screen and (max-width: 767px){
form .row .wpcf7-form-control-wrap{
display: block;
margin-bottom: 15px;
}
}
.form--nolabels form > .wpcf7-form-control-wrap{
display: block;
margin-bottom: 15px;
} .wpcf7-not-valid-tip{
position: absolute;
bottom: -16px;
left: 0;
font-size: 0.75rem;
} @media screen and (max-width: 768px){
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="password"],
textarea, 
select,
.nice-select{
font-size: 1rem;
}
.wpcf7-spinner{
margin-top: 10px;
}
}
.grecaptcha-badge { visibility: hidden; } .comment-reply-title {
font-size: 1.6rem;
text-align: center;
margin-bottom: 0;
}
.logged-in-as,
.form-submit,
.comment-notes,
.comment-form-rating {
text-align: center; 
}
@media screen and (min-width: 769px) {
.comment-form-author,
.comment-form-email {
width: 48%;
}
.comment-form-author {
float: left;
}
.comment-form-email {
float: right;
}
.comment-form-cookies-consent {
clear: both;
}
}
.wpcf7-acceptance .wpcf7-list-item {
display: block;
margin: 10px 0;
}
.wpcf7-acceptance label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: unset;
font-size: 15px;
line-height: 1.4;
position: relative;
cursor: pointer;
}
.wpcf7-acceptance label a{
font-weight: 800;
}
form input[type=checkbox],
form input[type=radio],
table input[type=checkbox],
table input[type=radio] {
position: absolute;
visibility: hidden;
}
form input[type=checkbox]+*,
form input[type=radio]+*,
table input[type=checkbox]+*,
table input[type=radio]+* {
position: relative;
padding-left: 30px;
text-align: left;
cursor: pointer;
line-height: 1.4rem;
display: block;
}
form input[type=checkbox]+*:before,
form input[type=radio]+*:before,
table input[type=checkbox]+*:before,
table input[type=radio]+*:before{
content: '';
display: block;
position: absolute;
border: 1px solid #14141482;
height: 16px;
width: 16px;
top: 3px;
left: 0;
transition: var(--transition);
border-radius: 3px;
}
form input[type=checkbox]+*:hover:before,
form input[type=radio]+*:hover:before,
table input[type=checkbox]+*:hover:before,
table input[type=radio]+*:hover:before {
background-color: var(--border-color);
}
form input[type=checkbox]+*:after,
form input[type=radio]+*:after,
table input[type=checkbox]+*:after,
table input[type=radio]+*:after {
display: block;
position: absolute;
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/checkmark-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/checkmark-outline.svg);
background-color: currentColor;
width: 24px;
height: 24px;
color: #fff;
color: var(--color-primary);
top: -1px;
left: -1px;
visibility: hidden;
line-height: 1;
}
form input[type=checkbox]:checked+*:after,
form input[type=radio]:checked+*:after,
table input[type=checkbox]:checked+*:after,
table input[type=radio]:checked+*:after {
visibility: visible;
}
@media screen and (max-width: 480px){
form input[type=checkbox]+*,
form input[type=radio]+*,
table input[type=checkbox]+*,
table input[type=radio]+* {
padding-left: 24px;
}
}
input[type="file"] {
display: none;
}
.custom-file-upload-wrapper{
position: relative;
}
.custom-file-upload-wrapper input[type="text"]{
cursor: not-allowed;
pointer-events: none;
}
.custom-file-upload-wrapper label.custom-file-upload {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
padding: 10px 10px;
cursor: pointer;
color: #FFF;
font-size: 12px;
line-height: 1;
white-space: nowrap;
text-align: center;
font-weight: 800;
transition: var(--transition);
position: absolute;
right: 0;
top: 0;
height: 100%;
margin-top: 0;
width: 115px;
}
.woocommerce form .custom-file-upload-wrapper label.custom-file-upload{
padding: 10px 10px;
}
.custom-file-upload:hover {
background-color: #000;
}
.custom-file-upload span {
margin: 0;
}
.custom-file-upload .wpcf7-not-valid-tip{
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
}
.custom-file-upload-wrapper img{
position: absolute;
width: auto;
max-width: 120px;
height: 60px;
top: 50%;
transform: translateY(-50%);
right: 115px;
aspect-ratio: 1/1;
object-fit: cover;
}
.contact-page--columns .custom-file-upload-wrapper img{
filter: none;
object-fit: cover;
padding: 0;
width: auto;
height: 60px;
}
.custom-file-upload__tooltip{
position: absolute;
top: -10px;
left: -10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #80808063;
display: inline-block;
padding: 10px;
cursor: pointer;
z-index: 1;
}
.custom-file-upload__tooltip:before{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/help-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/help-outline.svg);
background-color: currentColor;
width: 12px;
height: 12px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.custom-file-upload__tooltip-text{
visibility: hidden;
width: 250px;
background-color: #000000d9;
color: #fff;
text-align: center;
padding: 5px 10px;
border-radius: 6px;
position: absolute;
z-index: 1;
top: 50%;
left: 35px;
transform: translateY(-75%);
transition: 0.3s;
}
.custom-file-upload__tooltip-text::after {
content: " ";
position: absolute;
top: 50%;
left: -5px;
transform: translateY(-50%);
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.custom-file-upload__tooltip:hover .custom-file-upload__tooltip-text{
visibility: visible;
}
@media screen and (max-width: 460px){
.custom-file-upload__tooltip-text{
width: 195px;
font-size: 13px;
line-height: 1.2;
}
.custom-file-upload-wrapper img{
right: 60px;
}
.custom-file-upload .wpcf7-not-valid-tip{
font-size: 12px;
transform: none;
right: 0;
left: unset;
}
} .form--uptade-file {
display: flex;
width: 100%;
}
.form--uptade-file span.wpcf7-form-control-wrap {
width: 100%;
}
.form--uptade-file input[type="text"] {
cursor: not-allowed;
} .blog .page-content,
.archive:not(.woocommerce) .page-content,
.search .page-content{
padding-block: 30px;
}
.blog .sidebar-show-btn{
margin-bottom: 24px;
display: none;
} .posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
padding-bottom: 50px;
}
.search-no-results .posts{
grid-template-columns: 1fr;
} @media screen and (max-width: 992px){
.mobile-scroll .posts{
display: flex;
overflow-x: scroll;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.mobile-scroll .post{
width: 400px;
max-width: 100%;
margin: 0;
flex-shrink: 0;
overflow: unset;
scroll-snap-align: center;
}
.blog .sidebar-show-btn{
display: flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
height: 40px;
border: none;
text-align: center;
position: relative;
background: var(--color-primary);
color: #fff;
transition: var(--transition);
border-radius: 3px;
width: 100%;
flex-grow: 1;
margin-top: 2px;
font-size: 1rem;
}
.blog .sidebar-show-btn:before{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/options-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/options-outline.svg);
background-color: currentColor;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 10px;
}
} .post {
display: flex;
flex-direction: column;
position: relative;
}
.post__thumbnail {
display: flex;
background-color: grey;
background-image: repeating-linear-gradient(45deg,#eee,#eee 10px,#ddd 10px,#ddd 20px);
overflow: hidden;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.post__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius) var(--border-radius) 0 0;
} .post__category a{
background-color: var(--color-primary);
color: #fff;
text-transform: uppercase;
font-weight: 600;
padding: 2px 12px;
border-radius: 4px;
}
.posts .post__category a{
position: absolute;
top: 16px;
left: 16px;
} .post__content {
padding: 25px;
background-color: #fff;
transition: var(--transition);
flex-grow: 1;
display: flex;
flex-direction: column;
border-radius: 0px 0px 8px 8px;
}
.post:hover .post__content {
background: #f6f6f6;
}
.post__title h2 {
font-size: 20px;
line-height: 1.5rem;
margin-top: 6px;
margin-bottom: 0;
}
.post__excerpt p {
margin-bottom: 32px;
margin-top: 0;
} .post__meta {
display: flex;
flex-wrap: wrap;
color: #999999;
font-size: 12px;
}
.post__meta>* {
padding-right: 7px;
}
.post__data {
display: flex;
align-items: center;
}
.post__data:not(:empty):before {
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/calendar-number-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/calendar-number-outline.svg);
background-color: currentColor;
width: 1em;
height: 1em;
margin-right: 3px;
} a.post__read-more {
position: relative;
align-items: flex-end;
display: inline-flex;
margin-top: auto;
color: var(--color-primary);
text-transform: uppercase;
font-weight: 700;
} .pagination{
margin-bottom: 50px;
display: flex;
justify-content: center;
}
.pagination .nav-links{
display: flex;
}
.pagination .page-numbers{
width: 32px;
height: 32px;
border-radius: 50%;
display: -webkit-box;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary);
font-size: 16px;
font-weight: 700;
background-color: var(--color-background);
}
.pagination .page-numbers:hover{
opacity: var(--hover-opacity);
}
.pagination .page-numbers + .page-numbers{
margin-left: 14px;
}
.pagination .prev, .pagination .next{
font-size: 0;
background-color: transparent;
}
.pagination .prev:before,
.pagination .next:before{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
background-color: currentColor;
width: 20px;
height: 20px;
}
.pagination .prev{
transform: rotate(180deg);
}
.pagination .page-numbers.current{
background-color: var(--color-primary);
color: var(--color-background);
} @media screen and (max-width: 480px){
.posts{
grid-template-columns: 1fr;
}
.post{
max-width: 100%;
overflow: hidden;
}
.pagination .page-numbers{
width: 48px;
height: 48px;
}
.pagination .page-numbers + .page-numbers{
margin-left: 7px;
}
}
.single-post .page-content {
padding-block: 20px;
}
.single-post .rank-math-breadcrumb {
margin-bottom: 20px;
padding: 0;
}
.single-post .rank-math-breadcrumb p {
text-align: center;
} .post__featured {
position: relative;
}
.post__featured__image {
display: block;
height: auto;
width: 100%;
object-fit: cover;
}
.single-post .post__date {
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
padding: 10px;
display: flex;
flex-direction: column;
text-align: center;
background-color: #fff;
border-radius: 4px;
box-shadow: var(--box-shadow);
}
.post__date__day {
font-size: clamp(1.3rem, 4vw, 2rem);
font-weight: 600;
line-height: clamp(1.6rem, 4vw, 2.3rem);
}
.post__date__month {
font-size: clamp(0.9rem, 4vw, 1.2rem);
text-transform: uppercase;
letter-spacing: .1rem;
font-weight: 400;
} .single-post .post__category a{
padding: 8px 24px;
}
.post__main__header {
margin-block: -30px 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.post__main {
position: relative;
margin-inline: auto;
padding: 20px 40px 40px;
max-width: 1200px;
margin-top: -60px;
z-index: 1;
background-color: #FFF;
border-radius: var(--border-radius);
box-shadow: 0px -25px 25px 5px #80808026;
}
.single-post h1 {
font-size: clamp(1.8rem, 3vw, 2rem);
line-height: clamp(2rem, 3vw, 2.4rem);
margin-top: 32px;
margin-bottom: 15px;
text-align: center;
}
.single-post .addtoany_list {
justify-content: center;
}
.single-post span.a2a_svg.a2a_s__default {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
.post__main img {
border-radius: var(--border-radius);
} .single-post .wp-block-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 32px;
}
.single-post .wp-block-tag-cloud .tag-cloud-link {
border: 1px solid var(--color-primary);
color: var(--color-primary);
text-transform: uppercase;
font-weight: 600;
background-color: #459eff12;
}
.single-post .wp-block-tag-cloud .tag-cloud-link:hover {
background-color: var(--color-primary);
color: #fff;
} .post__navigation {
position: relative;
display: flex;
justify-content: space-between;
padding-block: 64px;
margin-inline: -40px;
padding-inline: 40px;
background-color: var(--color-background);
margin-block: 50px;
}
.post__navigation span {
text-transform: uppercase;
font-family: var(--font-family-text);
font-weight: 600;
position: relative;
display: flex;
align-items: center;
margin-bottom: 5px;
gap: 10px;
font-size: clamp(0.75rem, 3vw, 1rem);
}
.post__navigation a[rel="next"] {
text-align: right;
}
.post__navigation a[rel="next"] span {
justify-content: flex-end;
}
.post__navigation a[rel="next"] span::after,
.post__navigation a[rel="prev"] span::before {
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
background-color: currentColor;
width: 16px;
height: 16px;
display: inline-block;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
}
.post__navigation a[rel="prev"] span::before {
transform: rotate(180deg);
} .post__recent-posts .section-title {
font-size: 1.6rem;
margin-bottom: 32px;
margin-top: 60px;
}
.post__recent-posts .posts {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
padding-bottom: 24px;
}
.post__recent-posts .post__content {
padding: 10px;
}
.post__recent-posts .post__meta,
.post__recent-posts .post__excerpt,
.post__recent-posts .post__read-more {
display: none;
} .post__comment-form .comment-respond {
border-top: var(--border);
margin-top: 24px;
}
.post__comment-form .post__comment-form {
padding-bottom: 40px;
} @media screen and (max-width: 768px) {
.post__main {
margin-top: 0;
padding: 20px;
}
.single-post span.a2a_svg.a2a_s__default{
width: 42px !important;
height: 42px !important;
line-height: 42px !important;
}
.post__navigation {
margin-inline: -20px;
gap: 12px;
padding-inline: 20px;
}
.post__navigation a {
font-size: 0;
}
}
.post__the_content p a{
text-decoration: underline;
}
.post__the_content figure.wp-block-gallery.has-nested-images {
margin-inline: 0;
}
.post__the_content p:nth-child(1) {
margin-top: 0;
} .wc-block-grid__product.wc-block-grid__product{
display: flex;
flex-direction: column;
}
.wc-block-grid__products .wc-block-grid__product-image img{
width: 100%;
}
.wc-block-grid .wc-block-grid__product-onsale{
right: auto;
left: 12px;
top: 12px;
}
.wc-block-grid__product-add-to-cart.wp-block-button{
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: flex-end;
}
.wc-block-grid__product .added_to_cart{
display: none;
}
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link{
font-size: 0.75rem;
padding: 8px 16px;
}
@media screen and (max-width: 992px){
.post__main .wc-block-grid .wc-block-grid__products{
display: flex;
overflow-x: scroll;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.post__main .wc-block-grid .wc-block-grid__products li.wc-block-grid__product{
scroll-snap-align: center;
flex-shrink: 0;
width: 250px;
max-width: 100%;
margin: 0;
flex-shrink: 0;
overflow: unset;
padding-inline: 0;
}
} .swiper {
width: 100%;
height: 100%;
} .swiper-button-next, .swiper-button-prev{
width: calc(var(--swiper-navigation-size)/ 44 * 40);
background: hsla(0, 0%, 100%, 0.75);
border-radius: 2px;
box-shadow: var(--box-shadow);
}
.swiper-button-prev:after,
.swiper-button-next:after{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
background-color: #333;
width: 16px;
height: 16px;
display: inline-block;
}
.swiper-button-prev:after{
transform: rotate(180deg);
} .swiper-pagination-bullet{
--swiper-pagination-bullet-horizontal-gap: 2px;
transition: var(--transition);
width: 8px;
height: 8px;
}
.swiper-pagination-bullet-active{
background: #fff;
width: 16px;
border-radius: 12px;
} .error404 .error {
text-align: center;
margin: 20px 0;
}
.error404 .error .container {
border: solid 20px #f9f9f9;
padding: 20px 25px;
text-align: center;
}
.error404 .text404{
font-size: 72px;
line-height: 1.3;
opacity: .5;
font-weight: 900;
}