.f-1 {margin-bottom: 20px;}
.f-1 h1 { font-size: 22px; display: block; margin-bottom: 15px;}
.f-1 p { font-size: 14px; color: var(--colorlead);}

.f-2 { margin-bottom:20px; }
.f-2 h2 {margin-bottom:10px;}
.f-2 .view-content {display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem;}
.f-2 .view-content .views-row {display:flex;flex-direction:column;align-items: center;}
.f-2 .view-content .salon-image {margin-bottom: 1rem; border: 3px solid var(--colorAccent); box-shadow: #939393 -3px 7px 16px;border-radius: var(--radius);overflow: hidden;}
.f-2 .view-content .salon-image img {width:100%;height:auto; display:block;}
.f-2 .view-content .salon-title a {font-size:var(--font15px)}

/* Product Body */
.f-3 {width:100%;margin-bottom: 40px;}
.f-3 .body {padding:20px;border-radius:var(--radius);border: 1px solid var(--color-border);}
.f-3 .body p { margin-bottom: 8px; display: block; font-size: var(--font15px);}
.f-3 .body ul {padding:20px}
.f-3 .body h2, .f-3 .body h2 a, .f-3 .body h2 span, .f-3 .body h2 strong { line-height: 30px; font-size: 20px; margin: 5px 0 15px 0; text-align: right; width: 100%; display: inline-block;}
.f-3 .block__title {display: inline-block;position: relative;padding: 15px 0;}


.f-4 { width: 100%;}
.f-4 .block__content { display: flex; flex-direction: column;}
.f-4 .block__content .faq-item { margin-bottom: 20px;}
.f-4 .block__content .faq-item .faq-question { padding: 10px 20px 10px 30px;}
.f-4 .block__content .faq-item .faq-question { padding: 10px 20px 10px 30px; font-weight: bold; display: flex; align-items: center; cursor: pointer; background-color: var(--colorAccentBG);}
.f-4 .block__content .faq-item .faq-question:before { content: ''; min-width: 10px; min-height: 10px; background: var(--colorAccent); margin-left: 10px; border-radius: var(--radius);}
.f-4 .block__content .faq-item.active .faq-answer span { padding: 10px; display: block;}
.f-4 .block__content .faq-item .faq-answer span { padding: 10px; display: none;}
.f-4 .block__content .faq-item .faq-answer * { font-size: var(--font13px); color: var(--colorlead);}



@media screen and (max-width:900px) { 
    .f-2 .view-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}
@media screen and (max-width:600px) { 
    .f-2 .view-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .f-3 .body p , .f-3 .body ul {font-size: var(--font14px);}
    .f-4 {text-align: center;}
}