:root {

    /* 1800*/
    --pad: clamp(15px, 10.9vw, 220px);
    --toppad: clamp(30px, 5.7vw, 70px);
    --botpad: clamp(40px, 6.3vw, 80px);


    font-family: "mozaic-hum-variable", sans-serif !important;
    font-variation-settings: "wght" 400;

}

@media (max-width: 1500px){
    :root {
        --pad: clamp(15px, 9vw, 450px);

    }
}

@media (max-width: 1200px){
    :root {
        --pad: clamp(15px, 7vw, 450px);
        --widepad: clamp(15px, 5vw, 130px);
    }
}

@media (max-width: 900px){
    :root {
        --pad: clamp(15px, 5vw, 450px);
    }
}

body{
    color: #231F20;
    background: #F0F1F1;
}

.container{
    animation: startopa 0.5s linear forwards;
    animation-direction: alternate;
    opacity: 0;
}

@keyframes startopa {
    from {opacity: 0; }
    to { opacity: 1;}
}

.project-pads{
    padding-left: var(--pad);
    padding-right: var(--pad);   
}

.project-pads-left{
    padding-left: var(--pad);
}

.project-pads-right{
    padding-right: var(--pad);
}

.project-margins{
    margin-left: var(--pad);
    margin-right: var(--pad);
}

.topbotpad{
    padding-top: var(--toppad);
    padding-bottom: var(--botpad);
}

.toppad{
    padding-top: var(--toppad); 
}

.botpad{
    padding-bottom: var(--botpad);
}

.topmargin{
    margin-top: var(--toppad);
}

.botmargin{
    margin-bottom: var(--botpad);
}


h1, h2, h3, h4, h5 {
    font-family: "mozaic-geo-variable", sans-serif;
    font-weight: 700;
    line-height: 1.2em;
    padding-bottom: 20px;
}

h1 {
    font-size: var(--font50);
}

h2 {
    font-size: var(--font40);
}

h3 {
    font-size: var(--font36);
}


h4 {
    font-size: var(--font32);
    font-family: "mozaic-geo-variable", sans-serif;
    font-variation-settings: "wght" 400; 
}

h5 {
    font-size: var(--font30);
    font-family: "mozaic-geo-variable", sans-serif;
    font-variation-settings: "wght" 400; 
}

h6 {
    font-size: var(--font26);
    font-family: "mozaic-geo-variable", sans-serif;
    font-variation-settings: "wght" 400; 
}

p {
    font-family: "mozaic-hum-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: var(--font18) !important;
    padding-bottom: 1em;
    line-height: 1.2em;
}

 span {
    font-family: "mozaic-hum-variable", sans-serif;
    font-variation-settings: "wght" 400;
 }

a, li {
    font-family: "mozaic-hum-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: var(--font18);
    text-decoration: none;
}

a {
    display: inline;
    color: #1a9561;
}

li {
    color: #1a9561;
}

.ylabanneri-box a {
    color: #23e996 !important;
}

.ylabanneri-box a.btn.text-black {
    color: #000 !important;
}

footer a, .exfd-cart-content .woocommerce-mini-cart__buttons a {
    display: block;
}

label, select, input, textarea {
    font-family: "mozaic-hum-variable", sans-serif !important;
    font-size: var(--font18) !important;
    font-variation-settings: "wght" 400;
}

ul {
    padding-bottom: 1em;
}


#nav-basic-logopart a h3 {
    padding-bottom: 0px;
}


.btn{
    font-size: var(--font18);
    gap: 15px;
    padding: 4px 4px 8px 14px;
    max-width: 250px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 50px;
    margin-bottom: 5px;
}


.btn svg{
    /* height: var(--font18); */
    align-self: center;
    justify-self: center;
}

.text-primary {
    color: #0D5B3A;
}

.text-white {
    color: #FFF;
}

.text-black {
    color: #2E2E2E;
}

.text-green {
    color: #1A9561;
}

.text-light-green {
    color: #2EE99A;
}

.bg-green {
    background: #1A9561;
    background-color: #1A9561;
}

.bg-light-green {
    background: #1a9561c2;
    background-color: #1a9561c2;
}

.bg-yellow {
    background: #FEBE20;
    background-color: #FEBE20;
}

.bg-light-yellow {
    background: #FEF4DB;
    background-color: #FEF4DB;
}

.p-primary {
    padding: 15px;
}

.p-small {
    padding: 5px;
}

.pb-small {
    padding-bottom: 5px;
}

.p-medium {
    padding: 10px;
}

.pb-medium {
    padding-bottom: 10px;
}

.p-large {
    padding: 20px;
}

.pb-large {
    padding-bottom: 20px;
}

.border-radius {
    border-radius: 15px;
}

.min-h-screen {
    min-height: 100vh;
}

/* Custom Blocks */

.ylabanneri-box {
    max-width: 900px;
    height: fit-content;
}

.ylabanneri-helper {
    place-content: end;
}

.ylabanneri-text {
    max-width: 600px;
}

#ylabanneri img {
    aspect-ratio: 9 / 4;
}

.infobanneri-helper {
    gap: 32px;
}

.infobanneri-rightpart {
    align-content: center;
}

.infobanneri-title, .tuoteshowcase-title, .contactform-title {
    border-bottom: 2px solid #1A9561;
    margin-bottom: 16px;
    margin-right: 16px;
}

.infobanneri-list-item {
    display: grid;
    grid-template-columns: 60px 1fr;
}

.infobanneri-ympyra {
    width: 50px;
    height: 50px;
}

.infobanneri-ympyra-noimg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #1A9561;
    margin-right: 10px;
}

.infobanneri-ympyra img {
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #1A9561;
    margin-top: 4px;
}

.footer-bgimg {
    height: 100% !important;

}

.footer-grid {
    gap: 24px;
}

.footer-part-1 {
    border-right: 2px solid #fff;    
    padding-right: 36px;
}

.footer-part-2 {
    padding-top: 12px;
    padding-left: 12px;
}

.sivuston-nimi {
    padding-bottom: 16px;
}

.pikalinkit-teksti {
    padding-bottom: 16px;
}

.pikalinkit {
    padding-bottom: 24px;
}

.sosiaalinen-media {
    display: flex;
}

.sosiaalinen-media a {
    width: 26px;
    height: 26px;
    margin-right: 8px;
}

#textandimage .textandimage-leftpart, #textandimage .textandimage-rightpart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
}

.textandimage-inner-helper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.basictextarea-helper {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.deliverypoints-list {
    gap: 30px;
}

.deliverypoints-list-item {
    display: flex;
    flex-direction: column;
    height: 100%; 
    min-height: 0; 
    background: #FEF4DB !important;
    background-color: #FEF4DB !important;
    color: #101010;
}

.deliverypoints-list-item-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; 
    min-height: 0;
    padding: 20px;
}

.deliverypoints-list-item-text {
    flex: 1 1 auto;
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px solid #10101073;
    border-bottom: 1px solid #10101073;
    overflow: auto;
}

.deliverypoints-list-item-text a {
    color: #101010 !important;
    text-decoration: underline;
    font-size: var(--font18);
}

.deliverypoints-btn,
.deliverypoints-list-item-footer {
    margin-top: 12px;
}

.ylabanneri-text-and-button {
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .ylabanneri-text-and-button {
        flex-direction: column-reverse;
    }
}

/* small helpers */
.deliverypoints-list-item-icon,
.deliverypoints-list-item-title {
    margin-bottom: 8px;
}

.exwf-catv2.exfd-cart-content .woocommerce-mini-cart > li {
    border-radius: 15px !important;
}

.textandmap-inner-helper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

.footer-sivuston-logo {
    height: 100px !important;
    margin-bottom: 12px !important;
}

@media (max-width: 700px) {
    .textandimage-inner-helper {
        display: flex;
    }
    .textandimage-inner-helper.reverse {
        flex-direction: column-reverse;
    }
    .textandimage-inner-helper.normal {
        flex-direction: column;
    }
    .basictextarea-helper {
        grid-template-columns: 1fr;
    }
    .textandmap-inner-helper {
        grid-template-columns: 1fr;
    }

    .footer-part-1 {
        border-right: none;
        padding-right: 0;
    }
    .footer-part-2 {
        padding-left: 0;
        padding-top: 0;
    }
    footer img {
        width: auto !important;
    }
}

@media (max-width: 600px) {
    #ylabanneri {
        display: block;
    }
    .ylabanneri-helper {
        padding: 0;
    }
    .ylabanneri-box {
        border-radius: 0;
        background: #1a9561;
    }
}

.exfd-cart-content .woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;
}

.button.wc-forward, .button.checkout.wc-forward, .exfd-cart-content .woocommerce-mini-cart__buttons a {
    border-radius: 15px !important;
}

/* .button.wc-forward {
    margin-top: 12px !important;
} */

.ex-fdlist .exstyle-1 figcaption .exbt-inline,
.ex-fdlist .exstyle-2 figcaption .exbt-inline {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%) !important; /* Safari-specific prefix */
  display: flex !important;
    justify-content: center !important;
}

.exwf-mbnav-content > .exwf-mbnav-item.exwf-dl-info {
    max-width: 40%;
    border: 0;
    text-align: left;
    display: none !important;
}

.exwf-mbnav-item.exwf-account-icon {
    display: none !important;
}

.exbt-inline .exwoofood-woocommerce .single-product form.cart {
    display: flex !important;
}

/* Blogikohtaiset CSS */

.blog-title, .blog-single-recommendations-title {
    color: #000;
    border-bottom: 2px solid #1a9561;
    width: fit-content;
    margin-bottom: 32px;
    padding-bottom: 8px;
}

.blog-list {
    display: grid;
    gap: 24px;
}

.blog-card {
    padding: 16px;
}

.blog-card-title {
    padding-bottom: 4px;
    color: #1a9561;
}


.blog-card-meta {
    padding-bottom: 8px;
    color: #000000;
}

.blog-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    background: #fef4db;
    border-radius: 15px;
}

.blog-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.blog-card img {
    aspect-ratio: 1/1;
    height: fit-content;
    object-fit: cover;
    margin-bottom: 16px;
}

.blog-card-img-single img {
    margin-bottom: 16px;
    margin-top: 16px;
    height: 100%;
    max-width: 1000px;
    width: 100%;
}

.blog-content {
    max-width: 1000px;
}

.blog-card-button {
    margin-top: 16px;
}

.blog-card-title {
    color: #1a9561;
}
.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.blog-card-title a:hover {
    /* color: #1bbd7e; */
}
.blog-card-meta {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 12px;
}
.blog-card-excerpt {
    font-size: 1.05rem;
    color: #222;
    margin-bottom: 18px;
    line-height: 1.5em;
}

.blog-listing {
    display: grid;
    gap: 24px;
}

.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5 {
    margin-top: 24px;
}


/* .btn.blog-card-readmore {
    align-self: flex-start;
    background: #2EE99A;
    color: #fff;
    border-radius: 8px;
    padding: 8px 22px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 1px 4px 0 rgba(44, 62, 80, 0.08);
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}
.btn.blog-card-readmore:hover {
    background: #1bbd7e;
    color: #fff;
} */

/* @media (max-width: 900px) {
    .blog-list.col-3, .blog-listing.col-3 {
        grid-template-columns: 1fr 1fr !important;
    }
    .blog-card {
        margin-bottom: 18px;
    }
}
@media (max-width: 600px) {
    .blog-list.col-3, .blog-listing.col-3 {
        grid-template-columns: 1fr !important;
    }
    .blog-card-content {
        padding: 18px 12px 16px 12px;
    }
} */


.testimonials-helper {
    background: #1a9561;
}

.testimonials-list {
    display: grid;
    gap: 16px;
}

.testimonials-title {
    color: #fff;
    border-bottom: 2px solid #fff;
    width: fit-content;
    padding-bottom: 6px;
}

.testimonials-text {
    margin-top: 16px;
    color: #fff;
    padding-bottom: 8px;
}

.testimonials-list-item {
    background: #fff;
    color: #1a9561;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonials-list-item-img {
    width: 50%;
    margin: 16px 0 0 0;
}

.testimonials-list-item-img img {
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.testimonials-list-item-name {
    margin-top: 8px;
}

.testimonials-list-item-stars {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid;
    padding-bottom: 16px;
    margin: 8px 0 16px 0
}

.testimonials-list-item-stars svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0px 0px 1px #1a9561);
}

.testimonials-list-item-text {
    padding: 0 16px 0 16px;
    text-align: center;
}

.ex-fly-cart {
    width: 100% !important;
}

.ex_s_lick-track .item-grid .exp_arrow .exstyle-3 figcaption h3 a {
    font-size: var(--font16) !important;
}

.ex-fdlist .exstyle-3 .exstyle-3-image .exbt-inline span {
    cursor: pointer;
    width: 100%;
    padding: 10px 20% !important;
    /* z-index: 9999999999; */
    text-align: end;
    display: none !important;
}

.ex_s_lick-track .item-grid .exp-arrow figure figcaption {
    position: absolute;
    bottom: 0 !important;
    left: 0;
    background: rgba(255, 255, 255, 0.88) !important;
    /* width: min-content; */
    height: 100%;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.exstyle-4-button.exfd-choice {
    border-radius: 15px !important;
}

.exwf-md-up-sells .ex-fdlist .exstyle-4 {
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: row-reverse;
}

.cart-collaterals .cross-sells {
    display: none !important;
}




.btn p{
    padding-bottom: 0px;
}

.delivery-method-btn {
    color: #FFF;
    background-color: #1A9561;
    border-radius: 15px;
    font-size: var(--font18);
    gap: 15px;
    padding: 8px 4px 9px 8px;
    max-width: 250px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 50px;
    margin-bottom: 5px;
    align-items: center;
    font-family: 'mozaic-hum-variable';
    width: fit-content;
}

.delivery-method-btn:active {
    background: #0D5B3A !important;
}

.delivery-method-btns {
    display: flex;
    margin-top: 8px;
    margin-bottom: 16px;
}

.delivery-method-btns label {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font24) !important;    
}

#delivery-method-choice {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}