@media screen and (max-width: 767px) {
    .footer {
        position: relative;
        width: 100%;
        max-width: var(--st-mobile-width);
        /* height: 426px; */
        margin: 0 auto;
        padding: 0;
        background-color: #000;
        overflow: hidden;
        border-top: 1px solid #606060;
    }

    .footer .texture-bg {
        position: absolute;
        top: 47px;
        left: -32px;
        width: 294px;
        height: 182px;
        object-fit: cover;
        opacity: 0.25;
        z-index: 1;
        pointer-events: none;
    }

    /* Add the second texture image if it exists, otherwise we'll skip or use a pseudo-element */
    .footer::after {
        content: '';
        position: absolute;
        top: 27px;
        right: -110px; /* 393 - 192 - 311 = -110 */
        width: 311px;
        height: 388px;
        background-image: url('../../img/texture-product.png');
        background-size: cover;
        opacity: 0.38;
        z-index: 1;
        pointer-events: none;
    }

    .footer__section-wrapper {
        position: relative;
        width: 100%;
        z-index: 2;
        border-bottom: 1px solid #606060;
    }

    .footer__section-wrapper:last-child {
        border-bottom: none;
    }

    /* Section 1: Logo & Search (0-42px) */
    .footer__section-wrapper:nth-child(2) {
        height: 42px;
    }

    .footer__subscribe {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* height: 42px; */
        padding: 0 29px;
        gap: 0;
    }

    .footer__logo {
        margin-right: 0;
        position: absolute;
        left: 29px;
        top: 10px;
        width: 21px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer__logo-img {
        width: 21px;
        height: 21px;
        object-fit: contain;
    }

    /* We'll use a pseudo-element for the "Skin-Tec" text part of the logo if needed, 
       but for now we'll just position the search form as per Figma */
    .footer__form {
        position: absolute;
        left: 29px;
        top: 10px;
        width: calc(100% - 50px);
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
    }

    .footer__input-wrapper {
        width: 86px;
        height: 20px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 2px 0 0 2px;
        overflow: hidden;
        margin-right: 0;
    }

    .footer__input-icon {
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
    }

    .footer__input {
        width: 100%;
        height: 20px;
        padding: 0 5px 0 17px;
        font-size: 8px;
        background: transparent;
        border: none;
    }

    .footer__button {
        width: 59px;
        height: 20px;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: 0.48px;
        background-color: #b18a55;
        color: #fff;
        border: none;
        border-radius: 0 2px 2px 0;
        text-transform: none;
    }

    /* Additional: Hide the large logo text if it's too much, 
       or we can add it as a separate element if the template allowed.
       Since we only have one logo link in footer.php, we'll keep it as the icon. */
    
    /* FAQ Section Mobile Styles */
    .faq-section {
        padding: 40px 0;
    }

    body .faq-section__title {
        font-size: 24px !important;
        line-height: 32px !important;
        margin-bottom: 30px !important;
    }

    .faq-section__list {
        padding: 20px;
        margin: 0 16px;
    }

    .faq-item__question {
        font-size: 14px;
        line-height: 20px;
    }

    .faq-item.active .faq-item__question {
        font-size: 16px;
        line-height: 22px;
    }

    .faq-item__answer {
        font-size: 14px;
        line-height: 20px;
    }

    /* Section 2: Nav Section (Catalog, Services, About, Contacts) */
    .footer__nav-section {
        display: block;
        padding: 0;
    }

    .footer__nav-col {
        padding: 0;
        border-right: none;
        border-bottom: 1px solid #606060;
    }

    .footer__nav-col:last-child {
        border-bottom: none;
    }

    /* Catalog Row (42-77px -> height 35px) */
    .footer__nav-col:nth-child(1) {
        /* height: 35px; */
        display: flex;
        /* align-items: center; */
        padding: 10px 29px;
    }

    /* Services/Portfolio Row (77-113px -> height 36px) */
    .footer__nav-col:nth-child(2) {
        /* height: 36px; */
        display: flex;
        /* align-items: center; */
        padding: 0 29px;
    }

    .footer__nav-title {
        margin: 0;
        font-size: 12px!important;
        font-weight: 400;
        line-height: 16px;
        color: #b18a55;
        text-transform: none;
    }

    .footer__nav-title--with-arrow::after {
        content: '';
        display: inline-block;
        width: 5px;
        height: 2px;
        margin-left: 5px;
        background-color: #b18a55;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        vertical-align: middle;
        display: none;
    }

    .footer__nav-list {
        display: none; /* Hidden by default in mobile as per lines structure? */
    }

    /* About Us Row (113-226px -> height 113px) */
    .footer__nav-col:nth-child(3) {
        /* height: 113px; */
        padding: 10px 29px;
        /* text-align: center; */
        display: flex;
        /* flex-direction: column; */
        /* align-items: center; */
    }

    .footer__nav-col:nth-child(3) .footer__nav-title {
        margin-bottom: 5px;
    }

    .footer__nav-col:nth-child(3) .footer__nav-list {
        display: flex;
        gap: 5px;
        /* align-items: center; */
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .footer__nav-link {
        font-size: 12px;
        line-height: 16px;
    }

    /* Contacts Row (226-328px -> height 102px) */
    .footer__nav-col:nth-child(4) {
        /* height: 102px; */
        padding: 10px 29px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__nav-col:nth-child(4) .footer__nav-list--contact {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 5px;
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .footer__contact-link {
        font-size: 12px;
        line-height: 16px;
        gap: 5px;
    }

    .footer__contact-icon-wrapper {
        width: 10px;
        height: 10px;
    }

    .footer__contact-icon-wrapper img {
        width: 6px;
        height: 6px;
    }

    /* Social Section (328-377px -> height 49px) */
    .footer__section-wrapper:nth-child(4) {
        height: 49px;
    }

    .footer__social {
        height: 49px;
        padding: 0;
        gap: 10px;
    }

    .footer__social-link {
        width: 15px;
        height: 15px;
        /* background: #fff; */
    }

    .footer__social-link img {
        width: 12px;
        height: 12px;
    }

    /* Copyright Section (377-426px -> height 49px) */
    .footer__section-wrapper:nth-child(5) {
        height: 49px;
        border-bottom: none;
    }

    .footer__copyright {
        height: 49px;
        padding: 15px 29px 0;
        text-align: center;
    }

    .footer__copyright p {
        font-size: 12px;
        line-height: 16px;
        color: #858585;
        margin: 0;
    }

    .footer__nav-col:nth-child(2) .footer__nav-title:last-of-type {
        display: none;
    }

    .footer__nav-col:nth-child(2) .footer__nav-title {
        margin: 0;
        padding: 10px 0;
    }
}