/* =========================
   Base & Globals
   ========================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}
.scroll-container {
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
}
div, span, p {
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, img {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
}
:not(input):not(select):not(textarea):not(button):focus {
    outline: none;
}
img {
    user-select: none; 
    -webkit-user-drag: none;
}

input#rememberme[type="checkbox"] {
    accent-color: #1A3B57;
}
input.notification-checkbox[type="checkbox"] {
    accent-color: #1A3B57;
}
input[type="checkbox"] {
    accent-color: #1B2B12;
}
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #EBE0C5 inset;
    -webkit-text-fill-color: #000; /* Set desired text color */
    transition: background-color 5000s ease-in-out 0s;
}

input,
textarea,
select {
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Chrome, Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0px 1000px #EBE0C5 inset !important;
    box-shadow: 0 0 0px 1000px #EBE0C5 inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Firefox */
input:-moz-autofill {
    box-shadow: 0 0 0px 1000px #EBE0C5 inset !important;
    -moz-text-fill-color: #000 !important;
}

/* =========================
   Scrollbars
   ========================= */
.search-results::-webkit-scrollbar,
#product-description-container::-webkit-scrollbar,
.similar-products::-webkit-scrollbar,
#checkout-sidebar-previous-order-details::-webkit-scrollbar,
.carousel-content-container::-webkit-scrollbar,
.carousel-content::-webkit-scrollbar,
.scroll-container::-webkit-scrollbar,
#mobile-product-details-container > div::-webkit-scrollbar,
#mobile-orders-container::-webkit-scrollbar,
#mobile-cart-container::-webkit-scrollbar,
#mobile-shop::-webkit-scrollbar,
#mobile-order-details::-webkit-scrollbar,
.overflow-x-scroll::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar {
    display: none;
    width: 0px;
    height: 0px;
    background: transparent;
}

/* =========================
   Search Results
   ========================= */
.search-results {
    opacity: 0;
    max-height: 0px;
    transition: opacity 0.5s ease, max-height 0.5s ease !important;
}
.search-results.expanded {
    opacity: 1;
    max-height: 460px;
}

/* =========================
   Input Number
   ========================= */
/* Chrome, Safari, Edge, Opera */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

/* =========================
   Prevents double-tapping on increment / decrement button from zooming in
   ========================= */
html {
    touch-action: manipulation; /* Hints at no double-tap */
}

button:focus {
    outline: none;
    box-shadow: none;
}

button,
a,
input,
label,
textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* =========================
   Mobile Header
   ========================= */
#mobile-header {
    /* Don't relow whole page when header is expanded or collapsed */
    contain: layout style;

    background-color: #00000000;
    transition: background-color 0.5s ease;
}
#mobile-header.collapsed {
    background-color: #AE252A;
}
#mobile-header .light-icon {
    opacity: 1;
    display: block; 
    transition: opacity 0.5s ease;
}
#mobile-header .dark-icon {
    opacity: 0;
    display: none; 
    transition: opacity 0.5s ease;
}
#mobile-header.collapsed .light-icon {
    opacity: 0;
    display: none; 
}
#mobile-header.collapsed .dark-icon {
    opacity: 1;
    display: block; 
}
#mobile-header #mobile-sidebar-menu-button {
    opacity: 1;
    display: block;
    transition: opacity 0.5s ease;
}
#mobile-header.collapsed #mobile-sidebar-menu-button {
    opacity: 0;
    display: none;
}
#mobile-header #mobile-sidebar-back-button {
    display: none;
}
#mobile-header.collapsed #mobile-sidebar-back-button {
    display: block;
}
#mobile-header #mobile-header-content {
    top: 40px;
    transition: top 0.5s ease, row-gap 0.5s ease;
    pointer-events: auto;
}
#mobile-header.collapsed #mobile-header-content {
    top: 0px;
    row-gap: 0px;
    pointer-events: none;
}
#mobile-header #mobile-header-logo {
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
    will-change: opacity, transform;
    transition: opacity 0.3s ease, transform 0.5s ease;
    display: block;
}
#mobile-header.collapsed #mobile-header-logo {
    opacity: 0;
    transform: scale(0);
}
#mobile-header #mobile-header-search-bar form {
    border-radius: 100px;
    width: 85vw;
    padding: 10px 14px;
    transform: translate(0%, 0px);
    will-change: transform;
    transition: border-radius 0.5s ease, width 0.5s ease, padding 0.5s ease, transform 0.5s ease;
    pointer-events: auto;
}
#mobile-header.collapsed #mobile-header-search-bar form {
    border-radius: 6px;
    width: 65vw;
    padding: 6px 0px;
    transform: translate(-5%, -78px);
}
#mobile-header #mobile-header-search-bar form input {
    transform: scale(1.05);
    transform-origin: left;
    padding: 0px 16px;
    will-change: transform;
    transition: transform 0.5s ease;
}
#mobile-header.collapsed #mobile-header-search-bar form input {
    transform: scale(0.95);
}

/* =========================
   Mobile Sidebar
   ========================= */
#mobile-sidebar-menu {
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
#mobile-sidebar-menu.expanded {
    transform: translateX(0%);
}

/* =========================
   Header Menus
   ========================= */
header #account-dropdown-menu {
    max-height: 0px;
    padding: 0px 0px;
    opacity: 0;
    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
}
header #account-dropdown-menu.expanded {
    max-height: 120px;
    opacity: 1;
}
header #language-dropdown-menu {
    max-height: 0px;
    padding: 0px 0px;
    opacity: 0;
    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
}
header #language-dropdown-menu.expanded {
    max-height: 120px;
    padding : 10px 0px;
    opacity: 1;
}

/* =========================
   Breadcrumb Delivery & Pickup
   ========================= */
.breadcrumb-times-option {
    border-bottom: 0px solid #AE252A00;
    transition: border-bottom 0.5s ease;
}
.breadcrumb-times-option.selected {
    border-bottom: 2px solid #AE252A;
}
#breadcrumb-delivery-and-pickup-times-dropdown {
    max-height: 0px;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}
#breadcrumb-delivery-and-pickup-times-dropdown.expanded {
    max-height: 400px;
    opacity: 1;
}
#breadcrumb-delivery-times-menu {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
#breadcrumb-delivery-times-menu.selected {
    display: flex;
    opacity: 1;
}
#breadcrumb-pickup-times-menu {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
#breadcrumb-pickup-times-menu.selected {
    display: flex;
    opacity: 1;
}

/* =========================
   Footer Graphics
   ========================= */
#footer-graphics-one {
    filter: drop-shadow(-6px 6px 5px #00000022);
}

#footer-graphics-two {
    filter: drop-shadow(-6px 6px 5px #00000022);
}

#footer-graphics-three {
    filter: drop-shadow(6px 6px 5px #00000022);
}

#footer-graphics-four {
    filter: drop-shadow(6px 6px 5px #00000022);
}

/* =========================
   WooCommerce Notices
   ========================= */
.woocommerce-notices-wrapper {
    display: none;
}

/* =========================
   Checkout Sidebar
   ========================= */
#checkout-sidebar {
    pointer-events: none;
    max-height: 0px;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease !important;
}
#checkout-sidebar.expanded {
    pointer-events: all;
    max-height: 700px;
    opacity: 1;
}
#checkout-sidebar-previous-orders-container {
    max-height: 60px;
    opacity: 0;
}
#checkout-sidebar-previous-orders-container.expanded {
    max-height: 700px;
    opacity: 1;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}
#checkout-sidebar-previous-orders-dropdown {
    max-height: 0px;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}
#checkout-sidebar-previous-orders-dropdown.expanded {
    max-height: 100vh;
    opacity: 1;
}

/* =========================
   Desktop Breadcrumb Category
   ========================= */
#desktop-breadcrumb #category-menu > div {
    background-color: #FFFFFF;
    transition: background-color 0.5s ease;
}
#desktop-breadcrumb #category-menu > div > div > span {
    color: #000000;
    transition: color 0.5s ease;
}
#desktop-breadcrumb #category-menu > div .inactive-icon {
    display: block; 
    opacity: 1;
    transform: rotate(90deg);
    transition: opacity 1.5s ease 0.5s, transform 1.5s ease 0.5s;
}
#desktop-breadcrumb #category-menu > div .active-icon {
    display: none;
    opacity: 0;
    transform: rotate(00deg);
    transition: opacity 1.5s ease 0.5s, transform 1.5s ease 0.5s;
}
#desktop-breadcrumb #category-menu > div.active {
    background-color: #AE252A;
}
#desktop-breadcrumb #category-menu > div.active > div > span {
    color: #FFFFFF;
}
#desktop-breadcrumb #category-menu > div.active .inactive-icon {
    display: none;
    opacity: 0;
    transform: rotate(0deg);
}
#desktop-breadcrumb #category-menu > div.active .active-icon {
    display: block; 
    opacity: 1;
    transform: rotate(0deg);
}

/* =========================
   Desktop Breadcrumb Start Shopping
   ========================= */
#start-shopping > span {
    animation: textWiggle 1.5s infinite;
    transform-origin: center center;
}
@keyframes textWiggle {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(1.5deg); }
    20% { transform: rotate(-1.5deg); }
    30% { transform: rotate(1.5deg); }
    40% { transform: rotate(-1.5deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
#start-shopping > img {
    animation: wiggle 1.5s infinite;
    transform-origin: center center;
}
@keyframes wiggle {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
#desktop-breadcrumb #start-shopping-sidebar {
    opacity: 0;
    max-height: 0px;
    transition: opacity 0.5s ease, max-height 0.5s ease;
}
#desktop-breadcrumb #start-shopping-sidebar * {
    opacity: 0;
    transition: opacity 0.5s ease;
}
#desktop-breadcrumb #start-shopping-sidebar.expanded {
    opacity: 1;
    max-height: 1400px;
}
#desktop-breadcrumb #start-shopping-sidebar.expanded * {
    opacity: 1;
}

/* =========================
   Desktop Breadcrumb Checkout
   ========================= */
#desktop-breadcrumb #checkout-sidebar {
    max-height: 0px;
    transition: max-height 0.5s ease;
}
#desktop-breadcrumb #checkout-sidebar * {
    opacity: 0;
    transition: all 0.5s ease;
}
#desktop-breadcrumb #checkout-sidebar.expanded {
    max-height: 1400px;
}
#desktop-breadcrumb #checkout-sidebar.expanded * {
    opacity: 1;
}
#checkout-sidebar-previous-order-details {
    z-index: -10;
    opacity: 0;
    transform: translateX(0%);
    transition: transform 0.5s ease, opacity 0.5s ease, z-index 0.0s ease;
}
#checkout-sidebar-previous-order-details.expanded {
    z-index: 10;
    opacity: 1;
    transform: translateX(-100%);
}

/* =========================
   Animations & Highlights
   ========================= */
.fade-in-highlight {
    animation: fadeInHighlight 1s ease forwards;
}
@keyframes fadeInHighlight {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* =========================
   Shopping List
   ========================= */
.shopping-list-item .shopping-list-options {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.shopping-list-item:hover .shopping-list-options {
    opacity: 1;
    pointer-events: all;
}

/* =========================
   Payment Method
   ========================= */
.default-payment-method-label {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.default-payment-method-label.default-payment-method {
    opacity: 1;
}

/* =========================
   Shipping Address
   ========================= */
.default-shipping-address-label {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.default-shipping-address-label.default-shipping-address {
    opacity: 1;
}

/* =========================
   Saved Address Card
   ========================= */
.saved-address-card {
    outline: 1px solid #EAEAEA;
}
.saved-address-card .selected-label {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.saved-address-card.selected .selected-label {
    opacity: 1;
}
.shopper-details-container {
    transition: row-gap 0.5s ease;
}
.new-address-fields-container {
    max-height: 0px;
    transition: max-height 0.5s ease;
}
.new-address-fields-container.expanded {
    max-height: 360px;
}

.shipping-option .selected-label {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.shipping-option.selected .selected-label {
    opacity: 1;
}

/* =========================
   Substitution Option
   ========================= */
.substitution-option {
    background-color: #FFFFFF;
    color: #000000;
    transition: background 0.5s ease, color 0.5s ease;
}
.substitution-option > img {
    filter: brightness(1) saturate(1);
}
.substitution-option.selected {
    background-color: #AE252A;
    color: #FFFFFF;
}
.substitution-option.selected > img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* =========================
   Media Queries
   ========================= */
@media screen and (max-width: 769px) {
    #desktop-sidebar-menu {
        display: none;
    }
    .search-results {
        max-height: unset !important;
        pointer-events: none;
    }
    .search-results.expanded {
        pointer-events: all;
    }
}