/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-family  : "Selecta";
    src          : url('fonts/Selecta-Regular.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

:root {
    
    /* Colors */
    --background : hsl(0,0%,100%);
    --text       : hsl(0,0%,0%);

    /* Colors */
    --white      : #fff;
    --black      : #000;
    --gray       : #7E7E7E;
    --gray-light : #D9D9D9;

    /* Font Settings */
    --font-family : Selecta, sans-serif;
    --font-size   : 12px;
    --font-height : 14px;
    --font-weight : 400;

    /* Set the defaults */
    font-size   : var(--font-height);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    background  : var(--background);
    color       : var(--text);

    /* Font Styles */
    --font-base  : 400 12px/14px var(--font-family);
    --font-small : 400 10px/12px var(--font-family);
    --font-big   : 400 14px/16px var(--font-family);

    @media (width >= 1000px) {
        --font-base  : 400 12px/14px var(--font-family);
        --font-small : 400 10px/12px var(--font-family);
        --font-big   : 400 12px/14px var(--font-family);
    }

    /* Base Grid */
    --grid-columns    : repeat(8,1fr);
    --grid-gap        : 1rem;
    --grid-gap-double : 2rem;

    @media (width > 700px) {
        --grid-columns : repeat(12,1fr);
    }

    /* Layout Variables */
    --side-padding : 1rem;
    @media (width > 700px) {
        --side-padding : 2rem;
    }


}

body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
}

html,body {
    width : 100%;
    height : 100%;
}
}/* Global Settings *//* Content Goes Here *//* UI Elements *//* Website Header and Navigation */
.header {
    position              : fixed;
    inset                 : 0 0 auto 0;
    padding               : var(--side-padding) var(--side-padding) 0;
    display               : grid;
    grid-template-columns : var(--grid-columns);
    grid-gap              : var(--grid-gap);
    grid-template-areas   : "homelink homelink homelink homelink homelink homelink . . . . button button";
    z-index               : 10000;

    @media (width >= 1000px) {
        grid-template-areas  : "homelink homelink homelink homelink homelink homelink main main main main main language";
    }

    @media (width > 1250px) {
        grid-template-areas : "homelink homelink homelink homelink homelink homelink main main main main language language";
    }

}/* Back to home link */
.home-link {
    grid-area      : homelink;
    justify-self   : start;
    text-transform : uppercase;
    font           : var(--font-big);
    z-index        : 20;
}/* Primary navigation */
.main-navigation {
    grid-area             : main;
    display               : grid;
    grid-template-columns : subgrid;
    gap                   : var(--grid-gap);

    @media (width < 1000px) {
        display : none;
    }

}/* Wrapper to properly position the first three items of the navigation */
.main-navigation-items-wrapper {
    grid-column           : span 3;
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : var(--grid-gap);
    @media (width > 1250px) {
        grid-column : span 3;
    }
}/* Wrapper to properly position the second and third items */
.main-navigation-items-subwrapper {
    display         : flex;
    justify-content : space-evenly;
    gap             : var(--grid-gap);
}/* The links for both navigations */
.main-navigation-link,
.language-navigation-link{
    opacity             : .5;
    transition-property : opacity;
    border              : unset;
    text-transform      : uppercase;
}/* Menu item hover state */
:where(.main-navigation-link,.language-navigation-link):hover {
    opacity : 1;
}/* Active menu item */
.is-active {
    opacity : 1;
}/* Languages navigation container */
.language-navigation {
    grid-area    : language;
    justify-self : end;
    display      : flex;
    gap          : var(--grid-gap);
    @media (width < 1000px) {
        display: none;
    }
}/* Mobile Menu Button */
.mobile-navigation-button {
    grid-area : button;
    justify-self: end;
    border : none;
    z-index: 20;
    @media (width >= 1000px) {
        display : none;
    }
}/* The ≡ icon */
.mobile-navigation-button-open {
    stroke : var(--text);
}/* The X icon */
.mobile-navigation-button-close {
    display : none;
}
.mobile-navigation-button-open,
.mobile-navigation-button-close {
    height : 1rem;
    fill : white;
}/* The Mobile Navigation */
.mobile-navigation {
    position : fixed;
    inset   : 0;
    background: black;
    z-index : 10;
    padding : 2rem var(--side-padding) var(--side-padding);
    display : grid;
    grid-template-rows: 1fr auto;
    display: none;
    color : white;
}/* The Mobile Links */
.mobile-navigation-links {
    display : grid;
    grid-template-rows: 1fr 1fr 1fr 2fr;
    align-items: start;
}
.mobile-navigation-link {
    font                : var(--font-big);
    text-transform      : uppercase;
    border              : none;
    cursor              : pointer;
    transition-property : opacity;
}
.mobile-navigation-contacts {
    display             : grid;
    gap                 : 1rem;
    margin-top          : 1rem;
    opacity             : 0;
    transition-property : opacity;
}/* Mobile Nav Footer */
.mobile-navigation-footer {
    display             : flex;
    justify-content     : space-between;
    align-items         : flex-end;
    font                : var(--font-small);
    transition-property : opacity;
}/* Tweak a few things when the mobile menu is open and we're on a mobile viewport */
@media (width < 1000px) {
    
    /* Show the menu */
    .mobile-menu-is-open .mobile-navigation { display : grid;}
    .mobile-menu-is-open .footer-logo-container { z-index : 20; fill: white;}
    .mobile-menu-is-open .footer-logo { fill: white;}
    .mobile-menu-is-open .home-link { color: var(--background);}

    /* Swap the icons */
    .mobile-menu-is-open .mobile-navigation-button-open { display : none; }
    .mobile-menu-is-open .mobile-navigation-button-close { display : block; }

    /* Show the contacts when the link is pressed */
    .mobile-menu-contacts-are-visible .mobile-navigation-contacts { opacity: 1; }
    .mobile-menu-contacts-are-visible a.mobile-navigation-link { opacity: 0.5; }
    .mobile-menu-contacts-are-visible .mobile-navigation-footer { opacity: 0.5; }

}/* Website Footer */
.footer {
    padding               : 10rem var(--side-padding) var(--side-padding);
    display               : grid;
    grid-template-columns : var(--grid-columns);
    grid-gap              : var(--grid-gap);
    grid-template-areas   : "contacts contacts contacts contacts address address address address";
    align-items           : end;

    @media (width > 580px) {
        grid-template-areas : "contacts contacts address address . . legal legal";
    }

    @media (width > 700px) {
        padding             : 25rem var(--side-padding) var(--side-padding);
        grid-template-areas : "contacts contacts contacts address address address . . . legal legal legal";
    }

}
.footer a:hover {
    color : var(--gray);
}/* The single footer column */
.footer-column {
    display : flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer-contacts {
    grid-area : contacts;
}
.footer-address {
    grid-area : address;
    @media (width <= 580px) {
        justify-self: end;
        text-align: right;
    }
}
.footer-legal {
    grid-area   : legal;
    font-size   : 0.75em;
    line-height : 0.75rem;
    @media (width <= 580px) {
        display : none;
    }
}
.footer-credits {
    grid-area    : legal;
    font-size    : 0.75em;
    line-height  : 0.75rem;
    justify-self : end;
    @media (width <= 580px) {
        display : none;
    }
}/* The bottom logo */
.footer-logo-container {
    position : fixed;
    bottom : 0;
    left : 0;
    right : 0;
    padding : var(--side-padding);
    display: grid;
    grid-template-columns: var(--grid-columns);
    gap : var(--grid-gap);
    pointer-events: none;
}
.footer-logo {
    display: block;
    height : 3rem;
    width : auto;
    justify-self: center;
    grid-column : 4/6;
    fill : var(--black);

    @media (width > 700px) {
        grid-column : 7/-1;
        justify-self: start;
    }
}/* Contacts Card */
#contacts {
    border                : none;
    margin                : auto;
    background            : var(--gray-light);
    padding               : 1rem 1.5rem;
    grid-template-columns : 1fr auto;
    grid-template-rows    : auto 1fr auto;
    grid-template-areas   : "logo button" ". ." "text title";
    width : 100%;
    max-width : 25rem;
    aspect-ratio: 9/5;
}
#contacts:popover-open {
    display : grid;
}
::backdrop {
    background : black;
    opacity    : .5;
}
.contacts-logo {
    grid-area : logo;
    width : 1.5rem;
    align-self: start;
}
.contacts-button {
    grid-area : button;
    align-self: start;
    border : none;
    justify-self: end;
    cursor : pointer;
    font-size   : 0.75em;
    line-height : 0.75rem;
    &:hover {
        color : var(--background);
    }
}
.contacts-text {
    grid-area : text;
    p:not(:last-child) {
        margin-bottom : 1rem;
    }
    a:hover {
        color : var(--background);
    }
}
.contacts-title {
    grid-area : title;
    align-self: end;
    justify-self: end;
    text-transform: uppercase;
}/* The Products Thumbs Container */
.products-grid {
    padding               : 0 var(--side-padding);
    display               : grid;
    grid-template-columns : var(--grid-columns);
    grid-gap              : var(--grid-gap) 0.5rem;
    @media (width > 500px) {
        grid-gap : var(--grid-gap-double) var(--grid-gap);
    }
}/* The Single Product Card */
.product-card {
    grid-column           : span 8;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    grid-gap              : 0.25rem 0;
    grid-template-areas   : "image image" "title collection";

    @media (width > 400px) {
        grid-column : span 4;
    }

    @media (width > 700px) {
        grid-column : span 6;
    }

    @media (width > 1100px) {
        grid-column : span 3;
    }

    @media (width > 2000px) {
        grid-column : span 2;
    }

}/* The Filtered out card */
.product-card.filtered {
    display : none;
}/* The Images */
.product-card-thumb,
.product-card-hover {
    grid-area : image;
}
.product-card-hover {
    opacity: 0;
    transition-property: opacity;
}
@media (hover:hover) {    
    .product-card:hover .product-card-hover {
        opacity : 1;
    }
}/* Product Name */
.product-card-title {
    text-transform : uppercase;
    grid-area      : title;
}/* Product Collection */
.product-card-collection {
    color     : var(--gray);
    grid-area : collection;
}/* Reusable Components *//* Nothing to see here *//* Default Image Styles */
img {
    display : block;
    width   : 100%;
    height  : auto;
}