/* =========================================================
   THE DREY SHOP
   ========================================================= */


/* =========================================================
   Shop page
   ========================================================= */

.shopPage {
    width                       : 100% ;
}


/* =========================================================
   Product layout
   ========================================================= */

.shopProduct {
    align-items                 : stretch ;
    display                     : grid ;
    gap                         : 1.25rem ;
    grid-template-columns       : minmax(200px, 0.6fr)
                                  minmax(320px, 1.4fr) ;
}

/* =========================================================
   Product image
   ========================================================= */

.shopProductImage {
    align-items                 : center ;
    background                  : #ffffff ;
    border                      : 1px solid rgba(33, 71, 0, 0.22) ;
    border-radius               : 5px ;
    display                     : flex ;
    justify-content             : center ;
    min-height                  : 200px ;
    overflow                    : hidden ;
    padding                     : 0.6rem ;
}

.shopProductImage img {
    display                     : block ;
    height                      : auto ;
    max-height                  : 200px ;
    max-width                   : 100% ;
    object-fit                  : contain ;
    width                       : auto ;
}

/* =========================================================
   Product information
   ========================================================= */

.shopProductInfo {
    display                     : flex ;
    flex-direction              : column ;
    justify-content             : center ;
    min-width                   : 0 ;
}

.shopProductEyebrow {
    color                       : var(--grey) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.76rem ;
    font-weight                 : 700 ;
    letter-spacing              : 0.1em ;
    line-height                 : 1 ;
    margin                      : 0 ;
    text-transform              : uppercase ;
}

.shopProductInfo h2 {
    color                       : var(--dark-green) ;
    font-family                 : var(--merriweather-face), serif ;
    font-size                   : 1.55rem ;
    font-style                  : italic ;
    line-height                 : 1.1 ;
    margin                      : -0.08rem 0 0.55rem 0 ;
}

.shopProductDescription {
    font-family                 : var(--raleway-face), sans-serif ;
    line-height                 : 1.3 ;
    margin                      : 0 0 0.65rem 0 ;
    max-width                   : 580px ;
}

/* =========================================================
   Product specs
   ========================================================= */

.shopSpecs {
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 0.35rem ;
    margin-top                  : 12px ;
    margin-bottom               : 0.7rem ;
}

.shopSpecs span {
    background                  : #ffffff ;
    border                      : 1px solid var(--dark-green) ;
    border-radius               : 4px ;
    color                       : var(--dark-green) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.78rem ;
    font-weight                 : 700 ;
    padding                     : 0.28rem 0.45rem ;
}


/* =========================================================
   Price / stock
   ========================================================= */

.shopPriceStock {
    align-items                 : center ;
    display                     : flex ;
    gap                         : 2rem ;
    margin-bottom               : 0.7rem ;
}

.shopPrice,
.shopStock {
    align-items                 : center ;
    display                     : flex ;
    gap                         : 0.35rem ;
    margin                      : 0 ;
}

.shopPriceCurrency,
.shopStockIcon {
    color                       : var(--grey) ;
    font-size                   : 2.8rem ;
    line-height                 : 1 ;
}

.shopPriceCurrency {
    font-family                 : var(--raleway-face), sans-serif ;
    font-weight                 : 700 ;
}

.shopPriceDetails,
.shopStockDetails {
    display                     : flex ;
    flex-direction              : column ;
    justify-content             : center ;
    line-height                 : 1 ;
}

#shopProductPrice {
    color                       : var(--dark-green) ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 1.2rem ;
    font-weight                 : 700 ;
    line-height                 : 1 ;
}

.shopPriceUnit {
    color                       : var(--dark-green) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.8rem ;
    font-weight                 : 700 ;
    line-height                 : 1 ;
    margin-top                  : 0.2rem ;
}

.shopStockDetails {
    font-family                 : var(--roboto-condensed-face), sans-serif ;
}

.shopStockDetails strong {
    color                       : var(--dark-green) ;
    font-size                   : 1.35rem ;
    font-weight                 : 700 ;
}

.shopStockDetails small {
    color                       : var(--dark-green) ;
    font-size                   : 0.8rem ;
    font-weight                 : 700 ;
    margin-top                  : 0.15rem ;
}

/* =========================================================
   Purchase controls
   ========================================================= */

.shopBuy {
    align-items                 : end ;
    display                     : flex ;
    gap                         : 0.65rem ;
}

.shopQuantityGroup {
    min-width                   : 0 ;
}

.shopQuantity {
    width                       : 80px ;
}

.shopQuantityGroup .drey-module-label {
    font-size                   : 0.9rem ;
    margin-bottom               : 0.2rem ;
}

.shopAddButton {
    white-space                 : nowrap ;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {

    .shopProduct {
        grid-template-columns: repeat(
            auto-fit,
            minmax(210px, 280px)
        );
    }

    .shopProductImage {
        min-height              : 210px ;
    }

    .shopProductImage img {
        max-height              : 220px ;
    }

}

@media (max-width: 430px) {

    .shopBuy {
        align-items             : stretch ;
        flex-direction          : column ;
    }

    .shopQuantity {
        width                   : 100% ;
    }

    .shopAddButton {
        width                   : 100% ;
    }

}

.shopSnipcartProducts {
    display                     : none ;
}

.shopVariants {
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 0.35rem ;
}

.shopVariant {
    align-items                 : center ;
    background                  : #eeeeee ;
    border                      : 1px solid #888888 ;
    border-radius               : 4px ;
    color                       : #444444 ;
    cursor                      : pointer ;
    display                     : inline-flex ;
    gap                         : 0.35rem ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.78rem ;
    font-weight                 : 700 ;
    padding                     : 0.3rem 0.5rem ;
}

.shopVariant:hover {
    background                  : #e2e2e2 ;
    border-color                : var(--dark-green) ;
    color                       : var(--dark-green) ;
}

.shopVariant.is-selected {
    background                  : var(--dark-green) ;
    border-color                : var(--dark-green) ;
    color                       : #ffffff ;
}

.shopVariantBasketCount {
    align-items                 : center ;
    background                  : #777777 ;
    border-radius               : 999px ;
    color                       : #ffffff ;
    display                     : inline-flex ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.68rem ;
    font-weight                 : 700 ;
    justify-content             : center ;
    line-height                 : 1 ;
    min-height                  : 1.25rem ;
    min-width                   : 1.25rem ;
    padding                     : 0.15rem 0.3rem ;
}

.shopVariant.is-selected .shopVariantBasketCount {
    background                  : #ffffff ;
    color                       : var(--dark-green) ;
}

.shopVariant[data-stock="0"] {
    background                  : #eeeeee ;
    border-color                : #b5b5b5 ;
    color                       : #777777 ;
}

.shopVariant[data-stock="0"]::after {
    content                     : "Sold out" ;
    font-size                   : 0.68rem ;
    font-weight                 : 700 ;
    margin-left                 : 0.25rem ;
    opacity                     : 0.8 ;
}

.shopVariant[data-stock="0"].is-selected {
    background                  : #777777 ;
    border-color                : #777777 ;
    color                       : #ffffff ;
}

/* =========================================================
   Product groups
   ========================================================= */

.shopGroups {
    display                     : grid ;
    gap                         : 0.8rem ;
    grid-template-columns       : repeat(
                                    auto-fit,
                                    minmax(210px, 280px)
                                  ) ;
}

.shopGroupCard {
    color                       : inherit ;
    display                     : block ;
    text-decoration             : none ;
    transition                  : box-shadow 140ms ease,
                                  transform 140ms ease ;
}

.shopGroupCard:hover {
    box-shadow                  : 0 4px 10px rgba(33, 71, 0, 0.18) ;
    transform                   : translateY(-1px) ;
}

.shopGroupImage {
    align-items                 : center ;
    background                  : #ffffff ;
    border                      : 1px solid rgba(33, 71, 0, 0.22) ;
    border-radius               : 5px ;
    display                     : flex ;
    height                      : 180px ;
    justify-content             : center ;
    overflow                    : hidden ;
    padding                     : 0.6rem ;
}

.shopGroupImage img {
    display                     : block ;
    height                      : auto ;
    max-height                  : 100% ;
    max-width                   : 100% ;
    object-fit                  : contain ;
    width                       : auto ;
}

.shopGroupTitle {
    color                       : var(--dark-green) ;
    font-family                 : var(--merriweather-face), serif ;
    font-size                   : 1.2rem ;
    font-style                  : italic ;
    font-weight                 : 700 ;
    margin-top                  : 0.5rem ;
}

.shopBackButton {
    align-items                 : center ;
    display                     : inline-flex ;
    gap                         : 0.35rem ;
    margin-top                  : 0.4rem ;
    text-decoration             : none ;
    width                       : fit-content ;
}


/* =========================================================
   SNIPCART — DREY THEME
   ========================================================= */

#snipcart {

    /* Global */
    --color-default             : #111111;
    --color-alt                 : #214700;
    --color-icon                : #214700;
    --color-link                : #360f5a;

    /* Backgrounds */
    --bgColor-default           : #ffffff;
    --bgColor-alt               : #dcffdb;
    --bgColor-modal             : #dcffdb;
    --bgColor-success           : #dcffdb;
    --bgColor-error             : #fbeaea;

    /* Borders */
    --borderColor-default       : #214700;
    --borderColor-error         : #a40000;

    /* Primary buttons */
    --color-buttonPrimary       : #ffffff;
    --color-buttonPrimary-hover : #ffffff;
    --bgColor-buttonPrimary     : #360f5a;
    --bgColor-buttonPrimary-hover
                                : #214700;
    --borderColor-buttonPrimary : #360f5a;
    --borderColor-buttonPrimary-hover
                                : #214700;

    /* Secondary buttons */
    --color-buttonSecondary     : #214700;
    --color-buttonSecondary-hover
                                : #ffffff;
    --bgColor-buttonSecondary   : #ffffff;
    --bgColor-buttonSecondary-hover
                                : #214700;
    --borderColor-buttonSecondary
                                : #214700;
    --borderColor-buttonSecondary-hover
                                : #214700;

    /* Inputs */
    --color-input               : #111111;
    --bgColor-input             : #ffffff;
    --borderColor-input         : #214700;
    --borderColor-input-focus   : #360f5a;

    /* Badges */
    --color-badge               : #ffffff;
    --bgColor-badge             : #214700;
}


#snipcart {
    font-family                 : var(--raleway-face), sans-serif;
}

#snipcart h1,
#snipcart h2,
#snipcart h3 {
    color                       : var(--dark-green);
    font-family                 : var(--merriweather-face), serif;
    font-style                  : italic;
}

#snipcart button,
#snipcart input,
#snipcart select,
#snipcart textarea {
    font-family                 : var(--raleway-face), sans-serif;
}