/* The plan is to have a one file compilation of all CSS styles */
/* This is constantly being modified */


/* Get device width using CSS  */
@property --w_raw {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vw;
}

@property --h_raw {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vh;
}

:root {
    --w: tan(atan2(var(--w_raw), 1px));
    /* Screen width */
    --h: tan(atan2(var(--h_raw), 1px));
    /* Screen height */
    /* The result is an integer without unit  */

    --header-text: #f4f7f7;
    --navbar-background: #ffffff;
    --navbar-text: #814123;
    --navbar-border-bottom: 0.1px solid #f7f7f7;
    --announcement-background: #814123;
    --announcement-text: #f4f7f7;
    /* --product-text: #034f84; */
    --footer-background-color: #efd1c3;
}

#section_id_announcement_bar {
    /* --announcement-background: #09728c; */
    /* --announcement-text: #f4f7f7; */
    --link-underline: rgba(244, 247, 247, 0.6);
    --announcement-font-size: 14px;
}

/*.announcement_bar_middle p::before {*/
    /* Display the device width and height for test purposes */
/*    content: '(' counter(w) 'px x ' counter(h) 'px) ';*/
/*    counter-reset: h var(--h) w var(--w);*/
/*    font-family: cardo, serif;*/
/*}*/

/* W3 CSS  */

.w3-sidebar a {
    font-family: "Roboto", sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.w3-wide {
    font-family: "Monstserrat", sans-serif;
}

.hero_slides {
    display: none;
}

.w3-badge {
    height: 13px;
    width: 13px;
    padding: 0;
}

.w3-sidebar {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed !important;
    z-index: 1;
    overflow: auto;
}

.w3-sidebar {
    height: 100%;
    width: 250px;
    background-color: #fff;
    position: fixed !important;
    z-index: 1;
    overflow: auto
}

.w3-bar-block {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0
}

.w3-white,
.w3-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important
}

.w3-top,
.w3-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}

.w3-top {
    top: 0
}

.w3-topbar {
    border-top: 6px solid #ccc !important
}

.w3-animate-left {
    position: relative;
    animation: animateleft 0.4s
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.w3-animate-right {
    position: relative;
    animation: animateright 0.4s
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

/* Below is the conversions for W3SCHOOLS styles */
/*
.w3-content: main-content
.w3-container: main-container
.w3-display-container: display-container
.w3-sidebar: 
.w3-bar-item: sidepanel-bar-item
.w3-panel: panel
.w3-card: card
.w3-card-2: card-2
.w3-card-4: card-4
.w3-center: center
.w3-.padding-64: .padding-64
.w3-display-middle: display-middle
.w3-display-hover: display-hover
.w3-button: buy-button
.w3-black: black-button
.w3-padding-24: padding-24
.w3-col.l3: product-col


*/

/* .w3-bar-item */
/* Overriding the w3.css declaration */
/* bad idea, instead create custom class  */



/* Move this to bigger screen screen later */
/* This is mainly because product image display on product/show.php */
/* There are some inline CSS. How do we override that? */

.main-container p {
    margin-top: 1em;
    margin-bottom: 1em;
}


/* Mobile header  */




/* Global Variables */


/* From :  */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

/* Categories display  */
.move-images-down-on-mobile {
    margin-top: 100px;
}

.main-content {
    margin-left: auto;
    margin-right: auto;
}

.main-content {
    max-width: 1480px;
}


/* html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    vertical-align: baseline;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    font: inherit;
} */

/* Zoom-in Slide Show Banner  */
body,
html {
    margin: 0;
    padding: 0;
    /* Removing the height so that the sticky navbar will work for the whole height  */
    /* height: 100%; */
    /* Removing the below to make the scrollbar move to the
    right edge of the browser */
    /* overflow-x: hidden; */
    font-family: Arial, sans-serif;
}

.slideshow-container {
    position: relative;
    /* top: -23px; */
    width: 100%;
    /* Returning back to height: 100vh after using 87.4vh */
    /* height: 100vh; */
    /* Returning back to 87.5vh */
    height: 70vh;
    overflow: hidden;
    /* There was a space in the top, so adding margin-top  */
    /* Because, its already position relative, might use top instead */
    /* I heard this could also be acheived with translateY */
    /* Removing the top attribute, no longer need  */
    /* margin-top: -23px; */
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    /* height: 100vh; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* transform: scale(1); */
    transition: transform 2.5s ease, opacity 2.5s ease;
    opacity: 0;
}

.slide.fade {
    transform: scale(1);
    opacity: 1;
}

.prev,
.next {
    display: none;
    /* Hiding this for the time being */
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.9s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.text {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.display-container {
    height: 195px;
    /* width: 200px; */
    box-sizing: border-box;
}

/* Start - Product image modal  */

/* Using the a tag and href attribute but might remove 
the href and use cursor: pointer instead */
/* .img_a {
    cursor: pointer;
} */

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 22;
    /* inherit 100% height  */
    /* padding-top: 95px; */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background-color: rgb(255, 255, 255);
    /* background-color: rgb(0,0,0); */
    /* Remove modal transparency */
    /* background-color: rgba(0, 0, 0, 0.8); */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    /* inherit 100% height  */
    height: 100%;
    max-width: 700px;
    object-fit: contain;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    /* Removed the caption, so that modal image  */
    /* will inherit 100% height  */
    /* padding: 10px 0;
    height: 150px; */
}

/* Add Animation */
.modal-content,
#caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* .modal-open {
    position: fixed;
    overflow: hidden;
} */

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close-modal {
    /* Need to adjust this on bigger screens  */
    position: absolute;
    top: 1.15rem;
    right: 1.95rem;
    cursor: pointer;
    /* color: #f1f1f1; */
    color: #8b0d0d;
    font-size: 40px;
    /* font-weight: bold; */
    transition: 0.3;
    /* The circle around the 'x' element */
    /* border: 7px solid #8b0d0d;
    border-radius: 50%;
    padding: 0px 1px;
    line-height: 0.7; */
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* end - product image modal */



/* Start - Side Panel */
/* for the Home page navbar */

.sidepanel {
    width: 0;
    /* Position - fixed is a problem.  */
    position: fixed;
    z-index: 2;
    /* The height was causing the page to squish */
    /* Changing it to 100%  */
    height: 100%;
    top: 0;
    /* Left - because we are not using the full width of
  the page, we need to adjust the left position */
    /* However, how will that affect the mobile display  */
    /* We also need to increase the width or decrease the font-size  */
    /* If we increase the width, then will have to adjust the left position  */
    /* To reduce the font-size, we go to sidepanel <a> tags  */
    /* left: 360px; */
    background-color: #111;
    overflow-x: hidden;
    /* Added overflow-y to avoid scroll  */
    overflow-y: hidden;
    transition: 0.5s;
    /* Moving the padding-top to bigger screens  */
    /* padding-top: 60px; */
}

.sidepanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    /* This is where we reduce the font size  */
    font-size: 20px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidepanel a:hover {
    color: #f1f1f1;
}

nav div h3 a {
    color: red;
    font-size: 20px;
}

.sidepanel h3 a {
    font-size: 35px;
}

.sidepanel .closebtn {
    position: absolute;
    /* Change the top from 0 to 10 and make right 0 */
    top: 10px;
    right: 5px;
    font-size: 36px;
    color: rgb(78, 15, 15);
}

.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

.sidepanel-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0;
}

.padding-24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

header div.sidepanel-bar-item {
    /* Using this to add some space on mobile header */
    padding-left: 26px !important;
}

.sidepanel-bar-item>a {
    text-decoration: none;
}

/* End - Side Panel */


/* Start - Product Card Carousel */



.corousel-container {
    display: grid;
    grid-template-areas:
        "scroll scroll scroll"
        "left markers right";
    grid-template-columns: auto 1fr auto;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }

    & li {
        scroll-snap-align: center;
    }
}



/* .carousel {
    color: blue;
    grid-area: scroll;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: grid;
    max-inline-size: 80cqi;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
} */

/* Hide scrollbar for Chrome, Safari and Opera */
/* .carousel::-webkit-scrollbar {
    display: none;
   
} */

/* .carousel { */
/* -ms-overflow-style: none; */
/* IE and Edge */
/* scrollbar-width: none; */
/* Firefox */
/* } */

.product-card {
    display: grid;
    /* grid: 20vmin / auto-flow 45vmin; */
    grid: 250px / auto-flow 200px;
    gap: 15px;
    padding: 0;
    margin: 0;

    &>li {
        list-style-type: none;
        /* border: 3px solid #888; */
        border: none;
    }
}


/* ============== */

.main-container:before,
.main-container:after,
.panel:after,
.panel:before {
    content: "";
    display: table;
    clear: both;
}

.main-container,
.panel {
    padding: 0.01em 16px;
}

.panel {
    margin-top: 16px;
    margin-bottom: 16px;
}

.card,
.card-2 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.card-4 {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.center {
    text-align: center !important;
}

/* End - Product Card Carousel */

/* This is for the 'product create page' - new.php @ pageon*/
.product_image_hideText {
    color: transparent;
}

.product_image_showText {
    color: black;
}

.product-image-page {
    margin-top: 80px;
}


.product_image_preview_container {
    display: flex;
    flex-wrap: wrap;
    /* background-color: #F23F4F; */
gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    margin-top:15px;
}

.product_image_preview {

    /* width: auto; */
    /* width: 300px;
    height: 302px; */
    cursor: pointer;

    /* display: block; */
    /* position: absolute; */
    /* top: 0; */
    left: 0;
    /* width: 100%;
    height: 100%; */
    object-fit: contain;
}

.product_image_preview img {
    display: inline;
}


/* Product Details Page - Start */


.card-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 30px;
}

.card-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

.product-image-text {
    /* margin-top: 83px; */
    padding: 0;
    text-align: center;
    font-family: Garamond, serif;
    color: var(--navbar-text);
    /* margin-bottom: 20px; */
}

img {
    width: 100%;
    display: block;
    /* height: 100%; */
    border-style: none;
}

.img-display {
    overflow: hidden;
}

.img-showcase {
    display: flex;
    width: 100%;
    transition: all 0.5s ease;
    height: 455px;
}

.img-showcase img {
    min-width: 100%;
    cursor: pointer;
}

.img-select {
    display: flex;
}

.img-item {
    margin: 0.3rem;
    flex: 1;
    flex-basis: 0;
    /* height: 132px; */
    height: 115px;
}

.img-item:nth-child(1),
.img-item:nth-child(2),
.img-item:nth-child(3) {
    margin-right: 0;
}

.img-item:hover {
    opacity: 0.8;
}

.img-item img {
    height: 100%;
}

/* Product Details Page - End */


/* This is temp - for showing raw php */
.php-span {
    position: absolute;
    top: 100px;
    right: 100px;
    margin-bottom: 20px;
    border: 1px solid green;
    color: red;
}


/* Footer  */
.home-footer {
    /* position: fixed;
    bottom: 0; */
    width: 100%;
    background-color: var(--footer-background-color);
    color: var(--navbar-text);
}

/* Push down content to show the announcement */
/* .section_announcement_bar {
    margin-top: 52.4px;
} */

.announcement_bar_middle {
    text-align: center;
    padding: 8px 0;
}

/* #section_id_announcement_bar {
    --announcement-background: #09728c;
    --announcement-text: #f4f7f7;
    --link-underline: rgba(244, 247, 247, 0.6);
    --announcement-font-size: 14px;
} */

.announcement_bar {
    position: relative;
    font-size: 12px;
    line-height: 1.4em;
    background: var(--announcement-background);
    color: var(--announcement-text);
}



/* Staff page logout  */
.logout {
    background-color: #8b0d0d;
    color: #fff; 
}



/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* Meida Queries  */

/* Extra small devices - This should be the default */
/* There should be not much rule in this space  */
@media only screen and (max-width: 600px) {

    /* No rule should be here. All rules should be above */
    html {
        margin: 0
    }

    .mobile-header {
        position: sticky;
        background-color: var(--navbar-background);
        color: var(--navbar-text);
        border-bottom: var(--navbar-border-bottom);
    }

    .big-screen-navmenu-container {
        display: none;
    }

    .carousel {
        color: blue;
        grid-area: scroll;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        display: grid;
        max-inline-size: 80cqi;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;

        /* scroll marker group still not baseline available */
        /* scroll-marker-group: before;
    &::scroll-marker-group {
        grid-area: markers;  
        display: grid;
        place-content: safe center;
        grid: 30px / auto-flow 30px;
        gap: 15px;
        padding: 15px;
        scroll-padding: 15px;
        overflow: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    } */

        &>.product-card>li {
            &::scroll-marker {
                display: grid;
                grid-area: markers;
                content: " ";
                border: 1px solid #bbb;
                border-radius: 1e3px;
                outline-offset: 4px;
                -webkit-tap-highlight-color: transparent;
                scroll-snap-align: center;
            }

            &::scroll-marker:is(:hover, :focus-visible) {
                border-color: LinkText;
            }

            &::scroll-marker:target-current {
                background: LinkText;
                border-color: LinkText;
            }
        }

        &::scroll-button(*) {
            inline-size: 48px;
            aspect-ratio: 1;
            border-radius: 1e3px;
            border: 2px solid #999;
            margin: 5px;
            /* display: none; */
        }

        &::scroll-button(*):focus-visible {
            outline-offset: 5px;
        }

        &::scroll-button(*):not(:disabled):is(:hover, :active) {
            background-color: Canvas;
        }

        &::scroll-button(*):not(:disabled):active {
            scale: 90%;
        }

        &::scroll-button(left) {
            content: "⬅" / "Scroll Left";
            grid-area: left;
        }

        &::scroll-button(right) {
            content: "⮕" / "Scroll Right";
            grid-area: right;
        }
    }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    html {
        margin: 0
    }

    .mobile-header {
        position: sticky;
        background-color: var(--navbar-background);
        color: var(--navbar-text);
        border-bottom: var(--navbar-border-bottom);
    }

    .big-screen-navmenu-container {
        display: none;
    }

    .carousel {
        color: blue;
        grid-area: scroll;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        display: grid;
        max-inline-size: 80cqi;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;

        /* scroll marker group still not baseline available */
        /* scroll-marker-group: before;
    &::scroll-marker-group {
        grid-area: markers;  
        display: grid;
        place-content: safe center;
        grid: 30px / auto-flow 30px;
        gap: 15px;
        padding: 15px;
        scroll-padding: 15px;
        overflow: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    } */

        &>.product-card>li {
            &::scroll-marker {
                display: grid;
                grid-area: markers;
                content: " ";
                border: 1px solid #bbb;
                border-radius: 1e3px;
                outline-offset: 4px;
                -webkit-tap-highlight-color: transparent;
                scroll-snap-align: center;
            }

            &::scroll-marker:is(:hover, :focus-visible) {
                border-color: LinkText;
            }

            &::scroll-marker:target-current {
                background: LinkText;
                border-color: LinkText;
            }
        }

        &::scroll-button(*) {
            inline-size: 48px;
            aspect-ratio: 1;
            border-radius: 1e3px;
            border: 2px solid #999;
            margin: 5px;
            /* display: none; */
        }

        &::scroll-button(*):focus-visible {
            outline-offset: 5px;
        }

        &::scroll-button(*):not(:disabled):is(:hover, :active) {
            background-color: Canvas;
        }

        &::scroll-button(*):not(:disabled):active {
            scale: 90%;
        }

        &::scroll-button(left) {
            content: "⬅" / "Scroll Left";
            grid-area: left;
        }

        &::scroll-button(right) {
            content: "⮕" / "Scroll Right";
            grid-area: right;
        }
    }
}


/* For Samsung tabs and iPhone iPads */
/* When on landscape orientation */
/* Medium devices (landscape tablets, 768px and up) */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media only screen and (min-width: 768px) {
    html {
        margin: 0
    }

    /* Expanding the page to full width  */
    /* .w3-content {
        max-width: 1200px;
    } */

    .display-container {
        /* height: 600px; */
        /* Using this for maintaining product display on homepage */
        height: 252px;
    }

    .move-images-down-on-mobile {
        margin-top: 0;
    }

    .mobile-header {
        position: sticky;
        background-color: var(--navbar-background);
        color: var(--navbar-text);
        border-bottom: var(--navbar-border-bottom);
    }

    .big-screen-navmenu-container {
        display: none;
    }

    .product-image-text {
        /* margin: 0; */
        padding: 0;
        text-align: center;
        font-family: Garamond, serif;
        color: var(--navbar-text);
        /* margin-bottom: 20px; */
    }

    .img-item {
        height: 135px;
    }

    .img-showcase {
        display: flex;
        width: 99.5%;
        transition: all 0.5s ease;
        height: 600px;
    }

    .slideshow-container {
        height: 100vh;
    }

    .slide {
        height: 100%;
    }

    .carousel {
        color: blue;
        grid-area: scroll;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        display: grid;
        max-inline-size: 80cqi;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;

        /* scroll marker group still not baseline available */
        /* scroll-marker-group: before;
    &::scroll-marker-group {
        grid-area: markers;  
        display: grid;
        place-content: safe center;
        grid: 30px / auto-flow 30px;
        gap: 15px;
        padding: 15px;
        scroll-padding: 15px;
        overflow: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    } */

        &>.product-card>li {
            &::scroll-marker {
                display: grid;
                grid-area: markers;
                content: " ";
                border: 1px solid #bbb;
                border-radius: 1e3px;
                outline-offset: 4px;
                -webkit-tap-highlight-color: transparent;
                scroll-snap-align: center;
            }

            &::scroll-marker:is(:hover, :focus-visible) {
                border-color: LinkText;
            }

            &::scroll-marker:target-current {
                background: LinkText;
                border-color: LinkText;
            }
        }

        &::scroll-button(*) {
            inline-size: 48px;
            aspect-ratio: 1;
            border-radius: 1e3px;
            border: 2px solid #999;
            margin: 5px;
        }

        &::scroll-button(*):focus-visible {
            outline-offset: 5px;
        }

        &::scroll-button(*):not(:disabled):is(:hover, :active) {
            background-color: Canvas;
        }

        &::scroll-button(*):not(:disabled):active {
            scale: 90%;
        }

        &::scroll-button(left) {
            content: "⬅" / "Scroll Left";
            grid-area: left;
        }

        &::scroll-button(right) {
            content: "⮕" / "Scroll Right";
            grid-area: right;
        }
    }

    .section_announcement_bar {
        /* Push down content to show the announcement */
        margin-top: 0;
    }

    /* #section_id_announcement_bar {
        --announcement-background: #09728c;
        --announcement-text: #f4f7f7;
        --link-underline: rgba(244, 247, 247, 0.6);
        --announcement-font-size: 14px;
    } */

    .announcement_bar {
        position: relative;
        font-size: 12px;
        line-height: 1.4em;
        background: var(--announcement-background);
        color: var(--header-text);
    }

    .container_no_max {
        display: flex;
    }

    .announcement_bar_middle {
        text-align: center;
        position: relative;
        flex: 1 1 auto;
    }
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  */

/* For desktop monitors */
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* body {
    Expanding the page to full width
        max-width: 1200px;
    } */


    /* .w3-content {
        max-width: 1200px;
    } */

    .big-screen-navmenu-container {
        display: block;
        text-align: center;
        margin: 0;
        padding: 0;
        position: sticky;
        z-index: 4;
        top: 0;
        background-color: var(--navbar-background);
        color: var(--navbar-text);
        border-bottom: var(--navbar-border-bottom);
    }

    .big-screen-navmenu-list-container {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .big-screen-navmenu-list-item {
        list-style: none;
        display: inline-block;
        margin: 18px 0;
    }

    .big-screen-navmenu-link {
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 25px;
    }

    .big-screen-navmenu-link:hover {
        background-color: var(--navbar-text);
        color: #F1F1F1;
    }

    .big-screen-navmenu-link-hover {
        background-color: var(--navbar-text);
        color: #F1F1F1;
    }

    .header-logo {
    float: left;
    padding-left: 20px;
    padding-top: 10px;
    font-size: 22px;
}

    .sidepanel {
        width: 250px;
        /* Top: already declared above */
        /* top: 0; */
        /* padding already have zero here so, no 60px */
        padding-top: 0;
        /* Looks like left: 360px was an overfitting styling
        Removing it to fix bigger screens issue */
        /* left: 360px; */
        display: none;
    }

    .slide {
        height: 100%;
        /* Still have to cater for other viewports  */
    }

    .carousel {
        color: blue;
        grid-area: scroll;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        display: grid;
        max-inline-size: 80cqi;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;

        /* scroll marker group still not baseline available */
        /* scroll-marker-group: before;
    &::scroll-marker-group {
        grid-area: markers;  
        display: grid;
        place-content: safe center;
        grid: 30px / auto-flow 30px;
        gap: 15px;
        padding: 15px;
        scroll-padding: 15px;
        overflow: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    } */

        &>.product-card>li {
            &::scroll-marker {
                display: grid;
                grid-area: markers;
                content: " ";
                border: 1px solid #bbb;
                border-radius: 1e3px;
                outline-offset: 4px;
                -webkit-tap-highlight-color: transparent;
                scroll-snap-align: center;
            }

            &::scroll-marker:is(:hover, :focus-visible) {
                border-color: LinkText;
            }

            &::scroll-marker:target-current {
                background: LinkText;
                border-color: LinkText;
            }
        }

        &::scroll-button(*) {
            inline-size: 48px;
            aspect-ratio: 1;
            border-radius: 1e3px;
            border: 2px solid #999;
            margin: 5px;
        }

        &::scroll-button(*):focus-visible {
            outline-offset: 5px;
        }

        &::scroll-button(*):not(:disabled):is(:hover, :active) {
            background-color: Canvas;
        }

        &::scroll-button(*):not(:disabled):active {
            scale: 90%;
        }

        &::scroll-button(left) {
            content: "⬅" / "Scroll Left";
            grid-area: left;
        }

        &::scroll-button(right) {
            content: "⮕" / "Scroll Right";
            grid-area: right;
        }
    }

    /* p {
        margin: 15px 0 5px 0;
    } */

    div.display-container {
        margin-top: 15px;
        /* width: 220px; */
        height: 400px;
    }

    div.display-container img {
        cursor: pointer;
    }

    div.display-container img:hover {
        /* comment this out later when the cart have been implemented */
        border: 1px solid black;
    }

    .modal {
        padding-top: 0;
    }

    .modal-content {
        width: 100%;
        /* width: 80%; */
        height: 100%;
        object-fit: unset;
    }

    .close-modal {
        /* Need to adjust this on bigger screens  */
        position: absolute;
        top: 1.75rem;
        right: 3rem;
        cursor: pointer;
        /* color: #f1f1f1; */
        color: #8b0d0d;
        font-size: 40px;
        /* font-weight: bold; */
        transition: 0.3;
        /* The circle around the 'x' element */
        /* border: 7px solid #8b0d0d;
    border-radius: 50%;
    padding: 0px 1px;
    line-height: 0.7; */
    }

    .w3-animate-left {
        animation: none;
    }

    .product-card {
        grid: 330px / auto-flow 234px;
        line-height: normal;

        &>li {
            border: none;
        }
    }

    ul img {
        width: 228px;
        /* cursor: pointer; */
    }

    li p {
        font-family: cardo, serif;
        font-style: normal;
        line-height: 1.6;
    }

    .display-middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .w3-display-container:hover .display-hover {
        display: block;
    }

    .display-hover {
        display: none;
    }

    .buy-button {
        border: none;
        display: inline-block;
        padding: 8px 16px;
        vertical-align: middle;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        background-color: inherit;
        text-align: center;
        cursor: pointer;
        white-space: nowrap;
    }

    .buy-button {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .buy-button:disabled {
        cursor: not-allowed;
        opacity: 0.3;
    }

    .buy-button:hover {
        color: #000 !important;
        background-color: #ccc !important;
    }

    .black-button {
        color: #FFF !important;
        background-color: #000 !important;
    }

    .product-hover {
        transition: 0.4s ease-out;
    }

    .product-hover:hover {
        /* Use this or the img one above */
        transform: scale(1.01);
    }

    .padding-64 {
        padding-top: 20px !important;
    }

    /* This is for the 'product create page' - new.php @ pageon*/
    .container-p p {
        margin-bottom: 0;
    }

    .card {
        display: grid;
        /* This is kinda temporary  */
        /* grid-template-columns: repeat(2, 1fr); */
        grid-gap: 1.5rem;
    }

    .card-wrapper {
        /* This right here was causing a lot of issue. 
        Spent days trying to figure out while the footer was not
        at bottom of the page on product details show.php page */
        /* height: 100vh; */
        height: 800px;
        width: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* This is kinda temporary  */
        /* margin-left: 250px; */
        /* height: 690px; */
        /* margin-top: 120px; */
    }

    .product-imgs {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    a {
        text-decoration: none;
    }

    .move-images-down-on-mobile {
        margin-top: 0;
    }

    .w3-col.l2.product-col {
        /* Remove '.w3-col.l2' once the necessary changes have been made  */
        /* Use this to control the width of home page product images  */
        /* Would need to consider using grid or flex to handle the display  */
        width: 20%;
        /* width: 15%; */
    }

    /* .product_image_preview {
        display: inline block;
    } */
}


/* For Samsung tabs and iPhone iPads */
/* When on landscape orientation */
/* Extra large devices (large laptops and desktops, 1200px and up) */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media only screen and (min-width: 1200px) {
    .sidepanel {
        width: 250px;
    }
}

/* For Samsung tabs and iPhone iPads */
/* When on landscape orientation */
/* Extra large devices (multiple screens and bigger display) */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Media Queries @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media only screen and (min-width: 2000px) {
    .sidepanel {
        width: 250px;
    }

    .w3-main .slideshow-container {
        position: relative;
        /* top: -23px; */
        width: 100%;
        /* Using the '--w' as image height and
        controlling its usage with aspect ratio */
        height: var(--w);
        /* height: 70vh; */
        overflow: hidden;
        /* margin-top: -23px; */
        aspect-ratio: 1/0.5;
    }

    div.display-container {
        height: 750px;
    }
}