/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 18 2026 | 09:58:54 */
/* ==========================================================
   CUSTOM GUITAR ATELIER
   PRODUCT PAGE FAQ
   WooCommerce + Flatsome
   COMPLETE DESKTOP + MOBILE VERSION
   ========================================================== */


/* ==========================================================
   FAQ SECTION TITLE
   Targets the Accordion title generated by Flatsome
   ========================================================== */

body.single-product .accordion > .accordion-title,
body.single-product .accordion .accordion-title:first-of-type {
    position: relative;
}


/* Frequently Asked Questions heading */
body.single-product .accordion + h2,
body.single-product .accordion + h3 {
    position: relative;
}


/* Target Flatsome accordion heading wrapper where applicable */
body.single-product .accordion .accordion-title-main,
body.single-product .accordion-title-main {
    position: relative;
}


/* ==========================================================
   FAQ ACCORDION CONTAINER
   ========================================================== */

body.single-product .accordion {
    width: 100% !important;

    margin: 24px 0 40px !important;
}


/* ==========================================================
   FAQ SECTION HEADING
   Uses Flatsome accordion title text
   ========================================================== */

body.single-product .accordion > .accordion-title:first-child,
body.single-product .accordion .accordion-title:first-child {
    position: relative;
}


/* ==========================================================
   FAQ CARDS
   ========================================================== */

body.single-product .accordion .accordion-item {
    position: relative;

    display: block;

    margin: 0 0 12px 0 !important;

    background: #ffffff !important;

    border: 1px solid #e3d3b5 !important;
    border-radius: 10px !important;

    overflow: hidden;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.035),
        0 1px 3px rgba(0, 0, 0, 0.025) !important;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Desktop hover */
@media (hover: hover) {

    body.single-product .accordion .accordion-item:hover {
        border-color: #c99a43 !important;

        box-shadow:
            0 7px 20px rgba(0, 0, 0, 0.07),
            0 2px 5px rgba(172, 120, 29, 0.07) !important;

        transform: translateY(-1px);
    }

}


/* ==========================================================
   FAQ QUESTIONS
   ========================================================== */

body.single-product .accordion .accordion-title {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        19px
        70px
        19px
        23px !important;

    background: #ffffff !important;

    border: 0 !important;

    color: #241f1b !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    text-decoration: none !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


/* Remove Flatsome default separator */
body.single-product .accordion .accordion-title::before {
    display: none !important;
}


/* Hover */
@media (hover: hover) {

    body.single-product .accordion .accordion-title:hover {
        background: #fdfaf5 !important;

        color: #98661d !important;
    }

}


/* ==========================================================
   ACTIVE / OPEN FAQ
   ========================================================== */

body.single-product .accordion .accordion-title.active {
    background: linear-gradient(
        135deg,
        #17130f 0%,
        #251d14 100%
    ) !important;

    color: #ffffff !important;
}


/* Gold accent on open question */
body.single-product .accordion .accordion-title.active::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: linear-gradient(
        180deg,
        #e4bd69 0%,
        #b67d23 100%
    );

    border-radius: 0 2px 2px 0;
}


/* ==========================================================
   CIRCULAR FAQ BUTTON
   ========================================================== */

body.single-product .accordion .accordion-title .toggle {
    position: absolute !important;

    left: auto !important;
    right: 20px !important;

    top: 50% !important;

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    max-width: 38px !important;
    max-height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    aspect-ratio: 1 / 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #fbf7ef !important;

    border: 1.5px solid #c99535 !important;
    border-radius: 50% !important;

    color: #93651e !important;

    opacity: 1 !important;

    line-height: 1 !important;

    box-shadow: none !important;

    transform: translateY(-50%) !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease !important;
}


/* Icon */
body.single-product .accordion .accordion-title .toggle i {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 15px !important;
    line-height: 1 !important;

    opacity: 1 !important;
}


/* Open button */
body.single-product .accordion .accordion-title.active .toggle {
    background: #c99535 !important;

    border-color: #c99535 !important;

    color: #17120d !important;

    transform:
        translateY(-50%)
        rotate(180deg) !important;
}


/* Hover button */
@media (hover: hover) {

    body.single-product .accordion .accordion-title:hover .toggle {
        background: #c99535 !important;

        border-color: #c99535 !important;

        color: #17120d !important;
    }

}


/* ==========================================================
   FAQ ANSWER
   ========================================================== */

body.single-product .accordion .accordion-inner {
    margin: 0 !important;

    padding:
        21px
        25px
        24px !important;

    background: linear-gradient(
        180deg,
        #fffdf9 0%,
        #ffffff 100%
    ) !important;

    border: 0 !important;

    border-top:
        1px solid
        #eadfcf !important;

    color: #4c4640 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}


/* Paragraphs */
body.single-product .accordion .accordion-inner p {
    margin-top: 0 !important;
    margin-bottom: 13px !important;

    color: inherit !important;

    line-height: inherit !important;
}


body.single-product .accordion .accordion-inner p:last-child {
    margin-bottom: 0 !important;
}


/* Lists */
body.single-product .accordion .accordion-inner ul,
body.single-product .accordion .accordion-inner ol {
    margin:
        8px
        0
        14px
        20px !important;
}


/* Links */
body.single-product .accordion .accordion-inner a {
    color: #98691f !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    border-bottom:
        1px solid
        rgba(152, 105, 31, 0.35);

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


body.single-product .accordion .accordion-inner a:hover {
    color: #bb842c !important;

    border-bottom-color: #bb842c;
}


/* ==========================================================
   FAQ HEADING ENHANCEMENT
   Targets headings immediately before accordions
   ========================================================== */

body.single-product h2:has(+ .accordion),
body.single-product h3:has(+ .accordion),
body.single-product .accordion-wrap > h2,
body.single-product .accordion-wrap > h3 {
    position: relative;

    margin: 0 0 30px !important;
    padding: 0 0 16px !important;

    color: #211b17 !important;

    font-size: clamp(27px, 2.1vw, 36px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    letter-spacing: -0.5px !important;

    border: 0 !important;
}


/* Gold underline */
body.single-product h2:has(+ .accordion)::after,
body.single-product h3:has(+ .accordion)::after,
body.single-product .accordion-wrap > h2::after,
body.single-product .accordion-wrap > h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 62px;
    height: 3px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #9d681c 0%,
        #d6ae58 55%,
        #eed594 100%
    );
}


/* Soft gold extension */
body.single-product h2:has(+ .accordion)::before,
body.single-product h3:has(+ .accordion)::before,
body.single-product .accordion-wrap > h2::before,
body.single-product .accordion-wrap > h3::before {
    content: "";

    position: absolute;

    left: 70px;
    bottom: 1px;

    width: 105px;
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(198, 151, 60, 0.38),
        rgba(198, 151, 60, 0)
    );
}


/* ==========================================================
   REMOVE FLATSOME DIVIDERS
   ========================================================== */

body.single-product
.accordion
> .accordion-item
> .accordion-title {
    border-top: 0 !important;
}


body.single-product
.accordion
> .accordion-item:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media only screen and (max-width: 849px) {

    body.single-product .accordion {
        margin:
            18px
            0
            32px !important;
    }


    body.single-product .accordion .accordion-item {
        margin-bottom: 10px !important;

        border-radius: 9px !important;

        box-shadow:
            0 2px 8px
            rgba(0, 0, 0, 0.035) !important;
    }


    body.single-product .accordion .accordion-title {
        min-height: 62px;

        padding:
            17px
            60px
            17px
            18px !important;

        font-size: 16px !important;

        line-height: 1.4 !important;
    }


    body.single-product .accordion .accordion-title .toggle {
        right: 14px !important;

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;

        max-width: 34px !important;
        max-height: 34px !important;
    }


    body.single-product .accordion .accordion-title .toggle i {
        font-size: 14px !important;
    }


    body.single-product .accordion .accordion-inner {
        padding:
            18px
            19px
            21px !important;

        font-size: 15px !important;

        line-height: 1.7 !important;
    }


    body.single-product h2:has(+ .accordion),
    body.single-product h3:has(+ .accordion),
    body.single-product .accordion-wrap > h2,
    body.single-product .accordion-wrap > h3 {
        margin-bottom: 24px !important;

        padding-bottom: 14px !important;

        font-size: 27px !important;

        letter-spacing: -0.35px !important;
    }


    body.single-product h2:has(+ .accordion)::after,
    body.single-product h3:has(+ .accordion)::after,
    body.single-product .accordion-wrap > h2::after,
    body.single-product .accordion-wrap > h3::after {
        width: 52px;
    }


    body.single-product h2:has(+ .accordion)::before,
    body.single-product h3:has(+ .accordion)::before,
    body.single-product .accordion-wrap > h2::before,
    body.single-product .accordion-wrap > h3::before {
        left: 60px;

        width: 80px;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media only screen and (max-width: 480px) {

    body.single-product .accordion .accordion-item {
        margin-bottom: 9px !important;

        border-radius: 8px !important;
    }


    body.single-product .accordion .accordion-title {
        min-height: 58px;

        padding:
            15px
            55px
            15px
            16px !important;

        font-size: 15.5px !important;

        line-height: 1.4 !important;
    }


    body.single-product .accordion .accordion-title .toggle {
        right: 12px !important;

        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;
        min-height: 32px !important;

        max-width: 32px !important;
        max-height: 32px !important;
    }


    body.single-product .accordion .accordion-title .toggle i {
        font-size: 13px !important;
    }


    body.single-product .accordion .accordion-inner {
        padding:
            17px
            17px
            20px !important;

        font-size: 15px !important;

        line-height: 1.7 !important;
    }


    body.single-product h2:has(+ .accordion),
    body.single-product h3:has(+ .accordion),
    body.single-product .accordion-wrap > h2,
    body.single-product .accordion-wrap > h3 {
        margin-bottom: 22px !important;

        padding-bottom: 13px !important;

        font-size: 25px !important;
    }


    body.single-product h2:has(+ .accordion)::after,
    body.single-product h3:has(+ .accordion)::after,
    body.single-product .accordion-wrap > h2::after,
    body.single-product .accordion-wrap > h3::after {
        width: 48px;
    }


    body.single-product h2:has(+ .accordion)::before,
    body.single-product h3:has(+ .accordion)::before,
    body.single-product .accordion-wrap > h2::before,
    body.single-product .accordion-wrap > h3::before {
        left: 56px;

        width: 70px;
    }

}