/* ==========================================================================
BASE & RESET STYLES
   ========================================================================== */
main {
    min-height: 100vh;
}
/* Editor Styles */
body.editor-styles-wrapper,
.editor-visual-editor,
.edit-post-visual-editor__content-area,
.is-root-container {
    background-color: var(--wp--preset--color--zen-white, #fafafa) !important;
    color: var(--wp--preset--color--zen-ink, #1a1a1a);
}
html, body {
    margin: 0;
    min-height: 100vh; /* Make sure html and body are at least viewport height */
}

.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures the container is at least the height of the viewport */
}

.wp-block-group.woocommerce.product.is-layout-flow.wp-block-group-is-layout-flow {
  flex-grow: 1; /* Allows this element to take up all available vertical space */
}

footer {
    margin-top: auto; /* Pushes the footer to the bottom of the body, after main has grown */
}

/* Main & Footer Spacing */
main {
    margin-bottom: 0;
}

footer {
    margin-top: 0;
}

/* Twemoji Styling - Consistent emoji across platforms */
img.twemoji,
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
    display: inline-block;
}




/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Margin Utilities */
.margin-0         { margin: 0 !important; }
.margin-bottom-0  { margin-bottom: 0 !important; }
.margin-top-0     { margin-top: 0 !important; }
.margin-left-0    { margin-left: 0 !important; }
.margin-right-0   { margin-right: 0 !important; }
.no-margin        { margin: 0; }

/* Position Utilities */
.fixed {
    position: fixed;
}

/* Text Utilities */
.nowrap {
    white-space: nowrap;
}

/* Pill Button Shape */
.pill-button {
    border-radius: 9999px;
    cursor: pointer;
}

/* Flex Utilities */
.flex-grow {
    display: flex;
    flex-grow: 1;
}

/* Shadow Utility */
.shadow {
    box-shadow: var(--shadow);
}




/* ==========================================================================
    LAYOUT & STRUCTURE
   ========================================================================== */

/* Left Panel Navigation */
.left-panel {
    align-self: stretch !important;
    flex-grow: 0;
    width: 100%;
    display: block;
    min-width: 220px;
    padding-inline-start: 40px;
    list-style-type: none;
    text-decoration: none;
    z-index: 1;
}

.left-panel a {
    text-decoration: none;
}

.left-panel a:hover {
    text-decoration: underline;
}

.left-panel .cat ul,
.left-panel li {
    list-style-type: none;
}

.left-panel .cat ul > li {
    font-size: 1em;
}

.left-panel .cat ul li ul > li {
    font-size: 0.8em;
}


/* Product Promo Collection */
.mixocreative-product-promo-collection {
    padding-inline-start: 0px;
    list-style-type: none;
}




/* ==========================================================================
    NAVIGATION & MENU
   ========================================================================== */

/* Mini Cart Badge */
.wc-block-mini-cart__badge {
    background-color: #cc1818;
}

/* Navigation Link Hover */
.wp-block-navigation .wp-block-navigation-item a:hover {
    text-decoration: none;
}

/* Small Navigation (Mobile) */
.nav-sm .wp-block-navigation .wp-block-navigation-item {
    border-bottom: solid 1px lightgray;
}

.nav-sm .wp-block-navigation .wp-block-navigation-item:hover {
    border-bottom: solid 2px gray;
}

.nav-sm {
    display: block !important;
}

.nav-sm ul {
    width: 100%;
    text-align: left;
}

.nav-sm ul li {
    width: 100%;
    text-align: left;
    display: block !important;
    width: 100% !important;
}

.nav-sm .nav-home {
    display: inline-block !important;
}

.nav-sm .wp-block-navigation__responsive-container a {
    padding-left: 1em !important;
}

.nav-sm .wp-block-navigation-item__content {
    padding-left: 1em !important;
}


/* Large Navigation (Desktop) */
.nav-lg .wp-block-navigation .wp-block-navigation-item:hover {
    border-bottom: solid 2px gray;
}

.nav-lg {
    display: none !important;
}
.inline-block{
    display: inline-block !important;
}

/* Navigation Toggle Icons */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    margin-top: 8px;
    height: 42px;
    width: 42px;
    margin-right: 8px;
}


/* Fix the giant focus outline */
:where(.wp-site-blocks :focus) {
    outline-style: none !important  ;
}