/*
==========================================================================

 Project     : Signature Spreads and Treats by Di
 File        : responsive.css
 Version     : 1.0.0
 Author      : JB
 Purpose     : Global Stylesheet

===========================================================================
*/

/* HEADER & NAVIGATION */

/* Small Laptops */

@media (max-width: 1199.98px) {

    .site-brand {
        width: 190px;
        margin-right: var(--space-xl);
    }

    .site-nav-list {
        gap: 0.85rem;
    }

    .site-nav-link,
    .site-cart-link {
        font-size: 0.8rem;
    }

    .site-order-button {
        min-width: 118px;
        padding-inline: 1.1rem;
    }
}

/* Tablets */

@media (max-width: 991.98px) {

    :root {
        --header-height: 80px;
    }

    .site-nav-inner {
        min-height: 80px;
    }

    .site-nav-desktop {
        display: none;
    }

    .site-menu-toggle {
        display: inline-flex;
    }

    .site-brand,
    .site-header.is-scrolled .site-brand {
        width: 185px;
        margin-right: 0;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .site-nav-inner {
        min-height: 72px;
    }

    .site-brand,
    .site-header.is-scrolled .site-brand {
        width: 155px;
    }

    .site-menu-toggle {
        width: 44px;
        height: 44px;
    }

    .site-nav-mobile {
        width: 100%;
    }

    .site-nav-mobile-link {
        font-size: 1.5rem;
    }
}

/* Small Mobile */

@media (max-width: 374.98px) {

    .site-brand,
    .site-header.is-scrolled .site-brand {
        width: 138px;
    }
}

/* FOOTER */

/* Small Laptops */

@media (max-width: 1199.98px) {

    .site-footer-main {
        grid-template-columns:
            minmax(230px, 1.2fr)
            repeat(3, minmax(125px, 0.7fr));
        gap: var(--space-2xl);
    }
}

/* Tablets */
@media (max-width: 991.98px) {
    .site-footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        row-gap: var(--space-3xl);
    }
	
    .site-footer-brand {
        max-width: 430px;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .site-footer {
        padding-top: var(--space-3xl);
    }

    .site-footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        padding-bottom: var(--space-3xl);
    }

    .site-footer-brand {
        max-width: 100%;
    }

    .site-footer-logo {
        width: 220px;
    }

    .site-footer-description {
        max-width: 42ch;
    }

    .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-md);
    }

    .site-footer-legal {
        justify-content: flex-start;
    }
}

/* SCROLL TO TOP */

/* Mobile */

@media (max-width: 575.98px) {
    .scroll-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 46px;
        height: 46px;
        font-size: 0.82rem;
    }
}

/* Tablets */

@media (max-width: 991.98px) {

    .home-creation:last-child {
        height: 100%;
    }

    .home-custom-orders-content,
    .home-about-di-content {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 575.98px) {

    .btn-custom {
        min-height: 50px;
    }

    .home-creation-image,
    .home-about-di-photo {
        box-shadow:
            0 14px 34px rgba(75, 46, 30, 0.09);
    }

    .site-footer-main {
        padding-top: var(--space-2xl);
    }
}


/* CTA SECTION */

/* Tablets */

@media (max-width: 991.98px) {

    .site-closing-cta-inner {
        max-width: 780px;
    }

    .site-closing-cta-description {
        max-width: 650px;
    }

    .site-closing-cta-botanical {
        right: 2%;
        opacity: 0.12;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .site-closing-cta {
        padding:
            var(--space-4xl)
            0;
    }

    .site-closing-cta-eyebrow {
        gap: var(--space-sm);
    }

    .site-closing-cta-eyebrow > span {
        width: 22px;
    }

    .site-closing-cta-eyebrow p {
        max-width: 230px;
        font-size: 0.63rem;
        line-height: 1.55;
        letter-spacing: 0.12em;
    }

    .site-closing-cta-inner h2 {
        font-size: clamp(2.65rem, 12vw, 3.9rem);
        line-height: 0.98;
    }

    .site-closing-cta-description {
        font-size: 1rem;
        line-height: 1.72;
    }

    .site-closing-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .site-closing-cta-actions .btn-custom {
        width: 100%;
    }

    .site-closing-cta-details {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .site-closing-cta-details > span {
        display: none;
    }

    .site-closing-cta-details p {
        font-size: 0.62rem;
    }

    .site-closing-cta-botanical {
        display: none;
    }
}

/* Small Mobile */

@media (max-width: 374.98px) {

    .site-closing-cta-inner h2 {
        font-size: 2.55rem;
    }
}

/* THE SIGNATURE DIFFERENCE */

/* Tablets */

@media (max-width: 991.98px) {

    .site-signature-difference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        max-width: 760px;
    }

    .site-signature-difference-item:nth-child(2)::after {
        display: none;
    }

    .site-signature-difference-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(220, 201, 170, 0.72);
    }

}

/* Mobile */

@media (max-width: 575.98px) {

    .site-signature-difference {
        padding:
            var(--space-4xl)
            0;
    }

    .site-signature-difference-header {
        margin-bottom: var(--space-2xl);
    }

    .site-signature-difference-eyebrow {
        gap: var(--space-sm);
    }

    .site-signature-difference-eyebrow > span {
        flex-basis: 28px;
    }

    .site-signature-difference-eyebrow p {
        font-size: 0.62rem;
        letter-spacing: 0.13em;
    }

    .site-signature-difference-header h2 {
        font-size: clamp(2.65rem, 12vw, 3.9rem);
        line-height: 0.97;
    }

    .site-signature-difference-intro {
        font-size: 0.94rem;
        line-height: 1.72;
    }

    .site-signature-difference-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .site-signature-difference-item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: var(--space-md);
        padding:
            var(--space-xl)
            var(--space-sm);
    }

    .site-signature-difference-item:not(:last-child) {
        border-bottom:
            1px solid
            rgba(220, 201, 170, 0.72);
    }

    .site-signature-difference-item::after {
        display: none;
    }

    .site-signature-difference-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(220, 201, 170, 0.72);
    }

    .site-signature-difference-icon {
        width: 46px;
        height: 46px;
    }

    .site-signature-difference-content h3 {
        font-size: 1.55rem;
    }

    .site-signature-difference-content p {
        font-size: 0.86rem;
    }
}

/* Small Mobile */

@media (max-width: 374.98px) {

    .site-signature-difference-header h2 {
        font-size: clamp(2.4rem, 11.5vw, 3.2rem);
    }

    .site-signature-difference-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .site-signature-difference-icon {
        width: 40px;
        height: 40px;
    }
}

/* SITE HERO  */

/* Small Laptops */

@media (max-width: 1199.98px) {

    .site-hero {
        min-height: 720px;
    }

    .site-hero-content {
        width: min(100%, 620px);
    }

    .site-hero-blend {
        background:
            linear-gradient(
                90deg,
                var(--color-background) 0%,
                var(--color-background) 25%,
                rgba(250, 246, 240, 0.94) 40%,
                rgba(250, 246, 240, 0.62) 57%,
                rgba(250, 246, 240, 0.15) 74%,
                transparent 90%
            ),
            linear-gradient(
                180deg,
                rgba(250, 246, 240, 0.2),
                transparent 34%,
                rgba(250, 246, 240, 0.5)
            );
    }
}

/* Tablets */

@media (max-width: 991.98px) {

    .site-hero {
        display: block;
        min-height: auto;
        padding:
            0
            0
            var(--space-4xl);
        background-color: var(--color-background);
    }

    /* Hero Image */

    .site-hero-media {
        position: relative;
        inset: auto;
        width: 100%;
        height: clamp(430px, 68vw, 620px);
    }

    .site-hero-media img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 68% center;
        transform: none;
    }

    /* Image Blend */

    .site-hero-blend {
        z-index: 1;
        background:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(250, 246, 240, 0.08) 62%,
                rgba(250, 246, 240, 0.78) 82%,
                var(--color-background) 100%
            );
    }

    /* Hero Content */

    .site-hero-content {
        width: min(100%, 680px);
        margin-top: clamp(2rem, 5vw, 3.5rem);
        padding-top: 0;
    }

    .site-hero-title {
        font-size: clamp(3.4rem, 8vw, 5.4rem);
    }

    /* Bottom Fade */

    .site-hero-bottom-fade {
        display: none;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .site-hero {
        min-height: auto;
        padding:
            0
            0
            var(--space-3xl);
    }

    /* Hero Image */

    .site-hero-media {
        width: 100%;
        height: 390px;
    }

    .site-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 70% center;
    }

    /* Image Blend */

    .site-hero-blend {
        background:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(250, 246, 240, 0.08) 62%,
                rgba(250, 246, 240, 0.84) 82%,
                var(--color-background) 100%
            );
    }

    /* Remove Desktop Texture Overlay */

    .site-hero::before {
        background: none;
    }

    /* Hero Content */

    .site-hero-content {
        width: 100%;
        margin-top: 2.25rem;
        padding-top: 0;
        text-align: center;
    }

    /* Eyebrow */

    .site-hero-eyebrow {
        margin-bottom: var(--space-md);
        font-size: 0.68rem;
        letter-spacing: 0.13em;
    }

    /* Heading */

    .site-hero-title {
        font-size: clamp(2.8rem, 14vw, 4rem);
        line-height: 0.94;
    }

    .site-hero-title span {
        font-size: clamp(1.7rem, 8.5vw, 2.4rem);
        line-height: 1.08;
    }

    /* Flourish */

    .site-hero-flourish {
        margin-inline: auto;
    }

    /* Description */

    .site-hero-description {
        margin-inline: auto;
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Actions */

    .site-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .site-hero-actions .btn-custom {
        width: 100%;
    }

    /* Trust Points */

    .site-hero-trust {
        display: grid;
        justify-content: start;
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: left;
    }
}

/* Small Mobile */

@media (max-width: 374.98px) {
    .site-hero-media {
        height: 350px;
    }

    .site-hero-content {
        margin-top: 2rem;
    }

    .site-hero-title {
        font-size: 2.65rem;
    }

    .site-hero-title span {
        font-size: 1.65rem;
    }
}


/* SITE SOCIAL RAIL */

/* Tablets */

@media (max-width: 991.98px) {

    .site-social-rail {
        right: 1rem;
    }

    .site-social-rail-list {
        gap: 0.55rem;
    }

    .site-social-rail-link {
        width: 40px;
        height: 40px;
        font-size: 0.84rem;
    }

}


/* Mobile */

@media (max-width: 575.98px) {

    .site-social-rail {
        display: none;
    }

}