/**********************************************************
// Vars and colours
**********************************************************/
/******************************************************************************************************************************************************************************
// MEDIA QUERIES

Currently using Bootstrap breakpoint sizes

******************************************************************************************************************************************************************************/
/*
USE THESE FOR A GENERAL PLAN FOR LARGE AND SMALL SCREEN AND THEN TWEAK FURTHER WITH INDIVIDUAL SIZE OPTIONS IN NEED

*/
/**********************************************************
AGGREGATE SMALL (XS, S)
**********************************************************/
@media screen and (max-width: 767.98px) {
  .dtHdr {
    display: none !important;
  }
  .mtHdr {
    display: block;
  }
  .storeProductFilter {
    justify-content: center;
    margin-bottom: 1rem;
  }
  .hpBanner {
    margin-top: 3rem;
  }
  /*
    .dtHeader {
        width: 100%;
        font-family: Lora, serif;
        letter-spacing: 0.5rem;

        .hdrBar {
            width: 100%;
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-items: center;

            .hdrBlkLeft {
                flex: 0 1 20%;
                width: 20%;
            }

            .hdrBlkMid {
                .hpBrand {
                    a {
                        img {
                            width: 100px;
                            max-width: 100px;
                            margin: 0 auto;
                        }
                    }
                }
            }
        }
    }
    */
  .cartGridWrapper {
    width: 95%;
  }
  .cartGridWrapper .cgCardContent {
    margin-bottom: 2rem;
    width: 90%;
    min-width: 90%;
  }
  .cartGridWrapper .cgCardContent .cgDetails {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow label {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow input[type=text] {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailLeft label,
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight label {
    padding-top: 5px;
    width: 31.5%;
    margin-right: 2rem;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailLeft input[type=text],
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight input[type=text] {
    width: 60%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight label:last-of-type {
    padding-left: 2rem;
  }
  .cartGridWrapper .cgCardContent .cgDetails button.controlLink,
  .cartGridWrapper .cgCardContent .cgDetails button.controlLinkExt {
    width: 70%;
  }
  .hpFtrHdr h1 {
    font-size: 3rem;
  }
  .hpFtrProds {
    width: 100%;
    flex-flow: row wrap;
    justify-content: space-evenly;
  }
  .hpFtrProds .hpFftProd {
    flex: 0 1 50%;
  }
  .hpFtrProds .hpFftProd .fpDetail p {
    font-size: 1rem;
  }
  .dtFooter .pLinks {
    margin: 1rem auto;
  }
  .dtFooter .pLinks .pLink {
    justify-content: center;
  }
  .dtFooter .pLinks .pLink a {
    font-size: 0.8rem;
    text-align: center;
  }
  .storeProducts .storeProductItems {
    gap: 1rem;
  }
  .storeProducts .storeProductItems .storeProdItem {
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: flex-start;
  }
  .storeProducts .storeProductItems .storeProdItem .prodImg {
    justify-content: center;
    align-items: center;
  }
  .storeProducts .storeProductItems .storeProdItem .prodImg a img {
    max-width: none;
    margin: 0 auto;
  }
  .storeProduct {
    flex-flow: column;
    width: 100%;
  }
  .storeProduct .spLeft {
    width: 100%;
  }
  .storeProduct .spRight {
    margin-top: 1rem;
    width: 100%;
  }
  .storeProduct .spRight .spProductHdr {
    margin-bottom: 1rem;
  }
  .storeProduct .spRight .spProductHdr h1 {
    margin-top: 0;
    font-size: 2rem;
    text-align: center;
  }
  .storeProduct .spRight .spProductHdr .spStockState {
    margin-top: 1.5rem;
    text-align: center;
  }
  .storeProduct .spRight .spOptionsCart {
    display: flex;
    flex-flow: column;
  }
  .storeProduct .spRight .spOptionsCart .spOptions {
    flex-flow: column;
    margin-bottom: 2rem;
  }
  .storeProduct .spRight .spOptionsCart .spOptions .spOption {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .storeProduct .spRight .spOptionsCart .spCart .spAddContainer {
    display: flex;
    flex-flow: row nowrap;
  }
  .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spAddLink {
    width: 40%;
    justify-content: flex-end;
  }
  .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spQuantity {
    width: 60%;
  }
  .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spQuantity div.sqQtyInput {
    margin-left: 2rem;
  }
  .storeProduct .spRight .spOptionsCart .spCart .spAddContainer .spQuantity div.sqQtyInput input {
    text-align: center;
  }
  .storeProduct .spRight .spDesc {
    margin-top: 4rem;
  }
  .cartSection .cartHolder div.cartSummary {
    margin-top: 2em;
    width: 100%;
    border-bottom: 1px solid black;
    color: #5E5E5E;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-family: Lora, serif;
  }
  .cartSection .cartHolder div.cartSummary .csHeaders {
    display: none;
  }
  .cartSection .cartHolder div.cartSummary .csItems {
    width: 100%;
    flex-flow: column;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem {
    width: 100%;
    flex-flow: column;
    align-items: center;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem .csDesc {
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: column;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem .csDesc img {
    max-width: 200px;
    width: 200px;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem .csDesc span {
    display: block;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem .csPrice {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem .csTotal {
    margin-block: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem .csQty {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .cartSection .cartHolder div.cartSummary .csItems .csItem .csQty .csQtyRemove {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .cartSection .cartHolder div.cartSummaryTotals {
    margin-top: 2em;
    width: 100%;
    display: flex;
    flex-flow: column;
  }
  .cartSection .cartHolder div.cartSummaryTotals .stRow .stLabel {
    width: 50%;
    display: flex;
    justify-content: flex-end;
  }
  .cartSection .cartHolder div.cartSummaryTotals .stRow .stValue {
    width: 50%;
    display: flex;
    justify-content: flex-end;
  }
  .cartSection .cartHolder .csNext {
    justify-content: center;
  }
  .cartSection .cartHolder .csNext a.csNextLink {
    background-color: #A28DA8;
    color: #fff;
    padding: 5px 7px;
    cursor: pointer;
  }
  .cartSection .cartHolder .csNext a.csNextLink:hover {
    color: #5E5E5E;
    text-decoration: none;
  }
}
/**********************************************************
AGGREGATE MEDIUM (M)
**********************************************************/
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .dtHdr {
    display: none !important;
  }
  .storeProductFilter {
    justify-content: center;
    margin-bottom: 1rem;
  }
  .hpBanner {
    margin-top: 3rem;
  }
  .cartGridWrapper {
    width: 95%;
  }
  .cartGridWrapper .cgCardContent {
    margin-bottom: 2rem;
    width: 90%;
    min-width: 90%;
  }
  .cartGridWrapper .cgCardContent .cgDetails {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow label {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRow input[type=text] {
    width: 100%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailLeft label,
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight label {
    padding-top: 5px;
    width: 31.5%;
    margin-right: 2rem;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailLeft input[type=text],
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight input[type=text] {
    width: 60%;
  }
  .cartGridWrapper .cgCardContent .cgDetails .cgDetailRowHalf .cgDetailRight label:last-of-type {
    padding-left: 2rem;
  }
  .cartGridWrapper .cgCardContent .cgDetails button.controlLink,
  .cartGridWrapper .cgCardContent .cgDetails button.controlLinkExt {
    width: 70%;
  }
  .hpFtrHdr h1 {
    font-size: 3rem;
  }
  .hpFtrProds {
    width: 100%;
    flex-flow: row wrap;
    justify-content: space-evenly;
  }
  .hpFtrProds .hpFftProd {
    flex: 0 1 50%;
  }
  .hpFtrProds .hpFftProd .fpDetail p {
    font-size: 1rem;
  }
  .dtFooter .pLinks {
    margin: 1rem auto;
  }
  .dtFooter .pLinks .pLink {
    justify-content: center;
  }
  .dtFooter .pLinks .pLink a {
    font-size: 0.8rem;
    text-align: center;
  }
  .storeProducts .storeProductItems .storeProdItem {
    max-width: none;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: flex-start;
  }
  .storeProducts .storeProductItems .storeProdItem .prodImg {
    justify-content: center;
    align-items: center;
  }
  .storeProducts .storeProductItems .storeProdItem .prodImg a img {
    max-width: none;
    margin: 0 auto;
  }
}
/**********************************************************
AGGREGATE LARGE (L, XL)
**********************************************************/
@media screen and (min-width: 992px) {
  .dtHdr {
    display: block;
  }
  .mtHdr {
    display: none !important;
  }
}
/*
@media (max-device-width: 480px) and (orientation: landscape){
    &.collapse {
        display: none;
    }
}
*/
/**********************************************************
XS Devices - < 576px
Xtra Small
**********************************************************/
/**********************************************************
S Devices - > 576px < 768px
Small
@media (max-width: 575.98px) {
**********************************************************/
/**********************************************************
M Devices - > 768px < 992px
Medium
@media (max-width: 767.98px) {
**********************************************************/
/**********************************************************
L Devices - > 992px < 1200px
Large
@media (max-width: 991.98px) {
**********************************************************/
/**********************************************************
XL Devices - > 1200px
Xtra Large
@media (max-width: 1199.98px) {
**********************************************************/