:root {
    --primary-color: #0F9D58;
    --background-color: #f0f3f7;
    --secon-color: #9da2ad;
    --grey: #7a7a7b;
    --white: #ffffff;
}

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a { color: unset; text-decoration: none; }

body, html {
    background-color: var(--background-color);
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
}

/* NAV */
.nav {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 99;
    background-color: var(--background-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.menu-wrap {
    max-width: 1366px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem;
}
.logo { font-size: 2rem; font-weight: 800; color: var(--primary-color); }
.menu { display: flex; align-items: center; justify-content: center; }
.menu-item {
    margin-left: 1rem; padding: .5rem 1.5rem; font-weight: 600; color: var(--grey); transition: .5s ease-in-out; cursor: pointer;
}
.menu-item:hover, .menu-item.active {
    color: var(--white); background-color: var(--primary-color); border-radius: 1rem;
}
.cart-btn {
    width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
    color: var(--primary-color); font-size: 2rem; cursor: pointer; transition: .5s ease-in-out;
}
.cart-btn:hover { background-color: var(--primary-color); color: var(--white); border-radius: 1rem; }

/* LAYOUT HELPERS */
.fullheight { height: 100vh; }
.align-items-center { display: flex; align-items: center; justify-content: center; text-align: center; }
.bg-img { background-position: center; background-size: cover; background-repeat: no-repeat; }
.bg-img-fixed { background-attachment: fixed; }
.container { width: 100%; max-width: 1366px; margin: 0 auto; }
section { padding: 9rem 0; }

/* HERO / ABOUT */
.slogan { text-align: left; }
.slogan h1 { font-size: 7rem; color: var(--primary-color); }
.slogan button {
    padding: 1rem 5rem; outline: none; border: none; background-color: var(--background-color);
    border: .125rem solid var(--primary-color); border-radius: 2rem; color: var(--primary-color);
    margin: 3rem 0; cursor: pointer; font-weight: 600; transition: .5s ease-in-out;
}
.slogan button:hover { background-color: var(--primary-color); color: var(--white); }
.fullwidth { width: 100%; }

#about img {
    border-radius: 2rem;
    box-shadow:
        rgba(17,17,26,0.1) 0px 8px 24px,
        rgba(17,17,26,0.1) 0px 16px 56px,
        rgba(17,17,26,0.1) 0px 24px 80px;
}
.about-slogan { padding: 4rem; background-color: var(--white); border-radius: 2rem; box-shadow: rgba(0,0,0,0.15) 0px 2px 8px; }
.about-slogan.start { transform: translateX(-10rem) !important; }
.about-slogan h3 { font-size: 2rem; margin-bottom: 3rem; color: var(--grey); }
.primary-color { color: var(--primary-color); }

/* MENU PANEL */
.food-menu {
    padding: 4rem; background-color: var(--white); border-radius: 2rem;
    box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;
}
.food-menu h1 { color: var(--grey); }
.food-menu p { margin: 2rem 0; }

/* CATEGORY STRIP (base, overridden to grid later) */
.food-category { display: flex; }
.food-category button {
    padding: .5rem 2.5rem; margin: 0 1rem; outline: none; border: 1px solid var(--primary-color);
    background-color: transparent; color: var(--primary-color); font-weight: 600; border-radius: 1rem;
    cursor: pointer; transition: .3s ease-in-out;
}
.food-category button:hover, .food-category button.active { background-color: var(--primary-color); color: var(--white); }

/* GRID OF CARDS */
.food-item-wrap {
    display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 3rem;
}
.food-item { width: 25%; height: auto; padding: 1rem; overflow: hidden; } /* height auto (decoupled) */
.item-wrap { height: 100%; transition: .4s ease-in-out; cursor: pointer; border-radius: 2rem; overflow: hidden; }
.item-wrap:hover {
    box-shadow:
        rgba(14,30,37,0.12) 0px 2px 4px 0px,
        rgba(14,30,37,0.32) 0px 2px 16px 0px;
}
.item-img { height: 18rem; position: relative; overflow: hidden; border-radius: 2rem; } /* fixed image height */
.img-holder {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: .5s ease-in-out; border-radius: 2rem;
}
.img-holder:hover { transform: scale(2) rotate(45deg); }

/* COMPACT DETAILS STRIP */
.item-info {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.75rem; padding: 0 0.5rem 0.5rem; gap: 0.5rem; overflow: hidden;
}
.item-info > div:first-child { flex: 1 1 auto; min-width: 0; text-align: left; }
.item-info h3 {
    color: var(--grey); font-size: 1rem; line-height: 1.3; margin: 0;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
/* If you want price/cart hidden by default, keep below; else comment out */
.item-info span, .cart-btn { display: none; }

/* DEFAULT FILTERING BASELINE: HIDE EVERYTHING */
.food-item-wrap > div { display: none; }

/* CATEGORY-SPECIFIC VISIBILITY (extend as needed) */
.food-item-wrap.fresh     > div.fresh-type     { display: block; }
.food-item-wrap.frozen    > div.frozen-type    { display: block; }
.food-item-wrap.pantry    > div.pantry-type    { display: block; }
.food-item-wrap.beverages > div.beverages-type { display: block; }
.food-item-wrap.household > div.household-type { display: block; }
.food-item-wrap.health    > div.health-type    { display: block; }
.food-item-wrap.beauty    > div.beauty-type    { display: block; }
.food-item-wrap.baby      > div.baby-type      { display: block; }
.food-item-wrap.pharmacy  > div.pharmacy-type  { display: block; }
.food-item-wrap.pet       > div.pet-type       { display: block; }

/* “ALL” MODE — JS controls exactly which 8 are visible */
.food-item-wrap.all > .food-item { display: none; }
.food-item-wrap.all > .food-item.visible { display: block; }

/* ANIMATIONS */
.left-to-right { transform: translateX(-150%); transition: 1s ease-in-out; }
.left-to-right.start { transform: translateX(0); }
.right-to-left { transform: translateX(150%); transition: 1s ease-in-out; }
.right-to-left.start { transform: translateX(0); }
.zoom { transform: scale(0); transition: .6s ease-in-out; }
.zoom.start { transform: unset; }
.bottom-up { transform: translateY(30%); transition: .8s ease-in-out; }
.bottom-up.start { transform: translateY(0); }
.delay-2 { transition-delay: .2s; }
.delay-4 { transition-delay: .4s; }
.delay-6 { transition-delay: .6s; }
.delay-8 { transition-delay: .8s; }
.delay-10 { transition-delay: .10s; }
.delay-12 { transition-delay: .12s; }

/* GRID SYSTEM (unchanged) */
.row { display: flex; flex-wrap: wrap; }
[class*="col-"] { padding: 1rem; }
.col-1  { width: 8.33%; } .col-2  { width: 16.66%; } .col-3  { width: 25%; }
.col-4  { width: 33.33%; } .col-5  { width: 41.66%; } .col-6  { width: 50%; }
.col-7  { width: 58.33%; } .col-8  { width: 66.66%; } .col-9  { width: 75%; }
.col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; }

.mb-nav { display: none; }
.back-to-top {
    position: fixed; bottom: 70px; right: 70px; border-radius: 10px; background-color: var(--primary-color);
    color: var(--white); display: none; align-items: center; justify-content: center; font-size: 2rem; padding: .5rem; z-index: 99;
}

/* RESPONSIVE: base */
@media only screen and (max-width: 600px) {
    * { font-size: 13px; }
    h1 { font-size: 3rem !important; }
    span { font-size: inherit; }
    .cart-btn i { font-size: 2rem; }
    .about { background-image: url(assets/dan-gold-4_jhDO54BYg-unsplash.jpg); background-attachment: fixed; }
    .about-slogan.start { transform: translateX(0) !important; }
    .food-menu { padding: 4rem 0; }
    .food-item { width: 50%; height: auto; }  /* 2-up on phones, height auto */
    .back-to-top { bottom: 6rem; right: 1rem; }
    .review-wrap.active { transform: unset !important; }
    /* mobile nav kept as in your original */
    .mb-nav {
        position: fixed; bottom: 0; display: flex; width: 100%; justify-content: space-between; align-items: center;
        background-color: var(--white); z-index: 99; overflow: hidden; border-top-left-radius: 2rem; border-top-right-radius: 2rem;
        box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;
    }
    .mb-nav-item { display: flex; align-items: center; justify-content: center; flex: 25%; padding: 1rem 0; }
    .mb-nav-item i, .mb-nav-item a { font-size: 2rem; color: var(--secon-color); z-index: 2; transition: .5s ease-in-out; }
    .mb-nav-item.active i { color: var(--white); }
    .mb-move-item { position: absolute; left: 0; width: 25%; height: 100%; background-color: var(--primary-color); transition: .5s ease-in-out; }
    .col-xs-1  { width: 8.33%; } .col-xs-2  { width: 16.66%; } .col-xs-3  { width: 25%; }
    .col-xs-4  { width: 33.33%; } .col-xs-5  { width: 41.66%; } .col-xs-6  { width: 50%; }
    .col-xs-7  { width: 58.33%; } .col-xs-8  { width: 66.66%; } .col-xs-9  { width: 75%; }
    .col-xs-10 { width: 83.33%; } .col-xs-11 { width: 91.66%; } .col-xs-12 { width: 100%; }
    .h-xs { display: none; }
}

/* CATEGORY GRID OVERRIDE (All = full row, then 5 per row) */
.food-category {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}
.food-category > div { width: 100%; }
.food-category button {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1rem; white-space: nowrap;
}
.food-category > div:first-child { grid-column: 1 / -1; }
.food-category > div:first-child button { font-size: 1.1rem; padding: 1rem 1.25rem; border-radius: 1.25rem; }

@media (max-width: 1024px) {
  .food-category { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .food-category > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .food-category { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-y: visible; }
  .food-category > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .food-category { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-category > div:first-child { grid-column: 1 / -1; }
}


/* --- FIX: Footer readability (overlay + stacking) --- */
.footer {
  position: relative;            /* allow overlay */
  color: var(--white);           /* keep footer text white as designed */
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);  /* darken whatever image/color sits behind */
  z-index: 0;
}
.footer .container,
.footer .container * {
  position: relative;
  z-index: 1;                    /* put content above the overlay */
}
/* Keep the footer heading in theme color if you prefer stronger contrast on dark */
.footer h1 { color: var(--primary-color); }

/* --- FIX: Testimonial card panels (ensure white tiles + image badge) --- */
.review-wrap {
  background-color: var(--white) !important;
  border-radius: 3rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  overflow: visible;             /* allow badge to float */
}
.review-content {
  background: var(--white);
  padding: 3rem;
  border-bottom: .125rem solid var(--grey);
  position: relative;
  text-align: center;
}
.review-img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2.5rem;               /* badge overlaps nicely */
  width: 5rem;
  height: 5rem;
  border-radius: 2rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-size: cover;
  background-position: center;
  z-index: 2;                    /* above the card */
}
.review-info {
  background: var(--white);
  padding: 3rem;
  text-align: center;
}

/* --- SAFETY: ensure our product-only hide rule doesn't affect footer/testimonials --- */
/* Already scoped to .item-info; keep it that way (no global spans hidden) */
.item-info span, .cart-btn { display: none; }  /* leave as-is, just confirming scope */


/* --- FIX: Footer readability (overlay + stacking) --- */
.footer {
  position: relative;            /* allow overlay */
  color: var(--white);           /* keep footer text white as designed */
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);  /* darken whatever image/color sits behind */
  z-index: 0;
}
.footer .container,
.footer .container * {
  position: relative;
  z-index: 1;                    /* put content above the overlay */
}
/* Keep the footer heading in theme color if you prefer stronger contrast on dark */
.footer h1 { color: var(--primary-color); }

/* --- FIX: Testimonial card panels (ensure white tiles + image badge) --- */
.review-wrap {
  background-color: var(--white) !important;
  border-radius: 3rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  overflow: visible;             /* allow badge to float */
}
.review-content {
  background: var(--white);
  padding: 3rem;
  border-bottom: .125rem solid var(--grey);
  position: relative;
  text-align: center;
}
.review-img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2.5rem;               /* badge overlaps nicely */
  width: 5rem;
  height: 5rem;
  border-radius: 2rem;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background-size: cover;
  background-position: center;
  z-index: 2;                    /* above the card */
}
.review-info {
  background: var(--white);
  padding: 3rem;
  text-align: center;
}

/* --- SAFETY: ensure our product-only hide rule doesn't affect footer/testimonials --- */
/* Already scoped to .item-info; keep it that way (no global spans hidden) */
.item-info span, .cart-btn { display: none; }  /* leave as-is, just confirming scope */




/* === TESTIMONIALS: FORCE ORIGINAL VIBE (high specificity) === */

/* 1) Consistent rounded white cards */
#testimonial .review-wrap,
#testimonial .review-content,
#testimonial .review-info {
  background: var(--white) !important;
  border-radius: 2rem !important;
}

/* 2) Center card forward (scale + elevation) */
#testimonial .review-wrap {
  position: relative;
  overflow: visible; /* allow badge overlap */
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0 !important;
}
#testimonial .review-wrap.active {
  transform: scale(1.18) !important;
  z-index: 3 !important;
  box-shadow:
    rgba(14,30,37,0.12) 0 12px 24px,
    rgba(14,30,37,0.32) 0 16px 40px !important;
}

/* 3) Keep the circular photo badge overlapping and crisp */
#testimonial .review-content {
  position: relative !important;
  padding: 3rem !important;
  border-bottom: .125rem solid var(--grey) !important;
}
#testimonial .review-img {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -2.5rem !important;
  width: 5rem !important;
  height: 5rem !important;
  border-radius: 2rem !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0 !important;
  z-index: 4 !important;
}
#testimonial .review-info {
  padding: 3rem !important;
  text-align: center !important;
}

/* 4) Stars in theme color (never black) */
#testimonial .rating i {
  color: var(--primary-color) !important;
}

/* 5) Give neighbors breathing room so the scaled center doesn’t collide */
#testimonial .col-4 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* 6) Mobile: disable the scale boost for layout stability */
@media (max-width: 600px) {
  #testimonial .review-wrap.active {
    transform: none !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0 !important;
  }
}



/* FOOTER — restore the “cool” input styling (glass + focus ring + crisp contrast) */
.footer .input-group{
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .65rem;
  border-radius: 2rem;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);      /* translucent glass */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 10px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.footer .input-group:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 24px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.30);
}
.footer .input-group:focus-within{
  border-color: var(--primary-color);
  box-shadow:
    0 0 0 4px rgba(15,157,88,.18),          /* soft green focus ring */
    0 14px 24px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.30);
}

/* Input text stays readable on the darkened footer */
.footer .input-group input{
  flex: 1 1 auto;
  padding: .75rem 1rem;
  border: none; outline: none;
  background: transparent;
  color: #fff;                               /* white text */
  caret-color: var(--primary-color);
  font-weight: 500;
}
.footer .input-group input::placeholder{
  color: rgba(255,255,255,.70);
}

/* Button with subtle gradient + lift on hover */
.footer .input-group button{
  padding: .75rem 1.1rem;
  border: none; outline: none;
  border-radius: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color) 0%, #12b56a 100%);
  box-shadow:
    0 8px 16px rgba(18,181,106,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.footer .input-group button:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 18px rgba(18,181,106,.45),
    inset 0 1px 0 rgba(255,255,255,.30);
  filter: brightness(1.03);
}
.footer .input-group button:active{
  transform: translateY(0);
  box-shadow:
    0 8px 14px rgba(18,181,106,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Mobile: full-width comfort */
@media (max-width: 600px){
  .footer .input-group{
    gap: .5rem;
    padding: .55rem .55rem;
  }
  .footer .input-group input{ padding: .6rem .8rem; }
  .footer .input-group button{ padding: .6rem .9rem; }
}




/* FOOTER — spacing, theme border, and brighter background image */

/* 1) Give the input group more breathing room above */
.footer .input-group{
  margin-top: 2.25rem !important;         /* was too tight */
}

/* 2) Border in brand green (not grey) + subtle glass */
.footer .input-group{
  border: 1.5px solid var(--primary-color) !important;
  background: rgba(255,255,255,0.06);     /* slight glass; keeps the image vivid */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.footer .input-group:focus-within{
  border-color: var(--primary-color) !important;
  box-shadow:
    0 0 0 4px rgba(15,157,88,.18),
    0 14px 24px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* 3) Make the footer background image less “dull”
   (lighten the dark overlay we added earlier) */
.footer::before{
  background: rgba(0,0,0,0.28) !important;  /* was ~0.45 — brighten the image */
}
/* On small screens, keep a touch more contrast for readability */
@media (max-width: 600px){
  .footer::before{ background: rgba(0,0,0,0.34) !important; }
}

/* 4) Button and input stay readable and on-brand */
.footer .input-group input{
  color: #fff; caret-color: var(--primary-color);
}
.footer .input-group input::placeholder{ color: rgba(255,255,255,.75); }
.footer .input-group button{
  background: linear-gradient(135deg, var(--primary-color) 0%, #12b56a 100%);
}




/* FOOTER — brighten background image while keeping text readable */

/* 1) Make the overlay much lighter on desktop */
.footer::before{
  background: rgba(0,0,0,0.0) !important;  /* was 0.28/0.45 FO change it to 0,0,0,0.0 was 0,0,0,0.14 */
}

/* 2) Slightly stronger overlay only on smaller screens for legibility */
@media (max-width: 768px){
  .footer::before{ background: rgba(0,0,0,0.18) !important; }
}
@media (max-width: 480px){
  .footer::before{ background: rgba(0,0,0,0.22) !important; }
}

/* 3) Add subtle text glow so white text stays crisp on a brighter image */
.footer h1,
.footer p,
.footer a,
.footer .input-group input::placeholder {
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* 4) Ensure links stay visible and on-brand over the brighter photo */
.footer a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.25); }
.footer a:hover { border-bottom-color: rgba(255,255,255,0.6); }


.bgfooter-img { background-position: right; background-size: contain, cover; background-repeat: no-repeat; }
.bgfooter-img-fixed { background-attachment: fixed; }