.elementor-kit-10004{--e-global-color-primary:#252525;--e-global-color-secondary:#54595F;--e-global-color-text:#252525;--e-global-color-accent:#B54A33;--e-global-color-51c4109:#FDFDFD;--e-global-color-61d42bf:#0491C0;--e-global-color-001df23:#F1F1F1;--e-global-typography-primary-font-family:"Open Sans";--e-global-typography-primary-font-size:53px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-secondary-font-family:"Open Sans";--e-global-typography-secondary-font-size:35px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-line-height:46px;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:19px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:24px;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:500;--e-global-typography-8617b54-font-size:27px;--e-global-typography-8617b54-font-weight:600;}.elementor-kit-10004 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10004 a{color:var( --e-global-color-accent );font-weight:600;}.elementor-kit-10004 a:hover{color:var( --e-global-color-text );}.elementor-kit-10004 h1{font-size:53px;}.elementor-kit-10004 h2{font-size:35px;}.elementor-kit-10004 h3{font-size:29px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-10004{--e-global-typography-primary-font-size:45px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:25px;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-secondary-letter-spacing:-0.6px;--e-global-typography-8617b54-font-size:21px;--e-global-typography-8617b54-line-height:1.1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== HINNASTO KORTIT ===== */


.Hinnasto {
    background-color: #eee;
    border-radius: 20px;
    padding: 20px;

}



.Hinnasto .e-con-inner > .e-child {
    background: #f3f3f3;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.Hinnasto .e-con-inner > .e-child:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* ===== HEADER ===== */

.Hinnasto h2 {
    background: #5f6468;
    color: #ffffff;
    font-size: 38px;
    text-align: center;
    margin: 0;
    padding: 40px 20px 10px;
    letter-spacing: 1px;
}

.Hinnasto h3 {
    background: #5f6468;
    color: #dcdcdc;
    text-align: center;
    margin: 0;
    padding-bottom: 30px;
    font-weight: 400;
}

/* ===== SISÄLTÖ ===== */

.Hinnasto .elementor-widget-text-editor {
    padding: 0;
}

/* ===== LISTA ===== */

.Hinnasto ul {
    list-style: none;
    padding: 10px 20px 1px 15px;
    margin: 0;
    font-size:15px;
}

.Hinnasto ul > li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 5px;
    line-height: 1.5;
    color: #333;
}

/* Väkänen */
.Hinnasto ul > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #b5482f;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== ALALISTAT (FIXED SPACING) ===== */

/* Ei väliä parentin ja alalistan väliin */
.Hinnasto ul > li > ul {
    margin-top: 0;
    padding-top: 0;
}

/* Poista extra väli jos sisältää alalistan */
.Hinnasto ul > li:has(ul) {
    margin-bottom: 0;
}

/* Tiivis alalista */
.Hinnasto ul ul {
    margin-top: 2px;
}

.Hinnasto ul ul li {
    padding-left: 15px;
    margin-bottom: 2px;
    font-size: 0.95em;
    opacity: 0.85;
}

/* Alabullet ilman ikonia */
.Hinnasto ul ul li::before {
    content: "–";
    background: none;
    color: #999;
    width: auto;
    height: auto;
    top: 0;
}

/* ===== HINTA ===== */

.Hinnasto h4 {
    text-align: center;
    font-size: 56px;
    color: #5f6468;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom:-1px;
}



/* ===== NAPPI ===== */

.Hinnasto .elementor-button {
    background: #b5482f;
    color: #fff;
    border-radius: 6px;
    padding: 14px 28px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
}

.Hinnasto .elementor-button:hover {
    background: #943a26;
}

/* ===== FALLBACK jos :has ei toimi ===== */

@supports not .elementor-kit-10004(:has(*)) {
    .Hinnasto ul > li > ul {
        margin-top: -4px;
    }
}



/* ===== CTA "NAPPI" (h5 linkki) ===== */

.Hinnasto h5 {
    text-align: center;
    margin-top: 25px;
}

/* itse linkki */
.Hinnasto h5 a {
    display: inline-block;
    background: #b5482f;
    color: #fff;
    padding: 14px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

/* hover */
.Hinnasto h5 a:hover {
    background: #943a26;
    transform: translateY(-2px);
        color: #fff;
}

/* pieni aktiivinen painallus efekti */
.Hinnasto h5 a:active {
    transform: translateY(0);
}

/* optional: leveämpi nappi mobiilissa */
@media (max-width: 767px) {
    .Hinnasto h5 a {
        display: block;
        width: 100%;
        text-align: center;
    }
}




/* ===== HÄÄ HINNASTO KORTIT ===== */

.Haahinnasto {
    background-color: #f6f2f1;
    border-radius: 20px;
    padding: 20px;
}

.Haahinnasto .e-con-inner > .e-child {
    background: #fbf8f7;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.Haahinnasto .e-con-inner > .e-child:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

/* ===== HEADER ===== */

.Haahinnasto h2 {
    background: #8c7f7b; /* lämmin harmaa */
    color: #ffffff;
    font-size: 38px;
    text-align: center;
    margin: 0;
    padding: 40px 20px 10px;
    letter-spacing: 1px;
}

.Haahinnasto h3 {
    background: #8c7f7b;
    color: #efe7e5;
    text-align: center;
    margin: 0;
    padding-bottom: 30px;
    font-weight: 400;
}

/* ===== SISÄLTÖ ===== */

.Haahinnasto .elementor-widget-text-editor {
    padding: 0;
}

/* ===== LISTA ===== */

.Haahinnasto ul {
    list-style: none;
    padding: 10px 20px 1px 15px;
    margin: 0;
    font-size: 15px;
}

.Haahinnasto ul > li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 5px;
    line-height: 1.5;
    color: #4a4442;
}

/* Väkänen (pehmeä rose) */
.Haahinnasto ul > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d6a5a0; /* dusty rose */
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== ALALISTAT ===== */

.Haahinnasto ul > li > ul {
    margin-top: 0;
    padding-top: 0;
}

.Haahinnasto ul > li:has(ul) {
    margin-bottom: 0;
}

.Haahinnasto ul ul {
    margin-top: 2px;
}

.Haahinnasto ul ul li {
    padding-left: 15px;
    margin-bottom: 2px;
    font-size: 0.95em;
    opacity: 0.85;
}

.Haahinnasto ul ul li::before {
    content: "–";
    background: none;
    color: #b7a9a5;
}

/* ===== HINTA ===== */

.Haahinnasto h4 {
    text-align: center;
    font-size: 56px;
    color: #8c7f7b;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: -1px;
}

/* ===== CTA NAPPI ===== */

.Haahinnasto h5 {
    text-align: center;
    margin-top: 25px;
}

.Haahinnasto h5 a {
    display: inline-block;
    background: #d6a5a0;
    color: #fff;
    padding: 14px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.Haahinnasto h5 a:hover {
    background: #c48f8a;
    transform: translateY(-2px);
    color: #fff;
}

.Haahinnasto h5 a:active {
    transform: translateY(0);
}

/* mobiili */
@media (max-width: 767px) {
    .Haahinnasto h5 a {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* fallback */
@supports not .elementor-kit-10004(:has(*)) {
    .Haahinnasto ul > li > ul {
        margin-top: -4px;
    }
}




/* ===== GRID LEVEYS ===== */

/* Desktop / tablet */
.Hinnasto .e-con-inner,
.Haahinnasto .e-con-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
}

.Hinnasto .e-con-inner > .e-child,
.Haahinnasto .e-con-inner > .e-child {
    width: 48%;
}

/* Mobile */
@media (max-width: 767px) {
    .Hinnasto .e-con-inner > .e-child,
    .Haahinnasto .e-con-inner > .e-child {
        width: 100%;
    }

    .Hinnasto .e-con-inner,
    .Haahinnasto .e-con-inner {
        gap: 20px;
    }
}

.Hinnasto .e-child,
.Haahinnasto .e-child {
    flex: 0 0 48%;
}

@media (max-width: 767px) {
    .Hinnasto .e-child,
    .Haahinnasto .e-child {
        flex: 0 0 100%;
    }
}


/* LOMAKKEET */

/* 1. LOMAKKEEN WRAPPER-LUOKKA 
   Lisää CSS-luokka 'creperie-form' WPForms-asetuksissa (Form Settings > Appearance) 
   tai Elementorin wrapperiin. */

.creperie-form {
    max-width: 100%;
}

/* OTSIKKO & TEKSTIT (Yleiset Elementor-editorin sisällä) */
.creperie-form h1 {
    color: #252525;
    font-weight: 600;
    margin-bottom: 20px;
}

.creperie-form p {
    color: #54595F;
    margin-bottom: 30px;
}

.creperie-form a {
    color: #0491C0;
    text-decoration: none;
    transition: 0.2s;
}

.creperie-form a:hover {
    text-decoration: underline;
}

/* 2. WPFORMS ELEMENTIT */

/* LABELIT */
.creperie-form .wpforms-field-label {
    color: #252525 !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block;
}

/* INPUTIT & TEXTAREA */
.creperie-form input[type="text"],
.creperie-form input[type="email"],
.creperie-form input[type="tel"],
.creperie-form input[type="url"],
.creperie-form textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border: 1px solid #F1F1F1 !important;
    background: #F1F1F1 !important;
    transition: all 0.2s ease !important;
}

/* FOCUS-TILA */
.creperie-form input:focus,
.creperie-form textarea:focus {
    outline: none !important;
    border-color: #0491C0 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(4,145,192,0.1) !important;
}

/* DESCRIPTION */
.creperie-form .wpforms-field-description {
    font-size: 12px !important;
    color: #54595F !important;
}

/* 3. CHECKBOX BUTTON STYLE (Pillerit) */

.creperie-form .wpforms-field-checkbox ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
}

/* Piilotetaan alkuperäinen ruutu */
.creperie-form .wpforms-field-checkbox input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Napin ulkoasu (label) */
.creperie-form .wpforms-field-checkbox li label {
    display: inline-block !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: #F1F1F1 !important;
    color: #252525 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Hover */
.creperie-form .wpforms-field-checkbox li label:hover {
    background: #0491C0 !important;
    color: #ffffff !important;
}

/* Aktiivinen pilleri */
.creperie-form .wpforms-field-checkbox input[type="checkbox"]:checked + label {
    background: #B54A33 !important;
    color: #ffffff !important;
    border-color: #B54A33 !important;
}

/* Ryhmäotsikon palautus (ettei se muutu pilleriksi) */
.creperie-form .wpforms-field-checkbox > .wpforms-field-label {
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    background: none !important;
    border: none !important;
}

/* 4. SUBMIT-NAPPI */
.creperie-form .wpforms-submit-container button.wpforms-submit {
    background: #B54A33 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.creperie-form .wpforms-submit-container button.wpforms-submit:hover {
    background: #252525 !important;
    transform: translateY(-2px) !important;
}

/* 5. RESPONSIVE */
@media (max-width: 768px) {
    .creperie-form .wpforms-field-checkbox ul {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .creperie-form .wpforms-field-checkbox li label {
        width: 100% !important;
        text-align: center;
    }
}




/* Related items */


/* SECTION */
.related.products {
    background: var(--e-global-color-001df23);
    padding: 40px 30px;
    border-radius: 12px;
}

/* OTSIKKO */
.related.products > h2 {
    color: var(--e-global-color-primary);
    font-size: 28px;
    margin-bottom: 25px;
}

/* GRID */
.related.products ul.products {

}

/* PRODUCT CARD */
.related.products ul.products li.product {
    background: var(--e-global-color-51c4109);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.25s ease;
    border: 1px solid var(--e-global-color-001df23);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* HOVER */
.related.products ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* IMAGE */
.related.products ul.products li.product img {
    border-radius: 8px;
    margin-bottom: 12px;
}

/* TITLE */
.related.products .woocommerce-loop-product__title {
    font-size: 16px;
    color: var(--e-global-color-primary);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* PRICE */
.related.products .price {
    color: var(--e-global-color-secondary);
    font-size: 15px;
    margin-bottom: 15px;
}

.related.products .price .amount {
    color: var(--e-global-color-accent);
    font-weight: 600;
}

/* BUTTON */
.related.products .button {
    margin-top: auto;
    background: var(--e-global-color-accent);
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* BUTTON HOVER */
.related.products .button:hover {
    background: var(--e-global-color-61d42bf);
    color: #fff;
}

/* LINK RESET */
.related.products a {
    text-decoration: none;
}/* End custom CSS */