/* Fonts loaded in redesign asset templates (Google Fonts) */

/* ── Preloader ── */
.fh-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.fh-preloader.fh-preloader-done {
  opacity: 0;
  pointer-events: none;
}
.fh-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.fh-preloader-sprout {
  animation: fh-sprout-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}
@keyframes fh-sprout-pop {
  from { opacity: 0; transform: scale(0.4) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.fh-leaf-stem {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: fh-draw 0.4s 0.55s ease forwards;
}
.fh-leaf-a {
  opacity: 0;
  transform-origin: 50% 70%;
  animation: fh-leaf-grow 0.35s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fh-leaf-b {
  opacity: 0;
  transform-origin: 50% 55%;
  animation: fh-leaf-grow 0.35s 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes fh-draw { to { stroke-dashoffset: 0; } }
@keyframes fh-leaf-grow {
  from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
.fh-preloader-logo {
  height: 44px;
  width: auto;
  opacity: 0;
  animation: fh-fade-up 0.5s 0.6s ease forwards;
}
.fh-preloader-bar-wrap {
  width: 140px;
  height: 3px;
  background: #e8f0ea;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  animation: fh-fade-in 0.3s 0.7s ease forwards;
}
.fh-preloader-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #3f9367, #5db889);
  border-radius: 10px;
  animation: fh-bar-fill 1.7s 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fh-bar-fill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}
.fh-preloader-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #b0bab5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0;
  animation: fh-fade-up 0.5s 0.85s ease forwards;
}
@keyframes fh-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fh-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.freshhouse-vibrant-theme[dir="rtl"],
.freshhouse-vibrant-theme[dir="rtl"] * {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

.freshhouse-vibrant-theme {
  --primary: 149 40% 41%;
  --primary-light: 149 40% 96%;
  --primary-dark: 149 40% 28%;
  --secondary: 45 93% 47%;
  --text-main: 222 47% 11%;
  --text-muted: 215 16% 47%;
  --bg-main: 0 0% 100%;
  --bg-subtle: 210 40% 98%;

  font-family: 'DM Sans', sans-serif;
  color: hsl(var(--text-main));
  background-color: hsl(var(--bg-main));
}

.freshhouse-vibrant-theme h1,
.freshhouse-vibrant-theme h2,
.freshhouse-vibrant-theme h3,
.freshhouse-vibrant-theme h4,
.freshhouse-vibrant-theme h5,
.freshhouse-vibrant-theme h6 {
  font-family: 'Outfit', sans-serif;
}

.fh-partners-overflow {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.fh-partners-track {
  display: flex;
  width: max-content;
  animation: fh-marquee 40s linear infinite;
}

.fh-partners-track:hover {
  animation-play-state: paused;
}

@keyframes fh-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.fh-menu-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 24px 4px 8px;
}
.fh-menu-slider::-webkit-scrollbar { display: none; }

.fh-menu-card {
  flex-shrink: 0;
  width: 182px;
  scroll-snap-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: none;
  background: transparent;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
}
.fh-menu-card:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 4px;
  border-radius: 20px;
}

.fh-menu-img-wrap {
  width: 182px;
  height: 168px;
  border-radius: 20px;
  background: hsl(149 40% 96%);
  overflow: hidden;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}
.fh-menu-card:hover .fh-menu-img-wrap {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.fh-menu-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.fh-menu-img[src*="logo-bottom"] {
  object-fit: contain;
  padding: 1.25rem;
  background: #f4f4f1;
}
.fh-menu-card:hover .fh-menu-img { transform: scale(1.04); }

.fh-menu-name {
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--text-main));
  margin-bottom: 8px;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.fh-menu-macros {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow: visible;
  margin-top: auto;
}

.fh-macro {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  color: #333;
  background: #e5e5e5;
}

.fh-macro-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.fh-macro-icon--protein {
  width: 11px;
  height: 11px;
}

.fh-macro-kcal,
.fh-macro-protein,
.fh-macro-carbs,
.fh-macro-fat {
  color: #333;
  background: #e5e5e5;
}

.fh-macro-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.3s ease, opacity 0.25s ease;
}
.fh-macro:hover .fh-macro-label {
  max-width: 48px;
  opacity: 1;
}

.fh-menu-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.2s, background 0.2s;
  color: hsl(var(--text-main));
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 600;
  padding: 0;
}
.fh-menu-arrow:hover {
  background: hsl(var(--primary));
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.fh-menu-arrow-left { left: -20px; }
.fh-menu-arrow-right { right: -20px; }

.fh-plan-outer {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 60px;
  align-items: center;
}

.fh-plan-copy { display: flex; flex-direction: column; gap: 20px; }
.fh-plan-copy-heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: hsl(var(--text-main));
}
.fh-plan-copy-sub {
  font-size: 15px;
  line-height: 1.6;
  color: hsl(var(--text-muted));
  max-width: 320px;
}

.fh-plan-right { position: relative; display: flex; flex-direction: column; gap: 20px; }

.fh-plan-tabs {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.fh-plan-tab {
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid #e5e7eb;
  background: white;
  color: hsl(var(--text-muted));
  cursor: pointer;
  transition: all 0.2s;
}
.fh-plan-tab:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.fh-plan-tab-active { background: #111; color: white !important; border-color: #111 !important; }

.fh-plan-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}

.fh-plan-rows { display: flex; flex-direction: column; gap: 20px; }

.fh-plan-row {
  display: grid;
  grid-template-columns: 65px 1fr auto;
  align-items: center;
  gap: 10px;
}
.fh-plan-row-name {
  font-weight: 700;
  font-size: 15px;
  color: hsl(var(--text-main));
}

.fh-plan-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 4px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
  width: 100%;
}
.fh-plan-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #111;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

.fh-plan-counter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fh-plan-counter span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fh-count-zero {
  background: #f3f4f6;
  color: #9ca3af;
  border: 2px solid #e5e7eb;
}
.fh-count-active {
  background: white;
  color: #111;
  border: 2px solid #9ca3af;
}
.fh-plan-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: white;
  color: #6b7280;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s;
}
.fh-plan-btn:hover:not(:disabled) { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.fh-plan-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.fh-plan-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 17.5rem;
  flex-shrink: 0;
}

.fh-plan-visual-stage {
  position: relative;
  display: inline-block;
  width: 12.5rem;
}

.fh-plan-visual-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 1;
}

.fh-plan-visual-bottom {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  margin-left: 3.25rem;
  margin-top: 1.25rem;
  z-index: 4;
  width: fit-content;
}

.fh-plan-visual-bottom--tuck {
  margin-top: -1.25rem;
}

.fh-plan-visual-bottom .fh-plan-meal-item--small + .fh-plan-meal-item--small {
  margin-left: -0.625rem;
}

.fh-plan-meal-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fh-plan-meal-item--hidden {
  display: none !important;
}

.fh-plan-meal-img-wrap {
  flex-shrink: 0;
  line-height: 0;
}

.fh-plan-visual-stack > .fh-plan-meal-item[data-fh-visual-meal] {
  margin-bottom: -1.5rem;
}

.fh-plan-visual-stack .fh-plan-meal-img-wrap img {
  width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.10));
  transition: transform 0.3s ease;
}

.fh-plan-visual-stack .fh-plan-meal-img-wrap img:hover {
  transform: translateY(-4px);
}

.fh-plan-meal-item--small {
  position: relative;
  flex-direction: column;
  align-items: center;
}

.fh-plan-meal-item--small .fh-plan-meal-img-wrap {
  width: 4.75rem;
  height: 3.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.fh-plan-meal-item--small .fh-plan-meal-img-wrap img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.08));
  transition: transform 0.3s ease;
}

.fh-plan-meal-item--small .fh-plan-meal-img-wrap img:hover {
  transform: scale(1.04);
}

.fh-plan-qty-badge {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 14px hsl(var(--primary) / 0.4);
  border: 2px solid #fff;
  z-index: 5;
  animation: fh-plan-badge-in 0.25s ease;
}

.fh-plan-qty-badge.is-visible {
  display: flex;
}

.fh-plan-meal-item--small .fh-plan-qty-badge {
  position: absolute;
  bottom: 0.25rem;
  right: -0.5rem;
  min-width: 1.75rem;
  height: 1.75rem;
  font-size: 0.6875rem;
  padding: 0 0.25rem;
}

@keyframes fh-plan-badge-in {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fh-plan-summary {
  margin-top: 40px;
  background: hsl(var(--bg-subtle));
  border-radius: 20px;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fh-plan-summary-item { font-size: 14px; color: #111; font-weight: 500; }
.fh-plan-summary-item strong { color: #111; font-weight: 700; }
.fh-plan-subscribe {
  background: hsl(var(--primary));
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 36px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.fh-plan-subscribe:hover {
  background: hsl(var(--primary-dark));
  transform: translateY(-1px);
  color: white;
}

.freshhouse-vibrant-theme .bg-pattern {
  background-image: radial-gradient(hsl(var(--primary) / 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}