/*
Theme Name: H&G Template
Theme URI: 
Author: AnnMarie DeVito - Green Closet Creative
Author URI: https://greenclosetcreative.com
Description: Theme based on the new House & Garden website. For use on H&G brand websites.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hg-template
Tags: 

html, body { overflow-x: hidden; }

/* search form styles */

html, body { overflow-x: hidden; }

/* search form styles */
:not(main) .wp-block-search .wp-block-search__inside-wrapper {
    padding: 0;
}
:not(main) .wp-block-search .wp-block-search__input {
    padding: 0 10px;
    border-radius: 22px 0 0 22px !important;
}
:not(main) .wp-block-search .wp-block-search__button.has-icon {
    padding: 5px;
    margin-left: 0;
    border-radius: 0 22px 22px 0 !important;
}

:not(.error404) main .wp-block-search .wp-block-search__inside-wrapper {
    width: 100%;
    max-width: 350px;
    margin-bottom: 40px;
}

/* header mobile shift */
@media screen and (max-width: 781px) {
    header.wp-block-template-part > .has-theme-primary-background-color {
        padding-top: 60px !important;
    }
    header.wp-block-template-part > .has-theme-primary-background-color .has-search {
        position: absolute;
        top: 10px;
    }
}
@media screen and (max-width: 467px) {
    header.wp-block-template-part > .has-theme-primary-background-color {
        padding-top: 120px !important;
    }
    header.wp-block-template-part > .has-theme-primary-background-color .has-search {
        flex-direction: column-reverse !important;
        width: 92%;
        align-items: end;
    }
    header.wp-block-template-part > .has-theme-primary-background-color .has-search .wp-block-search {
        width: 100%;
    }
}


/* Home Page Hero Pattern Styles */
@media screen and (max-width: 1279px) {
    .home-hero-four-images {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home-hero-four-images > .wp-block-cover:first-child {
        grid-column: span 1;
    }
    
    .home-hero-five-images {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .home-hero-five-images > .wp-block-cover {
        grid-column: span 1;
    }
}
@media screen and (max-width: 1023px) {
    .home-hero-four-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-hero-four-images > .wp-block-cover {
        grid-column: span 1;
        grid-row: span 1;
    }

    .home-hero-five-images {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .home-hero-five-images > .wp-block-cover {
        grid-column: span 2;
        grid-row: span 1;
    }
    .home-hero-five-images > .wp-block-cover:first-child,
    .home-hero-five-images > .wp-block-cover:nth-child(2) {
        grid-column: span 3;
        grid-row: span 1;
    } 
}

@media screen and (max-width: 781px) {
    .home-hero-two-images,
    .home-hero-three-images,
    .home-hero-four-images,
    .home-hero-five-images {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Scope all heroes */
:where(.home-hero-one-image,
       .home-hero-two-images,
       .home-hero-three-images,
       .home-hero-four-images,
       .home-hero-five-images) .wp-block-cover {
  overflow: hidden; /* so the zoom doesn't spill outside */
}

/* Transition on the actual background image element (img or span pattern) */
:where(.home-hero-one-image,
       .home-hero-two-images,
       .home-hero-three-images,
       .home-hero-four-images,
       .home-hero-five-images)
  .wp-block-cover :is(.wp-block-cover__image-background,
                      .wp-block-cover__image-background img) {
  display: block; /* guards against inline/strange display from plugins */
  transition: transform .3s ease-in-out;
  will-change: transform;
  transform-origin: center center;
}

/* Hover zoom */
:where(.home-hero-one-image,
       .home-hero-two-images,
       .home-hero-three-images,
       .home-hero-four-images,
       .home-hero-five-images)
  .wp-block-cover:hover :is(.wp-block-cover__image-background,
                            .wp-block-cover__image-background img) {
  transform: scale(1.1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.home-hero-one-image,
         .home-hero-two-images,
         .home-hero-three-images,
         .home-hero-four-images,
         .home-hero-five-images)
    .wp-block-cover :is(.wp-block-cover__image-background,
                        .wp-block-cover__image-background img) {
    transition: none;
  }
}


/* Typing and Counting Boxes */
.typing-box,
.counting-box {
    width: 350px;
    height: 250px;
    clear: both;
}
.typing-box mark,
.counting-box mark {
    font-family: var(--wp--preset--font-family--agencyfb);
    font-weight: bold;
}
.typing-box mark {
    font-size: 80px;
}

.counting-box mark {
    font-size: 60px;
}
.typing-box {
    float: right;
}
.counting-box {
    float: left;
}
@media screen and (max-width: 479px) {
    .typing-box,
    .counting-box {
        width: 100%;
        height: 200px;
        clear: both;
        float: none;
    }
}

.wp-block-file a { line-height: 24px; }


/* Products - ingredients styling */
.ingredient-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  color: white;
}

.ingredient-line strong {
  background-color: #222;
  font-weight: normal !important;
  position: relative;
  z-index: 1;
  padding-right: 0.5em;
}

.ingredient-line mark {
  background-color: #222 !important;
  z-index: 1;
  padding-left: 0.5em;
}

/* Dotted line behind content */
.ingredient-line::before {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 10px;
  right: 10px;
  border-bottom: 2px dotted white;
  z-index: 0;
}


.ingredient-indent {
    padding-left: 30px;
}


ul.unstyled {
    list-style: none;
    padding-left: 0;
}
ul.unstyled li {
    margin-bottom: 1.5rem;
    padding-left: 45px;
}
ul.unstyled li img {
    vertical-align: middle;
    width: 32px !important;
    height: auto;
    margin-right: 1rem;
    position: absolute;
    left: 34px;
}


.product-grow-phases span,
.product-compatible-systems span {
    color: var(--wp--preset--color--theme-black);
    display: block;
    margin-bottom: 10px;
    padding: 4px 8px 4px 34px;
    position: relative;
    width: 170px;
}
.product-grow-phases span:before,
.product-compatible-systems span:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 8px;
    top: 8px;
}

.product-grow-phases span.grow-phase-propagation {
    background-color: #50ba6a;
}
.product-grow-phases span.grow-phase-propagation:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 36 36'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M0,6.75c0-1.24,1.01-2.25,2.25-2.25h2.25c8.7,0,15.75,7.05,15.75,15.75v13.5c0,1.24-1.01,2.25-2.25,2.25s-2.25-1.01-2.25-2.25v-11.25C7.05,22.5,0,15.45,0,6.75ZM36,2.25c0,7.99-5.95,14.59-13.65,15.61-.5-3.75-2.15-7.14-4.59-9.79C20.45,3.26,25.59,0,31.5,0h2.25c1.24,0,2.25,1.01,2.25,2.25Z'/%3E%3C/svg%3E");
}
.product-grow-phases span.grow-phase-vegetative {
    background-color: #0a8345;
    color: var(--wp--preset--color--theme-white);
}
.product-grow-phases span.grow-phase-vegetative:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 36 31.51'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M26.44,4.51c3,0,5.62-1.68,6.94-4.16.25-.46.96-.48,1.14,0,.96,2.57,1.48,5.41,1.48,8.41,0,11.29-7.52,20.44-16.8,20.49h-.07c-5.74,0-10.58-3.92-11.97-9.23-2.33,2.16-3.78,5.24-3.78,8.66v1.12c0,.94-.75,1.69-1.69,1.69s-1.69-.75-1.69-1.69v-1.12c0-5.28,2.69-9.93,6.78-12.65,1.5-1.01,3.2-1.74,5.02-2.16,1.09-.25,2.22-.38,3.39-.38h6.19c.62,0,1.12-.51,1.12-1.12s-.51-1.12-1.12-1.12h-6.19c-2.83,0-5.49.67-7.85,1.86,1.59-4.99,6.27-8.61,11.79-8.61h7.31Z'/%3E%3C/svg%3E");
}
.product-grow-phases span.grow-phase-flower {
    background-color: #dde01c;
}
.product-grow-phases span.grow-phase-flower:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 31.76 35.32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M7.21,8.33c-.21.83-.34,1.69-.34,2.57,0,.44.03.86.09,1.29-.55.19-1.08.43-1.6.72-.7.4-1.32.89-1.89,1.42C1.46,12.5.52,10.73.13,9.8c-.41-.97.21-2.05,1.26-2.18,1.03-.13,3.12-.2,5.84.7h0ZM9.13,10.9C9.13,6.4,13.46,1.89,15.18.28c.39-.37.99-.37,1.39,0,1.72,1.62,6.05,6.12,6.05,10.62,0,1.1-.26,2.14-.73,3.06,1.14,0,2.29.3,3.35.91,3.9,2.25,5.64,8.25,6.17,10.56.13.53-.18,1.05-.7,1.2-2.26.68-8.33,2.19-12.23-.07-1.17-.68-2.05-1.64-2.63-2.76-.57,1.12-1.46,2.08-2.63,2.76-3.9,2.25-9.97.75-12.23.07-.52-.15-.82-.68-.7-1.2.53-2.3,2.27-8.3,6.17-10.56,1.06-.61,2.22-.91,3.36-.91-.46-.92-.72-1.95-.72-3.06ZM12.37,29.38c.69-.22,1.36-.51,2-.88.55-.32,1.05-.68,1.5-1.08.46.41.96.77,1.5,1.08.65.37,1.32.66,2.01.88-.58,2.54-1.59,4.33-2.18,5.22-.64.96-2.02.96-2.67,0-.58-.89-1.6-2.69-2.18-5.22h0ZM18.69,16.53c0-1-.54-1.93-1.41-2.44s-1.94-.5-2.81,0-1.41,1.43-1.41,2.44.54,1.93,1.41,2.44,1.94.5,2.81,0,1.41-1.43,1.41-2.44ZM24.88,10.9c0-.88-.13-1.74-.34-2.57,2.71-.9,4.8-.84,5.84-.7,1.05.13,1.67,1.2,1.26,2.18-.39.94-1.34,2.7-3.35,4.54-.57-.54-1.2-1.03-1.9-1.43-.51-.3-1.05-.53-1.59-.72.06-.42.09-.85.09-1.29h0Z'/%3E%3C/svg%3E");
}
.product-grow-phases span.grow-phase-mid-bloom {
    background-color: #ce8b24;
}
.product-grow-phases span.grow-phase-mid-bloom:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 31.5 31.5'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M0,22.5c0-2.69,1.18-5.1,3.04-6.75-1.86-1.65-3.04-4.06-3.04-6.75C0,4.03,4.03,0,9,0c2.69,0,5.1,1.18,6.75,3.04,1.65-1.86,4.06-3.04,6.75-3.04,4.97,0,9,4.03,9,9,0,2.69-1.17,5.1-3.04,6.75,1.86,1.65,3.04,4.06,3.04,6.75,0,4.97-4.03,9-9,9-2.69,0-5.1-1.17-6.75-3.04-1.65,1.86-4.06,3.04-6.75,3.04-4.97,0-9-4.03-9-9ZM10.88,12.94c-1,1.74-1,3.88,0,5.62,1,1.74,2.86,2.81,4.87,2.81s3.87-1.07,4.87-2.81c1-1.74,1-3.88,0-5.62-1-1.74-2.86-2.81-4.87-2.81s-3.87,1.07-4.87,2.81Z'/%3E%3C/svg%3E");
}
.product-grow-phases span.grow-phase-late-bloom {
    background-color: #dc2f36;
    color: var(--wp--preset--color--theme-white);
}
.product-grow-phases span.grow-phase-late-bloom:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 36 36'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M7.59,2.25c.18,0,.36.06.51.17l4.27,3.21L17.11.37c.21-.24.52-.37.84-.37h.12c.32,0,.63.13.84.37l4.73,5.25,4.27-3.21c.15-.11.32-.17.51-.17.46,0,.84.38.84.84v5.91c0,4.97-4.03,9-9,9v9.76c2.24-3.19,5.94-5.26,10.12-5.26h3.55c1.15,0,2.07.93,2.07,2.07,0,6.31-5.11,11.43-11.43,11.43h-13.15c-6.31,0-11.43-5.11-11.43-11.43,0-1.15.93-2.07,2.07-2.07h3.55c4.18,0,7.88,2.07,10.12,5.26v-9.76c-4.97,0-9-4.03-9-9V3.09c0-.46.38-.84.84-.84Z'/%3E%3C/svg%3E");
}
.product-grow-phases span.grow-phase-ripening-phase {
    background-color: #00aeef;
}
.product-grow-phases span.grow-phase-ripening-phase:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M320 176C311.2 176 304 168.8 304 160L304 144C304 99.8 339.8 64 384 64L400 64C408.8 64 416 71.2 416 80L416 96C416 140.2 380.2 176 336 176L320 176zM96 352C96 275.7 131.7 192 208 192C235.3 192 267.7 202.3 290.7 211.3C309.5 218.6 330.6 218.6 349.4 211.3C372.3 202.4 404.8 192 432.1 192C508.4 192 544.1 275.7 544.1 352C544.1 480 464.1 576 384.1 576C367.6 576 346 569.4 332.6 564.7C324.5 561.9 315.7 561.9 307.6 564.7C294.2 569.4 272.6 576 256.1 576C176.1 576 96.1 480 96.1 352z'/%3E%3C/svg%3E");
}

.product-compatible-systems span.compatible-system-soilless {
    background-color: #5f6c3b;
    color: var(--wp--preset--color--theme-white);
}
.product-compatible-systems span.compatible-system-soilless:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 36 36'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M18.31.66c3.46-1.07,7.11-1.01,9.48,1.36l2.88,2.88c3.42,3.42,5.34,8.06,5.34,12.88,0,10.06-8.16,18.22-18.21,18.22-4.83,0-9.46-1.92-12.88-5.34l-2.88-2.88C-.34,25.41-.4,21.77.66,18.3c1.1-3.54,3.5-7.38,6.88-10.76,3.38-3.38,7.22-5.78,10.76-6.87ZM9.93,9.92c-3.07,3.07-5.13,6.45-6.03,9.37-.93,3-.52,5.06.53,6.1s3.09,1.45,6.1.53c2.92-.9,6.3-2.96,9.37-6.03,3.07-3.07,5.13-6.46,6.03-9.37.93-3,.52-5.06-.53-6.1-1.05-1.04-3.09-1.45-6.1-.53-2.92.89-6.3,2.96-9.37,6.03ZM22.77,6.86c1.76,1.76-.38,6.74-4.77,11.14s-9.38,6.53-11.14,4.77.38-6.74,4.77-11.14,9.38-6.53,11.14-4.77ZM15.98,27.89c-.44-.44-1.15-.44-1.59,0-.44.44-.44,1.15,0,1.59l2.25,2.25c.44.44,1.15.44,1.59,0,.44-.44.44-1.15,0-1.59l-2.25-2.25ZM25.54,23.95c-.44-.44-1.15-.44-1.59,0-.44.44-.44,1.15,0,1.59l2.25,2.25c.44.44,1.15.44,1.59,0,.44-.44.44-1.15,0-1.59l-2.25-2.25ZM29.48,14.39c-.44-.44-1.15-.44-1.59,0-.44.44-.44,1.15,0,1.59l2.25,2.25c.44.44,1.15.44,1.59,0,.44-.44.44-1.15,0-1.59l-2.25-2.25Z'/%3E%3C/svg%3E");
}
.product-compatible-systems span.compatible-system-soil {
    background-color: #5e2613;
    color: var(--wp--preset--color--theme-white);
}
.product-compatible-systems span.compatible-system-soil:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 36.01 36.01'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M25.41.66c.88-.88,2.31-.88,3.19,0l6.75,6.75c.88.88.88,2.31,0,3.19l-3.1,3.1c-1.31,1.31-3.1,2.06-4.96,2.06-1.12,0-2.17-.26-3.11-.72l-6.82,6.82,3.56,3.56c.88.88.88,2.31,0,3.19l-4.11,4.11c-2.11,2.11-4.97,3.3-7.95,3.3H2.25c-1.24,0-2.25-1.01-2.25-2.25v-6.6c0-2.98,1.19-5.84,3.3-7.95l4.11-4.11c.88-.88,2.31-.88,3.19,0l3.56,3.56,6.82-6.82c-.47-.94-.73-2-.73-3.12,0-1.86.74-3.65,2.06-4.96l3.1-3.1ZM27,5.43l-1.51,1.5c-.47.47-.74,1.12-.74,1.79,0,1.39,1.13,2.52,2.52,2.52.67,0,1.31-.27,1.79-.74l1.5-1.51-3.57-3.56Z'/%3E%3C/svg%3E");
}
.product-compatible-systems span.compatible-system-hydroponics {
    background-color: #00b5ad;
}
.product-compatible-systems span.compatible-system-hydroponics:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 27 36'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M13.5,36c-7.45,0-13.5-6.05-13.5-13.5C0,16.09,9.16,4.06,11.71.82c.42-.53,1.05-.82,1.72-.82h.13c.67,0,1.3.3,1.72.82,2.56,3.23,11.71,15.26,11.71,21.68,0,7.45-6.05,13.5-13.5,13.5ZM6.75,23.62c0-.62-.51-1.12-1.12-1.12s-1.12.51-1.12,1.12c0,4.35,3.52,7.88,7.88,7.88.62,0,1.12-.51,1.12-1.12s-.51-1.12-1.12-1.12c-3.11,0-5.62-2.52-5.62-5.62Z'/%3E%3C/svg%3E");
}

/* related products */
.wp-block-query ul {
    gap: 1rem;
}
.related-product > a,
.wp-block-query li.products figure a {
    border: 2px solid var(--wp--preset--color--theme-black);
    display: block;
    text-align: center;
}
.related-product > a img,
.wp-block-query li.products figure a img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.related-product > a:hover,
.wp-block-query li.products figure a:hover {
    background-color: #eaeaea;
}
.related-product h3,
.wp-block-query li.products h3 {
    margin-top: 1rem;
}


/* store locator styles ---------------------------------------------- */
#wpsl-search-wrap #wpsl-category label, #wpsl-search-wrap #wpsl-radius label, #wpsl-search-wrap .wpsl-input label {
    width: 150px;
}

@media (max-width: 570px){
 #wpsl-search-wrap #wpsl-search-input { width: 90% !important; }
}



@media screen and (min-width: 782px) {
    .on-mobile { display: none; }
}
/* nutrient calculator styles ---------------------------------------------- */

#nute_calc_container {
    background-color: #fff; /* White container */
    padding: 20px; /* Increased padding */
    border-radius: 0;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

/* --- New Responsive Form Styles --- */
#grow_parameters {
    display: flex; /* Establishes a flex container */
    flex-wrap: wrap; /* Allows items to wrap to the next line on small screens */
    justify-content: center; /* Centers the form items */
    gap: 24px; /* Creates consistent space between all items */
}
.single_parameter {
    /* This div is now a flex item, its old styling is removed */
    text-align: left;
}
.single_parameter label {
    display: block; /* Puts the label on its own line */
    font-weight: bold;
    margin-bottom: 8px; /* Space between label and input */
    font-size: 14px;
}
/* --- End New Form Styles --- */

/* Standard light theme for form inputs */
select, input[type="text"], input[type="button"] {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    font-size: 14px; /* Consistent font size */
}
input[type="button"] {
    background-color: #e0e0e0;
    cursor: pointer;
    font-weight: bold;
}
#wrapper { width: 100%; }
#nutrientCalculatorContainer { display: flex; flex-direction: row; }
#nutrientLabelContainer { flex-shrink: 0; }
#nutrientDoseContainer { overflow-x: auto; width: 100%; }
table { border-collapse: collapse; }
th, td {
    border: 1px solid #ddd; /* Light border */
    padding: 8px;
    text-align: center;
    width: 96px;
    min-width: 96px;
    font-size: 12px;
    vertical-align: middle;
    box-sizing: border-box;
    background-color: #fff; /* White cell background */
    color: #333; /* Dark text */
}
        
/* Headers for Veg/Flower/Flush/Totals - These remain colored */
.phaseHeaderRow th { font-size: 16px; font-weight: bold; color: #fff;}
.vegHeader { background-color: #36c219; }
.flowerHeader { background-color: #ff8c00; }
.flushHeader { background-color: #94dbf2; color: #fff; }
.totalsHeader { background-color: #adadad; }
.phaseWeekRow th, .phaseWeekRow td { color: #000; font-weight: bold; font-size: 13px; }
.phaseWeekRow .flushWeekCell { color: #333; } /* Dark text for flush week header */

.nutrientLabelCell {
    font-weight: bold;
    width: 160px;
    height: 72px;
    text-align: left;
}
.doseCell {
    font-weight: bold;
    height: 72px;
}

/* --- Product Row Color Shades (Pastels for Light Theme) --- */
.hydro_group_bg_gradient, .Aqua_Flakes_A_cell, .Aqua_Flakes_B_cell, .Hydro_A_cell, .Hydro_B_cell, .Cocos_A_cell, .Cocos_B_cell {
    background-color: rgb(0 83 38 / 15%);
}
.drip_clean_bg_gradient, .Drip_Clean_cell {
    background-color: rgb(42 164 219 / 15%); 
}
.roots_gold_bg_gradient, .Roots_Excelurator_cell {
    background-color: rgb(163 141 68 / 15%); 
}
.roots_silver_bg_gradient, .Roots_Excelurator_cell.Silver {
    background-color: rgb(153 153 153 / 15%); 
}
.amino_treatment_bg_gradient, .Amino_Treatment_cell {
    background-color: rgb(0 141 73 / 15%); 
}
.multi_zen_bg_gradient, .Multi_Zen_cell {
    background-color: rgb(184 206 70 / 15%); 
}
.algen_extract_bg_gradient, .Algen_Extract_cell {
    background-color: rgb(115 192 78 / 15%); 
}
.bud_xl_bg_gradient, .Bud_XL_cell {
    background-color: rgb(217 108 52 / 15%); 
}
.top_booster_bg_gradient, .Top_Booster_cell {
    background-color: rgb(245 177 52 / 15%); 
}
.shooting_powder_bg_gradient, .Shooting_Powder_cell {
    background-color: rgb(0 106 163 / 15%); 
}
.magic_green_bg_gradient, .Magic_Green_cell {
    background-color: rgb(0 149 72 / 15%); 
}
.soil_group_bg_gradient, .Soil_A_cell, .Soil_B_cell, .Bio_1_cell {
    background-color: rgb(89 42 26 / 15%); 
}
.top_shooter_bg_gradient, .Top_Shooter_cell {
    background-color: rgb(219 38 35 / 15%); 
}
/* --- End Product Shades --- */

#foliarBreakerCell, #foliarLabelBreakerCell { background-color: #666; color: #fff; font-weight: bold; font-size: 11px; text-align: left; text-transform: uppercase; height: 38px; }

/* Grocery List Styling (Light Theme) */
#groceryListContainer { margin-top: 25px; padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: auto; }
#groceryListTable { width: auto; border: none; }
#groceryListTable td { background-color: #fff; color: #333; width: auto; text-align: left; border: none; padding: 8px 16px; }
#groceryListTable tr:nth-child(even) td { background-color: #f9f9f9; } /* Alternating row for grocery list */
#groceryListTable .groceryListProduct { font-weight: bold; }
#groceryListTable td.groceryListEmpty { display: none; }

#phaseTable h5 { margin: 0; color: #000; }
.pHhydroShieldCell, .pHcocoShieldCell, .pHsoilShieldCell { height: 88px; text-align: left; font-size: 1rem; font-weight: bold; }

#basicTable tr:last-child td, #myLabelTable tr:last-child td { height: 110px; }
#phaseTable .phaseWeekRow th:first-child { font-size: 12px; width: 95px; min-width: 95px; }
#basicTable .doseCell:first-child { width: 95px; min-width: 95px; }
