/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     Bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {

    .woocommerce-loop-product__title {
        font-size: 1em;
        margin: 30px 0 0;
    }

    .cart-collaterals .cross-sells h2 {
        font-size: 1em;
    }

    .products.columns-2 {
        grid-template-columns: repeat(4, 1fr);
    }

    .cross-sells .products .product,
    .related.products .products .product,
    .upsells.products .products .product {
        display: block;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }


    --nav-main-backdrop-filter: saturate(180%) blur(20px);
    --nav-main-background-color: hsl(0 0% 13% / 80%);

    --radius: clamp(0.6rem, calc(0.6rem + ((1vw - 0.32rem) * 1.3384)), 2rem);
    --section-block-padding: clamp(6.4rem, 6.119vw + 4.442rem, 12.8rem);
    --container-gutter: clamp(1.6rem, 1.53vw + 1.111rem, 3.2rem);
    --section-margin: clamp(1.6rem, 1.53vw + 1.111rem, 3.2rem);
    --section-block-inline: clamp(1rem, calc(1rem + ((1vw - 0.32rem), * 0.956)), 2rem);
    --grid-gap: clamp(2rem, 1.912vw + 1.388rem, 4rem);
    --block-padding: clamp(0.8rem, 0.765vw + 0.555rem, 1.6rem);


    --gap-xs: clamp(0.2rem, 0.191vw + 0.139rem, 0.4rem);
    --gap-s: clamp(0.4rem, 0.382vw + 0.278rem, 0.8rem);
    --gap-m: clamp(0.8rem, 0.765vw + 0.555rem, 1.6rem);
    --gap-l: clamp(1.6rem, 1.53vw + 1.111rem, 3.2rem);
    --gap-xl: clamp(3.2rem, 3.059vw + 2.221rem, 6.4rem);
    --gap-xxl: clamp(6.4rem, 6.119vw + 4.442rem, 12.8rem);
    --gap-grid: clamp(1.6rem, 1.53vw + 1.111rem, 3.2rem);

    --header-neg-margin: -7rem;
    --first-padding: calc(var(--nav-container-height) * 2);
    --nav-container-height: var(--gap-l);


    --font-size-hero: clamp(3.2rem, 3.059vw + 2.221rem, 6.4rem);
    --font-size-lead: clamp(2.4rem, 0.765vw + 2.155rem, 3.2rem);
    --font-size-sublead: clamp(1.8rem, 1.912vw + 1.188rem, 3.8rem);
    --font-size-section: clamp(2.4rem, 2.294vw + 1.666rem, 4.8rem);
    --font-size-h1: clamp(2.2rem, 0.956vw + 1.894rem, 3.2rem);
    --font-size-h2: clamp(2rem, 0.382vw + 1.878rem, 2.4rem);
    --font-size-h3: clamp(1.8rem, 0.382vw + 1.678rem, 2.2rem);
    --font-size-h4: clamp(1.6rem, 0.382vw + 1.478rem, 2rem);
    --font-size-h5: clamp(1.4rem, 0.382vw + 1.278rem, 1.8rem);
    --font-size-nav: var(--font-size-h5);

    --font-size-p1: clamp(1.6rem, 0.191vw + 1.539rem, 1.8rem);
    --font-size-p2: clamp(1.4rem, 0.191vw + 1.339rem, 1.6rem);
    --font-size-p3: clamp(1.2rem, 0.191vw + 1.139rem, 1.4rem);


    --color-divider: hsla(0, 0%, 50%, 0.5);

    --color-darkgray-muted: hsla(0, 0%, 0%, 0.4);
    --color-hover-dark: hsla(0, 0%, 0%, 0.6);
    --color-active-dark: hsla(0, 0%, 0%, 0.8);

    --color-darkgray-nonav: hsla(0, 0%, 13%, 1);
    --color-hover-dark-nonav: hsla(0, 0%, 13%, 0.8);
    --color-active-dark-nonav: hsla(0, 0%, 13%, 0.6);

    --color-gray-muted: hsla(0, 0%, 100%, 0.4);
    --color-hover-light: hsla(0, 0%, 100%, 0.6);
    --color-active-light: hsla(0, 0%, 100%, 0.8);

    --color-gray-slider: hsla(0, 0%, 97%, 1);
    --color-hover-slider: hsla(0, 0%, 97%, 0.8);
    --color-active-slider: hsla(0, 0%, 97%, 0.6);






    --content-gap-S: calc(clamp(1rem, 0.956vw + 0.694rem, 2rem) / 1.1);
    --content-gap-m: clamp(1rem, 0.956vw + 0.694rem, 2rem);
    --content-gap-l: calc(clamp(1rem, 0.956vw + 0.694rem, 2rem) * 1.1);

    --space-s: calc(clamp(1rem, 0.956vw + 0.694rem, 2rem) * 0.8);
    --space-m: clamp(1rem, 0.956vw + 0.694rem, 2rem);
    --space-l: calc(clamp(1rem, 0.956vw + 0.694rem, 2rem) * 1.2);

    --blur--button: 16px;
    --blur--large: 8px;
    --blur--small: 4px;

}