/*
==========================================================================

 Project     : Signature Spreads and Treats by Di
 File        : creations-responsive.css
 Version     : 1.0.0
 Author      : JB
 Purpose     : Creations Page

===========================================================================
*/

/* Small Laptops */

@media (max-width: 1199.98px) {

	/* Products Header */
	
    .creations-page .creations-products-header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.68fr);
        gap: clamp(2.5rem, 5vw, 5rem);
    }

    .creations-page .creations-products-grid {
        column-gap: var(--space-xl);
    }

}

/* Tablets */

@media (max-width: 991.98px) {

    /* Products Header */

    .creations-page .creations-products-header {
        grid-template-columns: 1fr;
        max-width: 760px;
        gap: var(--space-xl);
    }

    .creations-page .creations-products-intro {
        max-width: 680px;
        padding-bottom: 0;
    }

    /* Product Grid */

    .creations-page .creations-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:
            var(--space-4xl)
            var(--space-xl);
    }

}

/* MOBILE */

@media (max-width: 575.98px) {

    /* Products Section */

    .creations-page .creations-products {
        padding:
            var(--space-3xl)
            0
            var(--space-4xl);
    }

    .creations-page .creations-products-header {
        margin-bottom: var(--space-2xl);
    }

    .creations-page .creations-products-heading h2 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .creations-page .creations-products-heading h2 em {
        font-size: 0.8em;
    }

    .creations-page .creations-products-intro p {
        font-size: 0.94rem;
        line-height: 1.72;
    }

    /* Product Grid */

    .creations-page .creations-products-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .creations-page .creations-product-media {
        aspect-ratio: 1 / 1.05;
    }

    .creations-page .creations-product-content h3 {
        font-size: 1.95rem;
    }

    .creations-page .creations-product-description {
        font-size: 0.94rem;
    }

    .creations-page .creations-product-actions {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-md);
    }

    .creations-page .creations-product-details {
        align-self: flex-start;
    }

    .creations-page .creations-add-to-cart {
        width: 100%;
    }

    /* Pagination */

    .creations-page .creations-pagination {
        gap: 0.7rem;
    }

    .creations-page .creations-pagination-control {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .creations-page .creations-pagination-control span {
        display: none;
    }

    .creations-page .creations-pagination-page,
    .creations-page .creations-pagination-control {
        min-width: 40px;
        height: 40px;
    }

}

/* Small Mobile */

@media (max-width: 374.98px) {

    .creations-page .creations-product-badge {
        top: var(--space-sm);
        left: var(--space-sm);
        max-width: calc(100% - (var(--space-sm) * 2));
        font-size: 0.56rem;
    }

    .creations-page .creations-pagination {
        gap: 0.45rem;
    }

    .creations-page .creations-pagination-page,
    .creations-page .creations-pagination-control {
        min-width: 38px;
        height: 38px;
    }
	
}
