/* ============================================================
   WHODUNIT RESOURCE GROUP
   PRODUCT DETAIL PAGE
============================================================ */

@import url(
    "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"
);



/* ============================================================
   VARIABLES
============================================================ */

.product-detail-page {

    --pd-orange: var(--brand-orange);
    --pd-vanilla: var(--brand-cream);
    --pd-green: #4d572c;
    --pd-green-dark: #47531d;
    --pd-green-deep: #47531d;
    --pd-brown: #2e2910;

    --pd-cream: var(--brand-cream);
    --pd-light: var(--brand-cream);
    --pd-border: #e8e1d5;

    color:
        var(--pd-brown);

    background:
        #ffffff;
}


.product-detail-page main {

    overflow:
        hidden;
}



.product-container {

    width:
        min(
            1180px,
            calc(100% - 64px)
        );

    margin-inline:
        auto;
}



/* ============================================================
   HERO
============================================================ */

.product-hero {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        46% 54%;

    height:
        430px;

    overflow:
        hidden;

    background:
        var(--pd-green-deep);
}



/* ============================================================
   HERO LEFT
============================================================ */

.product-hero__left {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    background:
        linear-gradient(
            135deg,
            #47531d 0%,
            #47531d 100%
        );
}



/* angled edge */

.product-hero__left::after {

    content:
        "";

    position:
        absolute;

    z-index:
        3;

    top:
        -10%;

    right:
        -62px;

    width:
        115px;

    height:
        120%;

    background:
        #47531d;

    transform:
        skewX(-8deg);

    pointer-events:
        none;
}



/* ============================================================
   SUBTLE BACKGROUND PATTERN
============================================================ */

.product-hero__pattern {

    position:
        absolute;

    inset:
        0;

    opacity:
        .075;

    background-image:

        repeating-radial-gradient(
            ellipse at 12% 102%,
            transparent 0,
            transparent 24px,
            rgba(255,255,255,.45) 25px,
            transparent 26px,
            transparent 51px
        );

    pointer-events:
        none;
}



/* ============================================================
   HERO CONTENT
============================================================ */

.product-hero__content {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            520px,
            calc(100% - 55px)
        );

    margin-left:
        max(
            35px,
            calc((100vw - 1180px) / 2)
        );

    padding-right:
        35px;
}



/* BREADCRUMB */

.product-breadcrumb {

    margin:
        0
        0
        17px;

    color:
        var(--pd-orange);

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}



/* TITLE */

.product-hero h1 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            48px,
            4.5vw,
            65px
        );

    font-weight:
        600;

    line-height:
        .88;

    letter-spacing:
        -.04em;
}



/* DESCRIPTION */

.product-hero__description {

    max-width:
        425px;

    margin:
        19px
        0
        0;

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

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    line-height:
        1.65;
}



/* ============================================================
   HERO FEATURE ITEMS
============================================================ */

.product-hero__features {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        14px;

    max-width:
        510px;

    margin-top:
        28px;
}



.hero-feature {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-width:
        0;

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

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        500;

    white-space:
        nowrap;
}



.hero-feature__icon {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    width:
        25px;

    height:
        25px;

    border:
        1px solid
        rgba(var(--brand-orange-rgb),.75);

    border-radius:
        50%;

    color:
        var(--pd-orange);
}



.hero-feature__icon svg {

    width:
        12px;

    height:
        12px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* ============================================================
   HERO IMAGE
============================================================ */

.product-hero__image {

    position:
        relative;

    min-width:
        0;

    height:
        430px;

    overflow:
        hidden;

    background:
        #616945;
}



.product-hero__image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(71, 83, 29,.20),
            transparent 28%
        );

    pointer-events:
        none;
}



.product-hero__image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center 48%;
}



/* ============================================================
   SOURCING SECTION
============================================================ */

.product-sourcing {

    position:
        relative;

    padding:
        62px
        0
        66px;

    background:
        var(--brand-cream);
}



.product-sourcing__grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(330px,.77fr);

    gap:
        75px;

    align-items:
        center;
}



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

.product-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin:
        0
        0
        16px;

    color:
        var(--pd-orange);

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}



.product-eyebrow span {

    display:
        block;

    width:
        27px;

    height:
        1px;

    background:
        var(--pd-orange);
}



/* ============================================================
   SOURCING COPY
============================================================ */

.product-sourcing__content h2 {

    max-width:
        535px;

    margin:
        0;

    color:
        var(--pd-brown);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            43px,
            4vw,
            55px
        );

    font-weight:
        600;

    line-height:
        .9;

    letter-spacing:
        -.035em;
}



.product-sourcing__description {

    max-width:
        500px;

    margin:
        20px
        0
        0;

    color:
        #716b60;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    line-height:
        1.75;
}



/* ============================================================
   REQUIREMENTS
============================================================ */

.product-requirements {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        14px
        34px;

    max-width:
        500px;

    margin-top:
        25px;
}



.requirement-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}



.requirement-item span {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    width:
        17px;

    height:
        17px;

    color:
        #ffffff;

    background:
        var(--pd-orange);

    border-radius:
        50%;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        700;
}



.requirement-item p {

    margin:
        0;

    color:
        #474339;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        500;
}



/* ============================================================
   QUOTE BUTTON
============================================================ */

.product-quote-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        25px;

    min-height:
        43px;

    margin-top:
        29px;

    padding:
        0
        20px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #586628,
            #47531d
        );

    border-radius:
        3px;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 8px 20px
        rgba(71, 83, 29,.13);

    transition:
        transform .25s ease,
        background .25s ease;
}



.product-quote-button span {

    font-size:
        16px;

    transition:
        transform .25s ease;
}



.product-quote-button:hover {

    color:
        #ffffff;

    background:
        var(--pd-orange);

    transform:
        translateY(-2px);
}



.product-quote-button:hover span {

    transform:
        translateX(4px);
}



/* ============================================================
   PRODUCT IMAGE
============================================================ */

.product-sourcing__visual {

    position:
        relative;

    width:
        100%;

    max-width:
        420px;

    justify-self:
        end;

    padding-bottom:
        27px;
}



.product-photo {

    position:
        relative;

    width:
        100%;

    height:
        355px;

    overflow:
        hidden;

    border-radius:
        14px;

    box-shadow:
        0 20px 45px
        rgba(49,39,21,.13);
}



.product-photo::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.18);

    border-radius:
        inherit;

    pointer-events:
        none;
}



.product-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}



/* ============================================================
   TRUSTED BADGE
============================================================ */

.product-trusted-card {

    position:
        absolute;

    right:
        -15px;

    bottom:
        0;

    display:
        grid;

    grid-template-columns:
        auto 1fr;

    gap:
        12px;

    align-items:
        center;

    min-width:
        225px;

    padding:
        15px
        17px;

    background:
        linear-gradient(
            135deg,
            #f2e9b0,
            #e7da91
        );

    border-radius:
        7px;

    box-shadow:
        0 12px 26px
        rgba(68,54,22,.14);
}



.product-trusted-card__icon {

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    color:
        var(--pd-brown);

    background:
        rgba(255,255,255,.3);

    border-radius:
        50%;
}



.product-trusted-card__icon svg {

    width:
        22px;

    height:
        22px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



.product-trusted-card span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #5f594a;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}



.product-trusted-card strong {

    display:
        block;

    color:
        var(--pd-brown);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        16px;

    line-height:
        1.05;
}



/* ============================================================
   WHY SECTION
============================================================ */

.product-why {

    padding:
        43px
        0
        55px;

    background:
        var(--brand-cream);

    border-top:
        1px solid
        rgba(222,215,199,.55);
}



.product-why__heading {

    margin-bottom:
        24px;
}



.product-why__heading p {

    margin:
        0;

    color:
        #4f493e;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        700;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}



/* ============================================================
   VALUE CARDS
============================================================ */

.product-values {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        17px;
}



.product-value-card {

    min-height:
        155px;

    padding:
        21px
        18px;

    background:
        rgba(255,255,255,.74);

    border:
        1px solid
        rgba(227,221,207,.72);

    border-radius:
        7px;

    text-align:
        center;

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



.product-value-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(var(--brand-orange-rgb),.25);

    box-shadow:
        0 13px 30px
        rgba(61,53,34,.07);
}



.product-value-card__icon {

    display:
        grid;

    place-items:
        center;

    width:
        41px;

    height:
        41px;

    margin:
        0
        auto
        14px;

    color:
        var(--pd-orange);

    border:
        1px solid
        rgba(var(--brand-orange-rgb),.35);

    border-radius:
        50%;
}



.product-value-card__icon svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



.product-value-card h3 {

    margin:
        0
        0
        8px;

    color:
        var(--pd-brown);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        18px;

    font-weight:
        700;
}



.product-value-card p {

    max-width:
        190px;

    margin:
        0
        auto;

    color:
        #787166;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    line-height:
        1.6;
}



/* ============================================================
   FINAL CTA
============================================================ */

.product-final-cta {

    position:
        relative;

    isolation:
        isolate;

    min-height:
        235px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:

        linear-gradient(
            rgba(64, 71, 41,.76),
            rgba(71, 83, 29,.86)
        ),

        url(
            "../Images/iStock/web/iStock-186310643.webp"
        );

    background-size:
        cover;

    background-position:
        center;
}



.product-final-cta__overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            90deg,
            rgba(71, 83, 29,.92),
            rgba(69, 80, 32,.72),
            rgba(64,51,24,.55)
        );
}



.product-final-cta__content {

    max-width:
        660px;

    padding:
        48px
        0;
}



.product-final-cta__eyebrow {

    margin:
        0
        0
        10px;

    color:
        var(--pd-orange);

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        700;

    letter-spacing:
        .14em;
}



.product-final-cta h2 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            39px,
            4vw,
            52px
        );

    font-weight:
        600;

    line-height:
        .95;
}



.product-final-cta__content > p:not(.product-final-cta__eyebrow) {

    margin:
        12px
        0
        0;

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

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    line-height:
        1.6;
}



.product-final-cta__actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        22px;
}



.product-final-cta__primary,
.product-final-cta__secondary {

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        19px;

    border-radius:
        3px;

    font-family:
        "Inter",
        sans-serif;

    font-size: .875rem;

    font-weight:
        700;

    text-decoration:
        none;
}



.product-final-cta__primary {

    gap:
        20px;

    color:
        var(--pd-green-deep);

    background:
        var(--pd-vanilla);
}



.product-final-cta__secondary {

    color:
        #ffffff;

    border:
        1px solid
        rgba(255,255,255,.55);

    background:
        rgba(255,255,255,.04);
}



/* ============================================================
   RESPONSIVE - 1100
============================================================ */

@media (max-width: 1100px) {

    .product-container {

        width:
            calc(100% - 50px);
    }


    .product-hero__content {

        margin-left:
            35px;
    }


    .product-hero__features {

        grid-template-columns:
            repeat(2,1fr);
    }


    .product-sourcing__grid {

        gap:
            50px;
    }

}



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

@media (max-width: 850px) {

    .product-container {

        width:
            calc(100% - 40px);
    }



    /* HERO */

    .product-hero {

        grid-template-columns:
            1fr;

        height:
            auto;
    }


    .product-hero__left {

        min-height:
            420px;
    }


    .product-hero__left::after {

        display:
            none;
    }


    .product-hero__content {

        width:
            calc(100% - 60px);

        margin:
            0
            auto;

        padding:
            55px
            0;
    }


    .product-hero__image {

        height:
            340px;
    }


    .product-hero__features {

        max-width:
            520px;
    }



    /* SOURCING */

    .product-sourcing {

        padding:
            55px
            0;
    }


    .product-sourcing__grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .product-sourcing__visual {

        justify-self:
            start;

        max-width:
            520px;
    }



    /* VALUES */

    .product-values {

        grid-template-columns:
            repeat(2,1fr);
    }

}



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

@media (max-width: 600px) {

    .product-container {

        width:
            calc(100% - 28px);
    }



    /* HERO */

    .product-hero__left {

        min-height:
            390px;
    }


    .product-hero__content {

        width:
            calc(100% - 38px);

        padding:
            42px
            0;
    }


    .product-breadcrumb {

        margin-bottom:
            13px;

        font-size: .875rem;
    }


    .product-hero h1 {

        font-size:
            43px;
    }


    .product-hero__description {

        max-width:
            340px;

        font-size: .875rem;
    }


    .product-hero__features {

        grid-template-columns:
            repeat(2,1fr);

        gap:
            13px
            8px;

        margin-top:
            23px;
    }


    .hero-feature {

        font-size: .875rem;
    }


    .product-hero__image {

        height:
            255px;
    }



    /* SOURCING */

    .product-sourcing {

        padding:
            44px
            0
            52px;
    }


    .product-sourcing__content h2 {

        font-size:
            40px;
    }


    .product-sourcing__description {

        font-size: .875rem;
    }


    .product-requirements {

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .product-photo {

        height:
            320px;
    }


    .product-trusted-card {

        right:
            12px;

        min-width:
            205px;
    }



    /* WHY */

    .product-why {

        padding:
            38px
            0
            45px;
    }


    .product-values {

        grid-template-columns:
            1fr;
    }


    .product-value-card {

        min-height:
            0;

        padding:
            22px;
    }



    /* CTA */

    .product-final-cta {

        min-height:
            270px;
    }


    .product-final-cta__content {

        padding:
            42px
            0;
    }


    .product-final-cta h2 {

        font-size:
            40px;
    }


    .product-final-cta__actions {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}



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

@media (max-width: 390px) {

    .product-hero h1 {

        font-size:
            39px;
    }


    .product-hero__features {

        grid-template-columns:
            1fr 1fr;
    }


    .hero-feature__icon {

        width:
            23px;

        height:
            23px;
    }


    .product-sourcing__content h2 {

        font-size:
            36px;
    }


    .product-photo {

        height:
            285px;
    }


    .product-trusted-card {

        left:
            12px;

        right:
            12px;

        min-width:
            0;
    }

}