/* =========================================================
   WUDMAN INDUSTRIES
   COMMON LOCATION PRODUCT PAGE
   COMPLETE CSS
   ========================================================= */

.common-product-page {
    --common-product-ink: #202b2b;
    --common-product-muted: #617071;
    --common-product-teal: #087f78;
    --common-product-orange: #e56c3b;

    color: var(--common-product-ink);
    font-weight: 500;
}

.common-product-page * {
    box-sizing: border-box;
}


/* =========================================================
   COMMON CONTAINER
   EXISTING
   ========================================================= */

.common-product-container {
    position: relative;
    z-index: 1;

    width: min(1120px, 100%);

    margin-inline: auto;
}


/* =========================================================
   HERO / BANNER
   EXISTING DESIGN — DO NOT CHANGE
   ========================================================= */

.common-product-hero {
    position: relative;
    overflow: hidden;

    padding: clamp(64px, 9vw, 118px) 24px;

    color: #fff;

    background:
        linear-gradient(112deg,
            rgba(15, 45, 45, .96),
            rgba(8, 127, 120, .88)),
        url('/assets/images/backgrounds/page-header-bgsbah.webp') center / cover;
}

.common-product-hero::after {
    position: absolute;

    right: -85px;
    bottom: -180px;

    width: 400px;
    height: 400px;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;

    content: '';

    box-shadow:
        0 0 0 44px rgba(255, 255, 255, .035),
        0 0 0 88px rgba(255, 255, 255, .025);

    pointer-events: none;
}

.common-product-breadcrumbs {
    margin: 0 0 22px;

    color: rgba(255, 255, 255, .76);

    font-size: 14px;
}

.common-product-breadcrumbs a {
    color: #fff;

    text-underline-offset: 3px;
}

.common-product-hero h1 {
    max-width: 820px;

    margin: 0;

    padding-top: 40px;

    color: #fff;

    font-size: clamp(38px, 6vw, 52px);
    font-weight: 500;
    line-height: 1.08;
}

.common-product-mark {
    display: block;

    width: 64px;
    height: 4px;

    margin-top: 28px;

    background: var(--common-product-orange);
}


/* =========================================================
   INTRO SECTION
   MODIFIED:
   LEFT CONTENT + RIGHT IMAGE
   ========================================================= */

.common-product-intro {
    width: 100%;

    padding: 72px 5% 60px;

    background: #f4f7f5;
}


/* =========================================================
   FULL WIDTH INTRO CONTAINER
   ========================================================= */

.common-product-intro .common-product-container {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* =========================================================
   INTRO GRID
   LEFT = CONTENT
   RIGHT = IMAGE
   ========================================================= */

.common-product-intro-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(360px, .85fr);

    gap: 52px;

    align-items: stretch;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.common-product-intro-inner>div:first-child {
    display: flex;

    flex-direction: column;
    justify-content: center;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.common-product-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: var(--common-product-teal);

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


/* =========================================================
   INTRO HEADING
   ========================================================= */

.common-product-intro h2 {
    max-width: 760px;

    margin: 0 0 18px;

    color: var(--common-product-ink);

    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 500;

    line-height: 1.15;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.common-product-intro p {
    max-width: 760px;

    margin: 0;

    color: #465555;

    font-size: 18px;
    font-weight: 500;

    line-height: 1.8;
}


/* =========================================================
   PRODUCT IMAGE
   RIGHT SIDE
   SAME HEIGHT
   COVER
   ========================================================= */

.common-product-image {
    width: 100%;
    height: 100%;

    min-height: 360px;

    margin-top: 20px !important;

    overflow: hidden;

    border-radius: 14px;

    /* background: #fff;

    box-shadow:
        0 14px 38px rgba(22, 52, 49, .08); */
}


/*
   Image itself
*/

.common-product-image img {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;

    border-radius: 14px !important;

    object-fit: contain !important;
    object-position: center;

    transition: transform .4s ease;
}

.common-product-image:hover img {
    transform: scale(1.02);
}


/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

.common-product-side {
    grid-column: 1 / -1;

    padding: 28px;

    border-left: 4px solid var(--common-product-orange);

    background: #fff;

    box-shadow:
        0 14px 38px rgba(22, 52, 49, .08);
}

.common-product-side strong {
    display: block;

    margin-bottom: 16px;

    font-size: 19px;
    font-weight: 500;
}

.common-product-side a {
    display: block;

    padding: 10px 0;

    border-top: 1px solid #e7edeb;

    color: var(--common-product-teal);

    font-weight: 500;

    text-decoration: none;
}

.common-product-side a:hover,
.common-product-side a:focus-visible {
    color: #b94d27;

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* =========================================================
   FAQ SECTION
   EXISTING BASE DESIGN
   ========================================================= */

.common-product-faq {
    padding: 72px 24px 80px;

    background: #fff;
}


/* =========================================================
   FAQ HEADING
   CENTERED
   ========================================================= */

.common-product-faq-heading {
    max-width: 760px;

    margin: 0 auto 32px;

    text-align: center;
}

.common-product-faq-heading .common-product-eyebrow {
    margin-inline: auto;
}

.common-product-intro h2,
.common-product-faq h2 {
    margin: 0 0 18px;

    color: var(--common-product-ink);

    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 500;

    line-height: 1.15;
}

.common-product-faq-heading h2 {
    text-align: center;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.common-product-faq-list {
    border-top: 1px solid #dce5e2;
}

.common-product-faq-item {
    padding: 24px 0;

    border-bottom: 1px solid #dce5e2;
}


/* =========================================================
   FAQ QUESTION
   LEFT
   ========================================================= */

.common-product-faq-item h3 {
    margin: 0 0 9px;

    color: var(--common-product-ink);

    font-size: 20px;
    font-weight: 500;

    line-height: 1.4;

    text-align: left;
}


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

.common-product-faq-item p {
    max-width: 920px;

    margin: 0;

    color: var(--common-product-muted);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.75;

    text-align: left;
}


/* =========================================================
   CONTACT SECTION
   EXISTING BASE DESIGN
   ========================================================= */

.common-product-contact {
    padding: 38px 24px;

    color: #fff;

    background: #173c3a;
}

.common-product-contact-inner {
    display: flex;

    flex-wrap: wrap;

    gap: 16px 28px;

    align-items: center;
    justify-content: space-between;
}

.common-product-contact h2 {
    margin: 0;

    color: #fff;

    font-size: 24px;
    font-weight: 500;
}

.common-product-contact-links {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 24px;
}

.common-product-contact a {
    color: #fff;

    font-weight: 500;

    text-underline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .common-product-intro-inner {
        grid-template-columns:
            minmax(0, 1fr) minmax(300px, .9fr);

        gap: 35px;
    }

    .common-product-image {
        min-height: 320px;
    }
}


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

@media (max-width: 760px) {

    .common-product-intro-inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .common-product-intro,
    .common-product-faq {
        padding-block: 52px;
    }


    /* ---------------------------------------------
       IMAGE
       --------------------------------------------- */

    .common-product-image {
        width: 100%;

        height: 300px;
        min-height: 300px;

        margin-top: 0 !important;

        border-radius: 10px;
    }

    .common-product-image img {
        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        border-radius: 10px !important;

        object-fit: cover !important;
    }


    /* ---------------------------------------------
       RELATED PRODUCTS
       --------------------------------------------- */

    .common-product-side {
        grid-column: 1;

        margin-top: 0;

        padding: 24px;

        border-left-width: 3px;
    }


    /* ---------------------------------------------
       FAQ
       --------------------------------------------- */

    .common-product-faq-heading {
        margin-bottom: 30px;

        text-align: center;
    }

    .common-product-faq-heading .common-product-eyebrow {
        margin-inline: auto;
    }

    .common-product-faq-heading h2 {
        text-align: center;
    }


    /* ---------------------------------------------
       CONTACT
       --------------------------------------------- */

    .common-product-contact-inner {
        align-items: flex-start;

        flex-direction: column;
    }
}


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

@media (max-width: 480px) {

    .common-product-intro {
        padding-right: 16px;
        padding-left: 16px;
    }

    .common-product-faq {
        padding-right: 16px;
        padding-left: 16px;
    }

    .common-product-contact {
        padding-right: 16px;
        padding-left: 16px;
    }

    .common-product-image {
        height: 260px;
        min-height: 260px;
    }
}