/*
Theme Name: Healthy Groceries
Author: Healthy Groceries
Author URI: Healthy Groceries
Description: Healthy Groceries
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* ========================================
   STYLES
=========================================== 

1. Global Styles
2. Cards Styles
3. Header Styles
4. Footer Styles
5. Home Styles
6. Shop Styles
7. Single Styles
8. Page Styles
9. Woocommerce Styles
10. Compare Styles
11. Other Styles

*/


/* ========================================
   1. Global Styles
======================================== */
:root {
    --myBlack: #0A082B;
    --myGray: #7A7A91;
    --myBlue: #3F3882;
    --myLightBlue: #dfe6ef;
}
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--myBlack);
}

h1, h2, h3, h4, h5, h6 {
    font-style: normal;
    font-optical-sizing: auto;
}

a {
    color: #007bff;
    text-decoration: none;
}

ul, li {
    list-style: none;
}

.row, .cell {
    display: flex;
    align-items: center;
    flex: 1;
}

.column {
    width: 100%;
}


/* Main Wrapper */

main {
    width: 90%;
    padding: 7px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
main .inside {
    width: 100%;
    border-radius: 3px;
    float: left;
}

main .inside .left,
main .inside .right {
    width: 50%;
    float: left;
}
main section {
    display: flex;
}

main h1 {
    font-size: 33px;
    font-weight: 300;
    padding: 14px 0 21px;
    text-align: center;
    width: 100%;
}

main path {
    float: left;
    width: 100%;
    text-align: center;
    padding-bottom: 7px;
    color: var(--grayOne);
}

main path span.active {
    color: var(--myBlack);
}

main.home section {
    padding: 11px;
    display: block;
}
/* CUSTOM LABELS & CHECKBOXES */

label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
}

/* Remove default checkbox styling */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid #555;
    border-radius: 3px;
    display: grid;
    place-content: center;
    cursor: pointer;
}

/* Checkmark */
input[type="checkbox"]::before {
    content: "";
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

/* Checked state */
input[type="checkbox"]:checked {
    background-color: #007bff;
    border-color: #007bff;
}

input[type="checkbox"]:checked::before {
    opacity: 1;
}

/* Accessibility wrapper (optional) */
input[type="checkbox"] .wc-select-wrapper {
    position: relative;
    display: inline-block;
    padding: 0.6rem 2.5rem 0.6rem 0.75rem;
    border: 1px solid #000;
    border-radius: 8px;
    background: #fff;
}
/* WC SELECT / DROPDOWN STYLING                                         */

.wc-select-wrapper select.orderby {
    all: unset;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid #666;
    border-bottom: 1.5px solid #666;
    padding: 14px;
    border-radius: 4px;
    color: #666;
    background-image: url('images/arrowselect.svg');
    background-repeat: no-repeat;
    background-position-x: calc(100% - 14px);
    background-position-y: 50%;
    background-size: 14px;
}

/* ========================================
   2. Cards Styles
======================================== */

.products-wrapper .products {
    text-align: center;
}
.products-wrapper .product {
    display: inline-block;
    padding: 21px;
    width: 270px;
    margin: 7px 0;
    text-align: center;
    position: relative;
}

.products-wrapper .product .add_to_cart_button {
    border: none;
    text-transform: lowercase;
    font-size: 14px;
    color: var(--myBlack);
    font-weight: 400;
    display: inline-block;
}
.products-wrapper .product span {
    display: inline-block;
    float: left;
}
.products-wrapper .product span.price {
    color: #0A082B;
    font-size: 28px;
}
.products-wrapper .product span.currency {
    font-size: 14px;
    text-transform: uppercase;
    padding: 14px 0 0 4px;
    float: right;
}
.products-wrapper .product span.onsale {
    position: absolute;
    right: 7px;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background: #C4234A;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 400;
    padding: 0;
}
.products-wrapper .product img {
    object-fit: contain;
    width: 92%;
    height: 92%;
    border-radius: 4px;
}

.products-wrapper .product h2 a{
    font-size: 21px;
    font-weight: 400;
    color: var(--myBlack);
    line-height: 28px;
    text-transform: lowercase;
    margin: 7px 0;
    padding: 0;
}

.products-wrapper .product a {
    display: block;
    font-size: 14px;
    text-transform: lowercase;
    color: #3e963e;
}
.products-wrapper .product a.compare-button {
    color: #4A4E59;
    font-size: 14px;
    text-transform: lowercase;
}
.products-wrapper .product a.compare-button img {
    width: 21px;
    position: relative;
    top: -1px;
    right: -17px;
}
.products-wrapper .product-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 87%;
    margin: 0 auto;
}



@media screen and (max-width: 930px) {
    .products-wrapper .product {
         width: 49%;
         padding: 7px;
         margin: 0;
    }
    .products-wrapper .product span.onsale {
        right: 0px;
        top: 21px;
    }
}


.woocommerce .products-wrapper ul,
.woocommerce ul.products-wrapper {
    margin: 0;
}
.woocommerce-Price-amount bdi {
    font-size: 21px;
    font-weight: 300;
    padding: 14px 0;
    color: #0A082B;
    display: block;
}
.woocommerce .quantity .qty {
    width: 25%;
    padding: 7px;
    font-size: 17px;
    color: #777;
}
.cart_totals h2 {
    font-weight: 400;
    font-size: 21px;
}
.cart_totals th {
    font-weight: 400 !important;
}
.cart_totals .checkout-button {
    font-size: 17px !important;
    border: solid 1.5px #007bff !important;
    border-radius: 3px !important;
    padding: 21px 14px !important;
    display: inline-block !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    background: none !important;
    color: var(--myBlack) !important;
}
.cart_totals .woocommerce-Price-amount bdi {
    text-align: right;
}
.shop_table button {
    font-size: 17px !important;
    border: solid 1.5px #007bff !important;
    border-radius: 3px !important;
    padding: 17px 14px !important;
    display: inline-block !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    background: none !important;
    color: var(--myBlack) !important;
}
.woocommerce a.added_to_cart {
    color: var(--myGray);
    text-transform: lowercase;
    font-size: 17px;
}

.woocommerce-pagination li {
    display: inline-block;
}
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    border-top: none;
}
/* PLUS BUTTONS (WC / ADD-BUTTONS)                                      */

/* Base plus button */
.wc-plus-btn,
.add-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.25s ease;
}

/* WC Plus Icon */
.wc-plus-btn .icon {
    position: relative;
    width: 14px;
    height: 14px;
}

.wc-plus-btn .icon::before,
.wc-plus-btn .icon::after {
    content: "";
    position: absolute;
    background: #333;
    transition: transform 0.35s ease, opacity 0.2s ease, background 0.3s;
}

/* Horizontal line */
.wc-plus-btn .icon::before {
    width: 14px;
    height: 2px;
    top: 6px;
    left: 0;
}

/* Vertical line */
.wc-plus-btn .icon::after {
    width: 2px;
    height: 14px;
    left: 6px;
    top: 0;
}

/* ✅ Added State (Morph to check) */
.wc-plus-btn.added {
    background: #3cb371;
}

.wc-plus-btn.added .icon::before {
    transform: rotate(-45deg) translate(-1px, 3px);
    width: 8px;
    background: #fff;
}

.wc-plus-btn.added .icon::after {
    transform: rotate(45deg) translate(2px, -4px);
    height: 12px;
    background: #fff;
}

/* Generic Add Button */
.add-btn {
    background: #3F3882;
}

.add-btn::before,
.add-btn::after {
    content: '';
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.25s ease;
}

.add-btn.is-loading::before,
.add-btn.is-loading::after {
    display: none;
}
/* Horizontal line */
.add-btn::before {
    width: 14px;
    height: 2px;
}

/* Vertical line */
.add-btn::after {
    width: 2px;
    height: 14px;
}

/* Added / Check State */
.add-btn.is-added {
    background: #78AA0C;
}

.add-btn.is-added::before {
    width: 7px;
    height: 2px;
    transform: translate(-80%, 0%) rotate(45deg) translate(1px, 2px);
}

.add-btn.is-added::after {
    width: 11px;
    height: 2px;
    transform: translate(-45%, -40%) rotate(-45deg) translate(1px, 2px);
}
/************************************************************************/
/* _ADDED_TO_CART ICON FIX */
/************************************************************************/

.added_to_cart.wc-forward {
    font-size: 0 !important;
    line-height: 0;
}

.added_to_cart.wc-forward * {
    font-size: initial;
    line-height: normal;
}

.wc-check-replacement {
    background: #4CAF50;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: relative;
}

.wc-check-replacement::after {
    content: '';
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 6px;
    left: 11px;
}


/* TEMP ADDED TO CART NOTIFICATION */

.temp-added-msg {
    font-size: 42px;
    font-weight: 600;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    background: #E6EBED;
    color: #3F3882;
    padding: 11px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
}

.temp-added-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 1px;
}

.temp-added-text {
    font-size: 19px;
    font-weight: 300;
    padding: 15px;
}

/* LOADING DOTS                                                          */

.loading-dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 12px;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-dots span {
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1s infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}
/* ========================================
   3. Header Styles
======================================== */
header {
    padding: 14px 14px 0;
}

header .row {
    padding: 14px 21px;
    border-radius: 7px;
    background-color: var(--myLightBlue);
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    border-bottom: 2px solid #a9b3bf;
}

header .search {
    justify-content: center;
    text-align: center;
    width: 50%;
}

header .cart, header .user {
    justify-content: right;
    color: var(--myGray);
}

header .user img {
    width: 21px;
    padding-right: 7px;
}

header .cell img {
    height: 33px;
}

header .cell.logo {
    text-align: left;
    position: relative;
    bottom: -3px;
    left: 7px;
}

header .search input {
    border: none;
    padding: 11px 17px;
    font-size: 16px;
    outline: none;
    background: #FFF url(images/search.svg) no-repeat right 17px center;
    background-size: 19px;
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    border-bottom: 1px solid #a9b3bf;
}

header .search form {
    width: 100%;
}

header .cart {
    text-align: right;
    position: relative;
}

header .cart span.cart-count,
header .cart span.compare-count {
    background-color: #3e963e;
    border-radius: 50%;
    color: #fff;
    padding: 5px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    aspect-ratio: 1/1;
    position: relative;
    top: -40px;
    right: -17px;
}

header .cart img {
    height: 28px;
    width: 28px;
}

header .cart .in {
    padding: 7px;
    display: inline-block;
    border-radius: 50%;
    height: 42px;
    width: 42px;
    margin-left: 11px;
}

header .row:nth-child(2) {
    background-color: transparent;
    border-bottom: none;
    justify-content: center;
    letter-spacing: 2px;
    text-align: center;
}

header .row:nth-child(2) li {
    display: inline-block;
    padding: 7px 21px;
    font-weight: 500;
    font-size: 14px;
}

header .row:nth-child(2) li a {
    display: inline-block;
    padding-bottom: 5px;
    font-weight: 500;
    border-bottom: 5px solid #CCC;
    color: var(--myBlack);
}

/* Specific link colors */
header .row:nth-child(2) li:nth-child(1) a { border-bottom-color: #BDE7CF; }
header .row:nth-child(2) li:nth-child(2) a { border-bottom-color: #E5E1BD; }
header .row:nth-child(2) li:nth-child(3) a { border-bottom-color: #E2BCC7; }
header .row:nth-child(2) li:nth-child(4) a { border-bottom-color: #BEBCDD; }


/* _BURGER_MENU */

.burger {
    width: 15px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 2.5px;
    z-index: 2000;
    margin: 11px;
    position: relative;
    top: -7px;
}

.burger span {
    height: 2px;
    width: 100%;
    background: #000;
    border-radius: 0;
    transition: 0.3s;
}

.burger.active span:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: translateY(-4.5px) rotate(-45deg);
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.97);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 1050;
}

.menu.active {
    transform: translateY(0);
    background-color: var(--myLightBlue);
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.menu li {
    margin: 10px 0;
}

.menu li a {
    font-size: 2rem;
    text-decoration: none;
    color: #000;
    transition: color 0.2s;
}

.menu li a:hover {
    color: #ff6600;
}

.menu-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2rem;
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
}




/*  HEADER MEDIA QUERIES */
@media (max-width: 900px) {
    header .row:nth-child(1) .search {
        flex: 2;
    }
}

@media (max-width: 700px) {
    header {
        padding: 0;
    }
    header .row {
    padding: 9px 14px 11px;
}

    header .row {
        border-radius: 0;
        border-bottom: none;
    }

    header .row:nth-child(2) {
        padding: 0;
        background-color: #F4F7F9;
    }

    header .row:nth-child(2) li {
        padding: 11px 5px 0;
    }

    header .row:nth-child(1) {
        flex-wrap: wrap;
    }
    header .row:nth-child(2) li:nth-child(3) { display: none;}
    header .row:nth-child(2) li:nth-child(4) { display: none;}
    header .row:nth-child(1) .search {
        order: 3;
        flex: 0 0 100%;
        padding-top: 7px;
    }

   
}

/* ========================================
   4. Footer Styles
======================================== */
footer {
    overflow: auto;
    padding: 42px 0;
    width: 100%;
    text-align: center;
}

footer .inside {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: block;
    text-align: center;
}

footer ul {
    padding-bottom: 14px;
}

footer li {
    display: inline-block;
    padding: 7px;
}

footer p, footer a {
    color: var(--myGray);
    padding: 7px 0;
}

footer a:hover {
    color: var(--myBlack);
}

/* ========================================
   5. Home Styles
======================================== */

/* 5.1 Leaderboard Styles */

.home .leaderboard {
    width: 100%;
    display: flex;
}

.home .leaderboard .left {
    width: 55%;
}

.home .leaderboard .right {
    width: 45%;
    display: flex;
}

.home .leaderboard .inside {
    width: 56%;
    margin: 0 auto;
    display: flex;
    place-items: center;
}

.home .leaderboard .left img {
    width: 170px;
}

.home .leaderboard h1 {
    font-size: 42px;
    line-height: 52px;
    text-align: left;
    margin: 0;
    padding: 0;
    color: #0A082B;
    width: 70%;
}

.home .leaderboard h4 {
    font-size: 28px;
    font-weight: 300;
    padding: 19px 0;
    line-height: 42px;
}

.home .leaderboard .left a {
margin: 21px 0 0;
display: inline-block;
color: #FFF;
/* letter-spacing: -0.5px; */
font-size: 20px;
font-weight: 300;
padding: 11px 17px 13px 21px;
border-radius: 25px;
background-color: #3F3882;
}

.home .leaderboard .right img {
    width: 100%;
}

/* 5.2 Fruits Banner Styles */

.home .fruit-banner {
    position: relative;
}

.home .fruit-banner .button {
    border: none;
}

.home .fruit-banner .add-btn {
    position: absolute;
}
/*
.add-btn {
    background: #3F3882;
    color: #fff;
    font-size: 23px;
    font-weight: 400;
    width: 30px;
    height: 30px;
    padding-bottom: 3px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
*/
.home .fruit-banner .price {
    color: #3F3882;
    position: relative;
        font-size: 23px;

}

.home .fruit-banner .price .currency {
    font-size: 15px;
    padding-left: 3px;
}

/* 5.3 Fruit positions */
.home .fruit-banner .apple { top: 20%; left: 57%; }
.home .fruit-banner .apple .price { top: -31px; left: -2px; }

.home .fruit-banner .banana { top: 19%; left: 23%; }
.home .fruit-banner .banana .price { top: 25; right: 51px; }

.home .fruit-banner .lettuce { top: 35%; left: 85%; }
.home .fruit-banner .lettuce .price { top: -27px; left: 27px; }

.home .fruit-banner .parsley { top: 52%; left: 15%; }
.home .fruit-banner .parsley .price { top: 31px; left: -27px; }

.home .fruit-banner .avocado { top: 63%; left: 73%; }
.home .fruit-banner .avocado .price { top: 27px; left: 44px; }


/*  CATEGORIES  */
.home .column.cat {
    width: 100%;
}

.home .column.cat li span {
    display: inline-block;
}

.home .column.cat li img {
    height: 40px;
    padding-left: 11px;
}

/* Category image height adjustments */
.home .column.cat li:nth-child(2) img { height: 34px; }
.home .column.cat li:nth-child(3) img { height: 33px; }
.home .column.cat li:nth-child(4) img { height: 35px; }
.home .column.cat li:nth-child(5) img { height: 35px; }

.home .column.cat ul {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.home .column.cat ul li {
    color: #3F3882;
    background-color: #E6EBED;
    margin: 5px;
    padding: 15px 21px;
    border-radius: 4px;
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    letter-spacing: -0.5px;
    font-weight: 500;
}


.card-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  padding: 0;
  margin: 0;
  list-style: none;

  -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.carousel::-webkit-scrollbar {
  display: none;              /* Chrome/Safari */
}
.card-carousel li {
  flex: 0 0 80%;
  scroll-snap-align: start;

  background: #eee;
  padding: 1rem;
  border-radius: 12px;
}

/* Desktop */
@media (min-width: 1420px) {
  .card-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    flex-wrap: nowrap !important;
  }


  .card-carousel li {
    flex: unset;
  }
}


.home .column.categories {
    width: 100%;
}

.home .column.categories .inside {
    height: 240px;
    display: flex;
}

.home .column.categories h4 {
    text-align: center;
    font-size: 28px;
    font-weight: 300;
    padding: 28px 0;
}

.home .column.categories section right {
    background-size: cover;
    background-repeat: no-repeat;
}

.home .column.categories section h2 {
    font-size: 21px;
    font-weight: 300;
    line-height: 42px;
    margin-top: auto;
    color: #FFF;
}

.home .column.categories section h3 {
    font-size: 42px;
    font-weight: 400;
    line-height: 35px;
    color: #FFF;
    opacity: 0.21;
}

.home .column.categories .inside .left {
    padding: 28px 14px 28px 32px;
    display: flex;
    flex-direction: column;
    border-radius: 4px 0 0 4px;
}

.home .column.categories .inside .right {
    float: right;
    border-radius: 0 4px 4px 0;
}

.home .column.categories .inside .right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*  NEW ARRIVALS */
.home .column {
    text-align: center;
    margin: 42px 0;
}

.home .column h3 {
    font-weight: 400;
letter-spacing: 5px;
font-size: 21px;
}

.home .column h3 a {
font-weight: 400;
font-size: 14px;
color: #3F3882;
background-color: #BDE7CF;
padding: 2px 5px 3px 7px;
text-transform: lowercase;
letter-spacing: 1px;
cursor: pointer;
}
.home .column h3 a:hover {
background-color: #BDE5D9;
}

.home .column h4 {
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 24px;
    padding: 28px 0 14px;
}

/*  RESPONSIVE - LEADERBOARD & CATEGORIES  */
@media (max-width: 1700px) {
    .home .leaderboard .inside { width: 70%; }
}

@media (max-width: 1366px) {
    .home .leaderboard .inside { width: 80%; }
}

@media (max-width: 1110px) {
    .home .leaderboard .inside { width: 90%; }
}

@media (max-width: 1000px) {

    .home .column {
    margin: 14px 0;
}
    .home .leaderboard .inside { flex-wrap: wrap; width: 100%; }
    .home .leaderboard .left, 
    .home .leaderboard .right {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .home .leaderboard h1 { width: 100%; text-align: center; }
}

@media (max-width: 700px) {
    .home .leaderboard h1 { font-size: 38px; padding: 21px 0 0; }
     .home .leaderboard .left a {margin: 14px 0 0;}
     .home .column h3 {
    font-size: 25px;
    letter-spacing: 2px;
}
}

@media (max-width: 600px) {
    .home .leaderboard h1 { font-size: 28px; padding: 7px 0 11px; line-height: 35px; width: 85%; }
    .home .leaderboard h4 { font-size: 21px; padding: 0; line-height: 33px; }
    .home .column.cat ul { align-items: center; gap:3px }
    .home .column.cat ul li{ padding: 7px 11px; }
   
}

/* ========================================
   PLANT PRODUCTS
======================================== */

/* Generic styles */
.home .plant-butters .product h2,
.home .plant-milk .product h2,
.home .spreads .product h2 {
    margin: 0;
}

.home .plant-butters h3,
.home .plant-milk h3,
.home .spreads h3 {
    margin: 0 0 42px 0;
}

.home .plant-butters .products-wrapper,
.home .plant-milk .products-wrapper,
.home .spreads .products-wrapper {
    width: 70%;
    margin: 0 auto;
    position: relative;
}

/* Specific heights */
.home .plant-butters .products-wrapper { height: 800px; }
.home .plant-milk .products-wrapper { height: 900px; }
.home .spreads .products-wrapper { height: 700px; }

/* Positioning items */
.home .plant-butters li,
.home .plant-milk li,
.home .spreads li {
    position: absolute;
}

/* Hide prices for spreads */
.home .spreads li .price { display: none; }

/* Product actions */
.home .plant-butters .product-actions,
.home .plant-milk .product-actions,
.home .spreads .product-actions {}

/* PLANT-BUTTERS ITEMS */
.home .plant-butters li:nth-child(1) { width: 370px; left: 0; top: 28%; }
.home .plant-butters li:nth-child(2) { width: 280px; left: 30%; }
.home .plant-butters li:nth-child(3) { width: 300px; left: 52%; top: 3%; z-index: 2; }
.home .plant-butters li:nth-child(4) { width: 290px; left: 80%; top: 10%; z-index: 2; }
.home .plant-butters li:nth-child(5) { width: 300px; left: 30%; top: 50%; }
.home .plant-butters li:nth-child(6) { width: 250px; left: 50%; top: 60%; }
.home .plant-butters li:nth-child(7) { width: 340px; left: 65%; top: 40%; z-index: 1; }

/* PLANT-MILK ITEMS */
.home .plant-milk li:nth-child(1) { width: 400px; left: 0; top: 28%; }
.home .plant-milk li:nth-child(2) { width: 410px; left: 40%; top: 3%; }
.home .plant-milk li:nth-child(3) { width: 340px; left: 64%; top: 2%; z-index: 2; }
.home .plant-milk li:nth-child(4) { width: 440px; left: 80%; top: 30%; z-index: 2; }
.home .plant-milk li:nth-child(5) { width: 450px; left: 20%; top: 37%; }

/* SPREADS ITEMS */
.home .spreads li:nth-child(1) { width: 310px; left: 0; top: 25%; }
.home .spreads li:nth-child(2) { width: 330px; left: 35%; top: 0%; }
.home .spreads li:nth-child(3) { width: 310px; left: 64%; top: 2%; z-index: 2; }
.home .spreads li:nth-child(4) { width: 310px; left: 80%; top: 40%; z-index: 2; }
.home .spreads li:nth-child(5) { width: 355px; left: 41%; top: 51%; }



/* ========================================
   8. Page Styles
======================================== */
/*
.page {
    width: 90%;
    display: flex;
    overflow: auto;
}

.page h1 {
    font-size: 35px;
    padding: 14px 0 28px;
}

.page section {
    box-sizing: border-box;
}

.page .inside {
    background: transparent;
    height: auto;
    text-align: center;
}



.page aside {
    width: 20%;
    text-align: left;
    padding: 0 21px;
}

.page aside h4 {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--myBlack);
}

.page aside img.bu {
    width: 20px;
    display: none;
    cursor: pointer;
}

.page aside span {
    font-size: 35px;
    background-color: var(--lightGreen);
}
.menu.active
.page aside p {
    font-size: 14px;
    color: var(--grayOne);
    padding: 7px 0;
}

.page aside ul li {
    padding: 7px 0;
}
*/
main.page  {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 35px;
    color: var(--myBlack);
    font-weight: 300;
}
main.page  div:first-child{
    width: 100%;

}

main.page h1 {
    font-size: 35px;
    padding: 49px 0 21px 0;
}

main.page h2 {
    font-size: 28px;
    font-weight: 400;
    padding: 28px 0 14px 0;
}

main.page h3 {
    font-size: 21px;
    font-weight: 400;
    padding: 28px 0 14px 0;
}
main.page h4 {
    
}

main.page h4 {
    padding: 14px 0 7px 21px;
    font-size: 28px;
    font-weight: 300;
    padding: 28px 0 14px 0;
    color: #8583AA;
}

main.page strong {
    font-weight: 500;
}

main.page ul li {
    font-weight: 300;
background-color: #BDE7CF;
display: inline-block;
/* float: left; */
width: fit-content;
margin: 5px 3px;
padding: 0 14px;
}

main.page ul li::before {
    font-weight: bold;
    padding: 0 14px 0 0;
}
main.page .wp-block-list {
    padding: 0 0 21px 0;
}

main.page .wp-block-list li {
    padding: 0 0 0 21px;
    font-weight: 500;
}

@media screen and (max-width: 620px) {
    main.page h1 {
        font-size: 35px;
        padding: 0px;
    }
}



/* Responsive sidebar */
/*
@media screen and (max-width: 1400px) {

    .page aside {
        width: 100%;
        text-align: center;
    }

    .page aside ul {
        display: none;
    }

    .page aside ul li {
        border-bottom: solid 0.5px #CCC;
        padding: 14px 0;
    }

    .page aside ul li:first-child {
        border-top: solid 0.5px #CCC;
        padding: 14px 0;
    }

    .page aside img.bu {
        display: inline-block;
        float: none;
    }
}
    
@media screen and (max-width: 940px) {

    main.page {
        width: 90%;
    }

}*/

/* ========================================
   PRODUCTS GRID
======================================== 
.products-wrapper {
    text-align: center;
    overflow: hidden;
    width: 100%;
}

.products-wrapper wrap {
    border: solid 1px var(--myGray);
    text-align: center;
    box-sizing: border-box;
    float: left;
    padding: 2px;
}

.product {
    display: inline-block;
    width: 240px;
    padding: 7px;
}

.product thumb {
    width: 100%;
    display: block;
    text-align: center;
    height: 300px;
    padding: 14px;
}

.product .product-image {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.product h3 {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    padding-top: 14px;
    margin: 0;
}

.product h6 {
    font-size: 14px;
    font-weight: 500;
    padding: 7px 0;
}

.product p {
    font-size: 16px;
    font-weight: 400;
    padding: 14px 0;
    color: var(--green);
}
*/
/* Responsive products */
/* 
@media screen and (max-width: 1400px) {
    .products {
        width: 100%;
    }
}
*/

/* ========================================
   7. Single Styles
======================================== */

.single {
    width: 100%;
    display: block;
    overflow: visible; /* necessary to make sticky work */
}

.single .leader {
    width: 940px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.single .leader .inside {
    display: flex;
    place-items: center;
    flex-wrap: wrap;
    text-align: left;
}

.single .leader .left h1 {
    font-size: 42px;
    letter-spacing: 0.5px;
    width: 80%;
    text-align: left;
}

.single .leader .left p {
    font-size: 19px;
    line-height: 31px;
    width: 90%;
}

.single .leader .price {
    font-size: 42px;
    font-weight: 500;
    float: left;
    padding: 21px 0;
    width: 50%;
}

.single .leader .weight {
    font-size: 35px;
    font-weight: 400;
    float: left;
    padding: 27px 0;
    width: 50%;
}

.single .leader .weight span {
    font-size: 21px;
    font-weight: 300;
    text-transform: uppercase;
    padding: 21px 0;
}

.single .leader .currency {
    font-size: 21px;
    font-weight: 300;
    padding-left: 7px;
}

.single .leader .price b {
    font-size: 28px;
    font-weight: 300;
    padding: 0 4px 4px 0;
}

.single .leader .weight {
    font-size: 28px;
    font-weight: 400;
    padding-left: 28px;
}

.single .leader .unit {
    font-size: 14px;
    font-weight: 400;
    padding-left: 4px;
    text-transform: uppercase;
}

.single .leader .mycart {
    margin: 7px 0 0;
    display: inline-block;
    width: 100%;
}

.single .leader .compare a {
    color: var(--myBlack);
    display: block;
    padding: 14px 0;
}

.single .leader .compare a img {
    display: inline-block;
    width: 18px;
    position: relative;
    top: 5px;
}

.single .mycart .add_to_cart_button {
    font-size: 17px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    padding: 11px 11px 13px 18px;
    cursor: pointer;
    background-color: #3F3882;
    font-weight: 400;
    color: #FFF;
    text-transform: lowercase;
}
.single .related {
    padding: 28px 21px;
    display: flex;
}
.single .related .products-wrapper{
    width: 100%;
    text-align: center;
}
.single .related h2 {
    font-weight: 400;
    padding: 21px 0 7px 0;
}

.single .leader .right {
    padding: 7px;
}

.single .leader .right img {
    object-fit: contain;
    max-height: 420px;
    border-radius: 4px;
    width: 100%;
}

/* Responsive leader */
@media screen and (max-width: 1400px) {
    .single .leader { width: 80%; }
}

@media screen and (max-width: 940px) {
    .single .leader {
        width: 100%;
        padding: 0;
    }
    .single .leader .price {
        width: 40%;
        font-size: 35px;
        font-weight: 400;

    }
    .single .leader .currency {
        padding: 0;
    }
    .single .leader .weight {
        width: 20%; text-align: left;
        padding: 30px 7px;
    }
    .single .leader .mycart {
        width: 40%;
    }
    .single .leader .left,
    .single .leader .right {
        width: 100%;
        padding: 0 14px;
        text-align: center;
    }

    .single .leader .left h1 {
        font-size: 28px;
        font-weight: 400;
        width: 100%;
        text-align: center;
        padding:  0 0 11px;
    }

    .single .leader .left p {
        font-size: 21px;
        width: 100%;
        text-align: center;
    }

    .single .leader .right img {
        width: 75%;
    }

    .single .leader .left .mycart {
        margin: 15px 0;
        width: 40%;
    }
}

/*  TABS  */
.single .tabs {
    width: 100%;
    text-align: center;
    padding: 14px 0 21px;
}

.single .tabs ul {
    display: inline-flex;
    text-align: center;
}

.single .tabs li {
    display: inline-block;
    margin: 0 9px;
    flex: 1;
}

.single .tabs li img {
    width: 60px;
}

.single .tabs li span {
    display: block;
    padding: 7px 0;
    font-weight: 400;
    font-size: 13px;
}

/*  Info Section  */
.single .info {
    max-width: 1200px;
    width: 100%;
    display: flex;
    margin: 0 auto;
    text-align: left;
    padding: 21px;
}

.single .info .inside {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-wrap: wrap;
}

.single .info .column {
    padding: 0 28px;
    box-sizing: border-box;
    float: left;
}

.single .info .left {
    width: 56%;
    position: sticky;
    top: 20px;
    align-self: start;
}

.single .info .left p{
    font-size: 19px;
    font-weight: 300;
    line-height: 31px;
}

.single .info  h4 {
    font-size: 21px;
    font-weight: 400;
    padding: 35px 0 21px;
}
.single .info  h4:first-child {
    padding: 0 0 14px 0;
}
/*
.single .info .left ul {
    display: flex;
    flex-direction: column;
    padding: 7px;
    gap: 4px;
}
*/
.single .info .left ul li {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    background-color: #dfe6ef;
    margin: 2px 0;
    display: inline-block;
    padding: 2px 7px;
    width: fit-content;
}



.single .info .middle {
    width: 28%;
    display: block;
    float: right;
    text-align: left;
    position: sticky;
    top: 20px;
    align-self: start;
}

/*  Health Scores */


.score-item {
    margin-bottom: 20px;
}

.score-label {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    margin-bottom: 6px;
    color: #3F3882;
}

.score-bar {
    width: 100%;
    height: 14px;
    background: #E6F4EC;
    overflow: hidden;
}

.score-fill {
    height: 100%;
    width: 0;
    transition: width 1.2s ease-out;
}

/* Gradient bars */
.organ-bar { background: linear-gradient(90deg, #6360A5, #3F3882); }
.water-bar { background: linear-gradient(90deg, #BCCFE2, #BDD6E5); }
.gi-low { background: linear-gradient(90deg, #E5E1BD, #E2D4BC); }
.gi-medium { background: linear-gradient(90deg, #E5E1BD, #E2D4BC); }
.gi-high { background: linear-gradient(90deg, #E5E1BD, #E2D4BC); }

/* Score Colors */
.score-red { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.score-orange { background: linear-gradient(90deg, #f39c12, #e67e22); }
.score-blue { background: linear-gradient(90deg, #4FACFE, #007BFF); }
.score-green { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.score-emerald { background: linear-gradient(90deg, #1abc9c, #16a085); }

.fat-bar,.protein-bar,.carbs-bar { background: #E2BCC7; }



.single .info .middle .toggle-group {
    font-weight: 500;
    font-size: 17px;
    padding: 7px 0;
    cursor: pointer;
    float: left;
    width: 100%;
}

.single .info .middle ul {
    padding: 7px 0;
}

.single .info .middle li {
    display: inline-block;
    width: 100%;
    padding: 7px 0;
    float: left;
    border-bottom: var(--myBlack) solid 1px;
}

.single .info .middle li.calories {
    border-bottom: var(--myBlack) solid 2px;
}

.single .info .middle li:last-child {
    border-bottom: none;
}

.single .info .middle ul li span {
    width: 40%;
    float: left;
    text-align: left;
    font-weight: 400;
}

.single .info .middle ul li span:nth-child(2) {
    width: 60%;
    text-align: right;
}

.single .info .right {
    width: 16%;
}
.single .info .right .product-brand img{
    margin: 0 auto;
}

.single .info .right .brand-count{
    padding: 14px 0;
letter-spacing: 1px;
font-size: 14px;
color: #777;
text-align: center;
}

.single .info .right img {
    width: 100%;
    display: block;
}

.single .info .left img {
    width: 100%;
    padding: 21px 0;
}

.single .info .left .imgwrap {
    display: inline-flex;
    gap: 7px;
    flex-wrap: nowrap;
    max-width: 100%;
}

.single .info .left .imgwrap>* {
    min-width: 0;
    flex-shrink: 1;
}

.single .info .left .imgwrap img {
    width: 50%;
    display: block;
    float: left;
    padding: 1px 0;
}

.single .info .right h5 {
    font-size: 17px;
    font-weight: 400;
    padding: 21px 0 7px;
}



.single .info .middle,
.single .info .left,
.single .info .right {
    position: unset;
}
/* Responsive info columns */
@media screen and (max-width: 940px) {
    .single .info .column {
        flex: 100%;
        padding: 14px 0;
    }
    .single .info .right img {
    max-width: 110px;
    display: block;
}
}
/* ========================================
   GALLERY
======================================== 
.single .gallery full {
    width: 100%;
    max-width: 700px;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.single .gallery full img {
    width: 100%;
}
*/
/* ========================================
   SINGLE SIMILAR PRODUCTS
======================================== */
/*
.single .products-wrapper {
    max-width: 1700px;
    width: 100%;
    margin: 0 auto;
}
*/

/* ========================================
   . 404 Page
======================================== */
.single.a404 p {
text-align: center;
width: 100%;
font-size: 21px;
font-weight: 300;
}

/* ========================================
   9. Woocommerce Styles
======================================== */


@media (max-width: 768px) {
    .woocommerce table.shop_table,
    .woocommerce table.shop_table tbody,
    .woocommerce table.shop_table tr,
    .woocommerce table.shop_table td {
        display: block;
        width: 100%;
    }
    .woocommerce table.shop_table thead {
        display: none;
    }
    .woocommerce table.shop_table tr.cart_item {
        display: flex;
        justify-content: flex-end;
        gap: 15px;
        padding: 16px;
        margin-bottom: 20px;
        place-items: center;
    }
    .woocommerce td.product-thumbnail {
        flex: 0 0 90px;
    }
    .woocommerce td.product-thumbnail img {
        width: 90px;
        height: auto !important;
        display: block;
    }
    .woocommerce td.product-name,
    .woocommerce td.product-price,
    .woocommerce td.product-quantity,
    .woocommerce td.product-subtotal,
    .woocommerce td.product-remove {
        padding: 0 !important;
        border: 0 !important;
    }
    .woocommerce tr.cart_item > td:not(.product-thumbnail) {
        display: block;
    }
    .woocommerce td::before {
        display: none !important;
    }
    .woocommerce td.product-name {
        font-weight: 600;
        margin-bottom: 6px;
    }
    .woocommerce td.product-price,
    .woocommerce td.product-quantity,
    .woocommerce td.product-subtotal {
        margin-bottom: 6px;
        font-size: 14px;
    }
    .woocommerce td.product-remove {
        margin-top: 8px;
    }
    .woocommerce table.shop_table .product-thumbnail {
        display: table-cell !important;
    }
    .woocommerce table.shop_table_responsive tr td,
    .woocommerce-page table.shop_table_responsive tr td {
        text-align: left !important;
    }
}



/* ========================================
   6. Shop Styles
======================================== */

.shop header {
    display: block;
}

.shop header h1 {
    font-size: 21px;
    font-weight: 400;
    color: var(--myBlack);
    padding: 7px 0 28px 0;
}

.shop .desc{
    color: #4A4E59;
    font-size: 17px;
    line-height: 28px;
    text-transform: none;
    width: 55%;
    text-align: center;
    margin: 0 auto;
    padding: 0 21px 21px;
}

.shop header h4 {
    font-size: 25px;
    font-weight: 400;
    color: var(--myBlack);
    text-transform: uppercase;
    letter-spacing: 7px;
    padding: 7px 0 28px 0;
    text-align: center;
}

.shop header h4 span {
    font-weight: 700;
}





/* Sidebar */
/* Hide toggle on desktop */
.shop .filter-toggle {
    display: none;
}
.custom-product-cats ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/*ADDED FOR STYLING CATEGORY CHILDS*/
.cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.cat-row:hover {
    background: #f5f5f5;
}

.cat-name {
    flex-grow: 1;
}

.count {
    font-size: 15px;
    color: #888;
    padding: 0 7px;
}

.toggle {
    width: 16px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

.toggle.empty {
    visibility: hidden;
}

/* indentation */
.level-0 .cat-row { padding-left: 0px; }
.level-1 .cat-row { padding-left: 10px; }
.level-2 .cat-row { padding-left: 25px; }
.level-3 .cat-row { padding-left: 40px; }

/* hide ALL nested lists by default */
.cat-item > ul {
    display: none;
}

/* show active path */
.cat-item.current-cat > ul,
.cat-item.current-cat-parent > ul {
    display: block;
}

/* active styles */
.current-cat > .cat-row {
    font-weight: 500;
    color: #1a73e8;
}

.current-cat-parent > .cat-row {
    font-weight: bold;
}

.shop aside {
    width: 20%;
    float: left;
    text-align: left;
    color: var(--myBlack);
    padding: 28px 0 80px 0;
    text-transform: lowercase;
    height: 100vh;
}

.shop aside .filter {
    position: sticky;
    bottom: 0;
}

.shop aside section {
    margin: 0 0 21px;
    float: left;
    width: 77%;
    display: block;
}

.shop aside .nutrition-facts input {
    padding: 7px;
    display: block;
}

.shop aside button.filter {
    margin: 35px 0;
    background: var(--myBlue);
    border: none;
    font-size: 17px;
    font-weight: 400;
    color: white;
    padding: 21px;
    width: 55%;
    bottom: 1%;
}
.shop aside .nutrition-facts span {
    width: 100%;
}
.shop aside h3 {
    font-size: 14px;
    font-weight: 300;
    padding: 14px 0;
    float: left;
    width: 100%;
}

.shop aside li {
    font-size: 19px;
    font-weight: 350;
    padding: 5px 0;
}

.shop aside li a {
    color: #4A4E59;
}

.shop aside label {
    float: left;
    width: 100%;
    padding: 4px 0;
    font-size: 19px;
    font-weight: 350;
}

.shop aside span {
    display: inline-block;
}




.shop .products-wrapper {
    width: 80%;
    float: left;
}


    .woocommerce-ordering {
        text-align: center;
    }
/* Mobile Styles */
@media (max-width: 1800px) {
    .shop .filter-toggle {
        display: block;
        width: 35%;
        float: left;
        padding: 1px;
        background: white;
        color: var(--myBlue);
        border: none;
        font-size: 42px;
        cursor: pointer;
        text-align: left;
        border-radius: 5px;
    }

    aside {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100%;
        background: #fff;
        overflow-y: auto;
        z-index: 9999;
        padding: 20px;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    aside.active {
        left: 0;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
        display: none;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .woocommerce-ordering {
        float: right;
    }

    .shop aside {
        width: 50%;
        padding: 42px 21px;
    }

    .shop .products-wrapper {
        width: 100%;
    }

}
@media (max-width: 740px) {

    .woocommerce-ordering {
        width: 65% !important;
        float: right;
    }

    .wc-select-wrapper select.orderby {
        width: 70%;
        float: right;
    }

     .shop header h1 {
        padding: 7px 0 11px 0;
    }
}

nav.woocommerce-breadcrumb {
    font-size: 14px;
    color: var(--myGray);
    padding: 7px;
    letter-spacing: 1px;
    text-transform: lowercase;
    width: 100%;
    text-align: center;
}
nav.woocommerce-breadcrumb a {
    color: var(--myBlack);
}

/* ========================================
   8.1. Sale Page
======================================== */
.shop.sale .products-wrapper {
    width: 100%;
}
.shop.sale .sale-products {
    text-align: center;
}


/* ========================================
   9. Brand Page
======================================== */


.shop.brand .logo{
    text-align: center;
}
.shop.brand .logo img{
    width: 140px;
}
.shop.brand .description {

    width: 100%;
    text-align: center;
    font-size: 17px;
} 
.shop.brand .description p{
width: 35%;
margin: 0 auto;
line-height: 28px;
color: #555;

} 

.shop.brand .products-wrapper {
    width: 80%;
    margin: 0 auto;
    float: inherit;
}

/* ========================================
   9. Woocommerce Styles
======================================== */

.woocommerce {
    width: 100%;
    margin: 0 auto;
}

.woocommerce table.shop_table {
    border: none;
}

.woocommerce table.shop_table th,
.woocommerce table.cart th {
    font-weight: 400;
    font-size: 17px;
    padding: 14px 0;
}

.woocommerce table.cart .product-name a {
    color: var(--myBlack);
    font-weight: 500;
}

.woocommerce table.cart .product-remove a {
    font-weight: 400;
}

.woocommerce table.cart img {
    height: 140px;
    width: auto;
}

.woocommerce table.shop_table td {
    padding: 9px 0;
    border-top: none;
}

.woocommerce table.cart thead th {
    font-weight: 500;
    background-color: #f4f4f4;
}

.woocommerce a.remove {
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    text-align: right;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: color 0.2s ease;
}

.woocommerce a.remove:hover {
    background: transparent !important;
    color: #cc0000 !important;
}

.search button {
    display: none;
}

.search input {
    width: 50%;
}

.woocommerce form .form-row {
    position: relative;
    margin-bottom: 28px;
}

.woocommerce form fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce form .form-row label {
    position: absolute;
    top: 14px;
    left: 2px;
    font-size: 15px;
    color: #777;
    pointer-events: none;
    transition: all .25s ease;
    background: #fff;
    padding: 0 4px;
    z-index: 2;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 12px 2px 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #dcdcdc;
    font-size: 16px;
    border-radius: 0;
    color: #222;
    box-shadow: none !important;
    transition: border-color .25s ease;
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-bottom: 2px solid #111;
    outline: none !important;
}

/* Float label when focused or has value */
.woocommerce form .form-row:has(input:focus) label,
.woocommerce form .form-row:has(select:focus) label,
.woocommerce form .form-row:has(textarea:focus) label,
.woocommerce form .form-row:has(input[value]:not([value=""])) label,
.woocommerce form .form-row:has(select[value]:not([value=""])) label,
.woocommerce form .form-row:has(textarea[value]:not([value=""])) label {
    top: -10px;
    left: 0;
    font-size: 12px;
    color: #111;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    margin-bottom: 20px;
    font-weight: 600;
    color: #222;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 220px;
    float: left;
    padding: 10px 0;
}

.woocommerce-account .woocommerce-MyAccount-content {
    margin-left: 260px;
    padding: 10px 0;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 6px;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: #444;
    background: #f7f7f7;
    font-size: 15px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: #ececec;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background: #e6e6e6;
    font-weight: 600;
}

aside .woocommerce {
    width: 100%;
    float: left;
}


/* ========================================
   10. Compare Styles
======================================== */

.compare-wrapper {
    text-align: center;
}

.compare-wrapper h1 {
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    padding: 28px 0;
    margin: 7px 0;
}

.compare-wrapper .empty {
    padding: 49px 0;
    margin: 21px 0;
}

.compare-wrapper .empty h1 {
    font-size: 28px;
}

.compare-wrapper .check-yes {
    color: #93c693;
    font-weight: bold;
}

.compare-wrapper .check-no {
    color: #c094c4;
    font-weight: bold;
}

/* Sortable Table */
th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 18px;
}

.sort-arrow {
    font-size: 12px;
    opacity: 0.4;
    margin-left: 5px;
    transition: opacity 0.2s;
}

th.sortable:hover .sort-arrow {
    opacity: 0.8;
}

th.sortable.asc .sort-arrow {
    opacity: 1;
    content: "↑";
}

th.sortable.desc .sort-arrow {
    opacity: 1;
    content: "↓";
}

/* Compare Table */
.compare-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    color: #222;
}

.compare-table {
    width: 92%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
    margin: 0 auto;
}

.compare-table thead th {
    background: #f8f9fa;
    text-align: left;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 14px 16px;
}

.compare-table td {
    padding: 14px 16px;
    font-size: 0.93rem;
    text-align: center;
    vertical-align: middle;
}

.compare-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.compare-different {
    background-color: #fff7e6;
}

.compare-table img {
    max-width: 80px;
    height: auto;
    border-radius: 6px;
}

.compare-remove {
    background: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compare-remove:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.compare-row {
    display: flex;
}

.compare-col {
    flex: 1;
    text-align: center;
    padding: 12px;
    border: 1px solid #eee;
}

/* Responsive Compare Table */
@media (max-width: 768px) {
    .compare-table,
    .compare-table thead,
    .compare-table tbody,
    .compare-table th,
    .compare-table td,
    .compare-table tr {
        display: block;
    }

    .compare-table tr {
        margin-bottom: 20px;
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 10px;
    }

    .compare-table td {
        border: none;
        padding: 8px 0;
    }

    .compare-table thead {
        display: none;
    }
}



/* ========================================
   11. Other Styles
======================================== */
/*
.recipe-container {
    max-width: 800px;
    margin: auto;
    padding: 30px;
}

.recipe-ingredients li,
.recipe-steps li {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 6px;
    list-style: none;
    border: 1px solid #eee;
}

.recipe-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.recipe-card {
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
}

.recipe-card img {
    border-radius: 8px;
    margin-bottom: 10px;
}

.add-all-button {
    background: #27ae60;
    padding: 8px 14px;
    border-radius: 6px;
    color: #fff !important;
    display: inline-block;
    margin-top: 20px;
}

.recipe-video {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
}

.recipe-nutrition-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.recipe-nutrition-table th,
.recipe-nutrition-table td {
    padding: 10px;
    border: 1px solid #eee;
}

.recipe-nutrition-table th {
    background: #f7f7f7;
}

.home .column.recipes {
    width: 100%;
}

.home .column.recipes section {
    display: inline-block;
}

.home .column.recipes h3 {
    color: var(--myBlack);
    font-weight: 400;
    padding: 14px 0;
}

.home .column.recipes img {
    border-radius: 4px;
}

.single .info .column.right {
    position: sticky;
    top: 20px;
    align-self: start;
}

*/



/* _CUSTOM_PRODUCT_CATEGORIES */
/*
.custom-product-cats {
    float: left;
}

.custom-product-cats .current-cat > a {
    background-color: #dfe6ef;
    padding: 4px;
}

.custom-product-cats .current-cat-parent > a {
    color: #555;
}

.woocommerce form input::placeholder {
    color: #000;
}
*/


/************************************************************************/
/* _LATEST_BRANDS */
/************************************************************************/

.latest-brands {
    margin: 20px 0;
    padding: 20px;
    width: 100%;
}

.latest-brands h2 {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.latest-brands ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.latest-brands ul li {
    margin: 10px;
    padding: 10px;
    text-align: center;
    width: 150px;
    transition: transform 0.3s ease;
}

.latest-brands ul li:hover {
    transform: scale(1.05);
}

.latest-brands ul li img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.latest-brands ul li a {
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    margin-top: 5px;
}

.latest-brands ul li a:hover {
    color: #0073e6;
}





/* HIGHLIGHTED PRODUCT / NUTRITION VALUE                                */
/*
.highlighted-product {
    border: 2px solid #ffcc00;
    border-radius: 5px;
}

.nutrition-value {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #2c7a2c;
}

*/







/************************************************************************/
/* shipping-progress */
/************************************************************************/

/* =========================
   Wrapper (sticky bar)
========================= */
#shipping-progress-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    padding: 12px;
}

/* =========================
   Message
========================= */
.shipping-progress-message {
    text-align: center;
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 400;
}

.shipping-progress-message .amount {
    display: inline-block;
}

.shipping-progress-message .woocommerce-Price-amount bdi {
    font-size: 21px;
}

/* =========================
   Progress Bar
========================= */
.shipping-progress-bar {
    position: relative;
    width: 100%;
    height: 14px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: visible;
}

/* progress fill */
.shipping-progress-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    background: linear-gradient(90deg, #ffb347, #4caf50);
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* shimmer */
.shipping-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* =========================
   Milestones BASE
========================= */
.shipping-milestone {
    position: absolute;
    top: -22px;
    right: 11px;
    transform: translateX(-50%);
    font-size: 11px;
    color: #888;
    text-align: center;
    transition: all 0.3s ease;
}

/* second milestone tweak */
.shipping-milestone.two {
    top: -19px;
}

/* dot */
.shipping-milestone::before {
    content: "";
    width: 25px;
    height: 25px;
    background: #bbb;
    border-radius: 50%;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

/* =========================
   LABELS (FIXED UNIFIED SYSTEM)
========================= */

/* default label */
.shipping-milestone .milestone-label {
    color: #999;
    transition: all 0.3s ease;
}

.shipping-milestone .milestone-label bdi{
    position: relative;
    top: 28px;
}

/* WooCommerce price inside milestone */
.shipping-milestone .woocommerce-Price-amount,
.shipping-milestone .woocommerce-Price-amount bdi,
.shipping-milestone .woocommerce-Price-amount * {
    color: #999;
    transition: all 0.3s ease;
}

/* =========================
   ACTIVE STATE (SINGLE SOURCE OF TRUTH)
========================= */

/* active milestone */
.shipping-milestone.active {
    color: #4caf50;
    font-weight: 600;
    transform: translateX(-50%) scale(1.15);
}

/* active dot */
.shipping-milestone.active::before {
    background: #4caf50;
    /*box-shadow: 0 0 10px rgba(76,175,80,.8);*/
    border: solid 1.5px #FFFFFF;
}

/* active text (COVERS EVERYTHING) */
.shipping-milestone.active,
.shipping-milestone.active * {
    color: #4caf50 !important;
    font-weight: 400;
}

/* =========================
   Confetti layer
========================= */
#confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    pointer-events: none;
    z-index: 10; 
}





/* =========================
   PAGINATION
========================= */

/* Container */
nav.woocommerce-pagination {
  text-align: center;
  margin: 3rem 0;
}

/* Remove default list styling */
nav.woocommerce-pagination ul {
  border: none;
  display: inline-flex;
  gap: 3px;
  padding: 0;
}

nav.woocommerce-pagination ul li {
  border: none;
}

/* Links */
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 19px;
  font-weight: 500;
  color: #3F3882;
  background: transparent;
  border-radius: 999px; /* pill shape */
  transition: all 0.2s ease;
}

/* Hover effect */
nav.woocommerce-pagination ul li a:hover {
  background: #f5f5f5;
  color: #000;
}

/* Current page */
nav.woocommerce-pagination ul li .current {
  background: #BDE7CF;
  color: #3F3882;
  font-size: 15px;
}

/* Next/Prev arrows */
nav.woocommerce-pagination ul li a.next,
nav.woocommerce-pagination ul li a.prev {
  font-size: 21px;
  padding: 0 14px;
}