/* ================================================================
   Elementor Lazy-Load Styles
   ================================================================ */
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
	background-image: none !important;
}
@media screen and (max-height: 1024px) {
	.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
	.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
		background-image: none !important;
	}
}
@media screen and (max-height: 640px) {
	.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
	.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
		background-image: none !important;
	}
}

/* ================================================================
   ACCESSIBILITY — Hover & Focus Color Tokens (WCAG AA compliant)
   These CSS custom properties define all hover/focus color values
   used across the site. Changing a value here propagates everywhere.
   All ratios verified against the backgrounds they appear on.
   ================================================================ */
:root {
  /* Brand colors */
  --ffy-crimson: #C90035;             /* primary brand red */
  --ffy-crimson-dark: #8B0024;        /* dark end of brand gradient */

  /* Hover — on dark (crimson hero / navbar / footer) backgrounds */
  --ffy-hover-on-dark: #ffffff;       /* contrast ≥5.94:1 vs #C90035, ≥9.9:1 vs #8B0024 */
  --ffy-hover-link-light: #ff6b8a;    /* footer links on #0f0005 bg: 7.55:1 PASS */

  /* Hover — on light (white / off-white) backgrounds */
  --ffy-hover-on-light: #C90035;      /* contrast 5.94:1 on #fff, 5.66:1 on #fdf8f5 PASS */

  /* Focus ring */
  --ffy-focus-ring: #C90035;          /* 5.94:1 on white; used for focus-visible outlines */
  --ffy-focus-ring-size: 2px;
}

/* ================================================================
   Smooth Scroll & Fixed Header Offset
   ================================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

.ffy-section {
  scroll-margin-top: 84px;
}

/* ================================================================
   Milk Smoothie Slider — CSS layout helpers & animation overrides
   ================================================================ */


.ffy-root.elementor-element {
  --ffy-in: #8B0024;
  --ffy-out: #C90035;

  background: linear-gradient(
    270deg,
    var(--ffy-in) 0%,
    var(--ffy-out) 100%
  ) !important;

  background-color: transparent !important;
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.ffy-frame {
  container-type: inline-size;
}

.ffy-nav {
  /* transform removed — layout now handled by .ffy-navbar flex */
}

.ffy-word .elementor-heading-title {
  white-space: nowrap;
}

.ffy-bowl img {
  filter: drop-shadow(0 3.2cqw 3.6cqw rgba(0, 0, 0, 0.45));
}

.ffy-ing,
.ffy-ing .elementor-widget-container,
.ffy-title,
.ffy-desc {
  transition: none !important;
  animation: none !important;
}

.ffy-ing img {
  display: block;
  width: 100%;
  height: auto;
  transition: none !important;
  animation: none !important;
  transform-origin: center center;
  will-change: transform, opacity;
}

.ffy-title .elementor-heading-title,
.ffy-desc {
  transform-origin: left bottom;
  will-change: transform, opacity;
}

@media (max-width: 767px) {
  .elementor-3089 .elementor-element.elementor-element-81e8e1b .elementor-heading-title {
    margin-bottom: 27px;
    font-size: 9cqw;
  }
}

.ffy-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.ffy-script,
.ffy-script .elementor-widget-container {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ================================================================
   Milk — New Sections Styles
   ================================================================ */

/* ---------------------------------------------------------------
   Global reset / flow fix for new sections
   --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
  min-height: 100%;
  height: auto;
}

.ffy-section {
  scroll-margin-top: 24px;
}

#ffy-root {
  scroll-margin-top: 0;
}

/* ---------------------------------------------------------------
   Shared section layout
   --------------------------------------------------------------- */
.ffy-section {
  width: 100%;
  box-sizing: border-box;
  padding: 96px 5vw;
}

.ffy-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ffy-section-label {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C90035;
  margin-bottom: 14px;
}

.ffy-section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #1a1a1a;
}

.ffy-section-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #4a4a4a;
}

/* ---------------------------------------------------------------
   1. About / Our Story
   --------------------------------------------------------------- */
.ffy-about {
  background: #fdf8f5;
}

.ffy-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.ffy-about-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.12);
}

.ffy-about-img-wrap img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

.ffy-about-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  box-shadow: 0 8px 24px rgba(201,0,53,0.4);
}

.ffy-about-badge-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.ffy-about-badge-txt {
  font-size: 0.65rem;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.ffy-about-text {
  padding-left: 16px;
}

.ffy-about-text .ffy-section-body {
  margin-bottom: 20px;
}

.ffy-about-stat-row {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e8e0d8;
}

.ffy-about-stat {
  text-align: center;
}

.ffy-about-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #C90035;
  line-height: 1;
}

.ffy-about-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: #7a7a7a;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------
   2. Our Flavors / Menu
   --------------------------------------------------------------- */
.ffy-flavors {
  background: #ffffff;
}

.ffy-flavors-header {
  text-align: center;
  margin-bottom: 64px;
}

.ffy-flavors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.ffy-flavor-card {
  background: #fdf8f5;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.ffy-flavor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.14);
}

.ffy-flavor-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.ffy-flavor-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ffy-flavor-card:hover .ffy-flavor-card-img img {
  transform: scale(1.06);
}

.ffy-flavor-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: 4px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
}

.ffy-flavor-card-body {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ffy-flavor-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.2;
}

.ffy-flavor-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: #6a6a6a;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}

.ffy-flavor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ffy-flavor-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #C90035;
}

.ffy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.ffy-btn-primary {
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(201,0,53,0.35);
}

.ffy-btn-primary:hover,
.ffy-btn-primary:focus-visible {
  background: linear-gradient(135deg, #e0003d 0%, #a80029 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,0,53,0.45);
  outline: none;
}

.ffy-btn-primary:hover i,
.ffy-btn-primary:hover svg,
.ffy-btn-primary:focus-visible i,
.ffy-btn-primary:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

.ffy-btn-outline {
  background: transparent;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
}

.ffy-btn-outline:hover,
.ffy-btn-outline:focus-visible {
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}

/* ---------------------------------------------------------------
   3. Why Milk / Features
   --------------------------------------------------------------- */
.ffy-features {
  background: linear-gradient(160deg, #1a0008 0%, #3a0016 50%, #1a0008 100%);
  color: #fff;
}

.ffy-features-header {
  text-align: center;
  margin-bottom: 64px;
}

.ffy-features .ffy-section-heading {
  color: #fff;
}

.ffy-features .ffy-section-label {
  color: #ff6b8a;
}

.ffy-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.ffy-feature-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 40px 28px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease;
}

.ffy-feature-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-6px);
}

.ffy-feature-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(201,0,53,0.4);
  font-size: 1.8rem;
  color: #fff;
}

.ffy-feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
}

.ffy-feature-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}

/* ---------------------------------------------------------------
   4. Testimonials
   --------------------------------------------------------------- */
.ffy-testimonials {
  background: #fdf8f5;
}

.ffy-testimonials-header {
  text-align: center;
  margin-bottom: 64px;
}

.ffy-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ffy-testimonial-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ffy-testimonial-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

.ffy-testimonial-stars {
  display: flex;
  gap: 4px;
  color: #F0B800;
  font-size: 1rem;
}

.ffy-testimonial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.65;
  color: #2a2a2a;
  flex: 1;
}

.ffy-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid #f0e8e0;
}

.ffy-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.ffy-testimonial-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1a1a;
}

.ffy-testimonial-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: #9a9a9a;
  margin-top: 2px;
}

/* ---------------------------------------------------------------
   5. Newsletter / CTA
   --------------------------------------------------------------- */
.ffy-newsletter {
  background: linear-gradient(135deg, #C90035 0%, #8B0024 60%, #600019 100%);
  color: #fff;
  text-align: center;
  padding: 80px 5vw;
}

.ffy-newsletter .ffy-section-heading {
  color: #fff;
}

.ffy-newsletter .ffy-section-body {
  color: rgba(255,255,255,0.8);
  max-width: 520px;
  margin: 0 auto 40px;
}

.ffy-newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.ffy-newsletter-input {
  flex: 1;
  min-width: 240px;
  padding: 14px 22px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ffy-newsletter-input::placeholder {
  color: rgba(255,255,255,0.55);
}

.ffy-newsletter-input:focus {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.18);
}

.ffy-newsletter .ffy-btn-white {
  background: #fff;
  color: #C90035;
  border: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.ffy-newsletter .ffy-btn-white:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.ffy-newsletter-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
}

/* ---------------------------------------------------------------
   6. Footer
   --------------------------------------------------------------- */
.ffy-footer {
  background: #0f0005;
  color: rgba(255,255,255,0.7);
  padding: 64px 5vw 32px;
}

.ffy-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ffy-footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ffy-footer-brand-logo {
  width: 160px;
  display: block;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.ffy-footer-brand-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  margin-bottom: 28px;
}

.ffy-footer-social {
  display: flex;
  gap: 12px;
}

.ffy-footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ffy-footer-social-link:hover,
.ffy-footer-social-link:focus-visible {
  background: #C90035;
  border-color: #C90035;
  color: #ffffff;
  outline: none;
}

.ffy-footer-social-link:hover i,
.ffy-footer-social-link:hover svg,
.ffy-footer-social-link:focus-visible i,
.ffy-footer-social-link:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

.ffy-footer-col-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  letter-spacing: 0.02em;
}

.ffy-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ffy-footer-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ffy-footer-links a:hover,
.ffy-footer-links a:focus-visible {
  color: #ff6b8a;
  outline: none;
  text-decoration: underline;
}

.ffy-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.ffy-footer-contact-item i {
  color: #C90035;
  margin-top: 2px;
  flex-shrink: 0;
}

.ffy-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.ffy-footer-copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
}

.ffy-footer-copy a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
}

.ffy-footer-copy a:hover,
.ffy-footer-copy a:focus-visible {
  color: #ff6b8a;
  outline: none;
  text-decoration: underline;
}

.ffy-footer-bottom-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ffy-footer-bottom-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ffy-footer-bottom-links a:hover,
.ffy-footer-bottom-links a:focus-visible {
  color: #ff6b8a;
  outline: none;
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Responsive — Tablet (max 1024px)
   --------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .ffy-section {
    padding: 72px 5vw;
  }

  .ffy-about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ffy-about-text {
    padding-left: 0;
  }

  .ffy-about-img-wrap img {
    height: 360px;
  }

  .ffy-flavors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ffy-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ffy-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ffy-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ---------------------------------------------------------------
   Responsive — Mobile (max 767px)
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .ffy-section {
    padding: 56px 6vw;
  }

  .ffy-about-badge {
    width: 90px;
    height: 90px;
    bottom: -16px;
    right: -16px;
  }

  .ffy-flavors-grid {
    grid-template-columns: 1fr;
  }

  .ffy-features-grid {
    grid-template-columns: 1fr;
  }

  .ffy-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .ffy-footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ffy-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ffy-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .ffy-newsletter-input {
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------
   Scroll-reveal entrance animation helper
   --------------------------------------------------------------- */
.ffy-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ffy-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   Milk — Sections: supplementary overrides
   ================================================================ */

/* Ensure the elementor wrapper doesn't clip or collapse the new sections */
.elementor.elementor-3089 {
  overflow: visible !important;
  height: auto !important;
}

/* Prevent Elementor's default margin-block-start from
   stacking on top of the new sections */
.ffy-page-spacer,
.ffy-section,
.ffy-newsletter,
.ffy-footer {
  margin-block-start: 0 !important;
}

/* ================================================================
   Font Awesome & Icon Alignment Helpers
   ================================================================ */
.elementor-social-icon i.fas,
.elementor-social-icon i.fab,
.elementor-icon i.fas,
.elementor-icon i.fab {
  line-height: 1;
}

.ffy-footer-contact-item i.fas {
  width: 18px;
  text-align: center;
  margin-top: 3px;
  font-size: 0.9rem;
}

.ffy-testimonial-stars i.fas {
  font-size: 0.9rem;
}

.ffy-feature-icon i.fas {
  font-size: 1.8rem;
  line-height: 1;
}

/* ================================================================
   Language Switcher Toggle Button
   ================================================================ */
.ffy-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

.ffy-lang-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.ffy-lang-icon {
  font-size: 14px;
  line-height: 1;
}

.ffy-lang-toggle-wrap {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 4px;
}

/* ================================================================
   Pill Navbar — Glassmorphism Floating Header
   ================================================================
   All rules scoped to .ffy-navbar so they never bleed into
   Elementor's own layout or any other site section.
   ================================================================ */

/* ---------------------------------------------------------------
   Navbar wrapper: sits inside .ffy-header (position:absolute)
   and re-flows ALL header children into one pill.
   --------------------------------------------------------------- */
.ffy-navbar {
  /* Fixed floating pill container */
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1200px;
  z-index: 9999;
  box-sizing: border-box;

  /* Glassmorphism pill */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;

  background: rgba(120, 10, 40, 0.78);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  box-shadow:
    0 8px 32px rgba(80, 0, 20, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 0 1px rgba(180, 30, 60, 0.35);

  padding: 0 16px;
  min-height: 52px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    top 0.3s ease;
}

/* Scrolled state for enhanced contrast over light sections */
.ffy-navbar.is-scrolled {
  background: rgba(100, 8, 32, 0.92);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

/* ---------------------------------------------------------------
   Logo inside the pill
   --------------------------------------------------------------- */
.ffy-navbar .ffy-nb-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ffy-navbar .ffy-nb-logo a {
  display: block;
  line-height: 0;
}

.ffy-navbar .ffy-nb-logo img {
  width: auto;
  height: 34px;
  max-width: 110px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* white logo */
}

/* ---------------------------------------------------------------
   Navigation links group
   --------------------------------------------------------------- */
.ffy-navbar .ffy-nb-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  padding: 6px 0;
}

/* Each nav item button — reset Elementor overrides */
.ffy-navbar .ffy-nb-nav .ffy-nav-btn,
.ffy-navbar .ffy-nb-nav .ffy-nb-categories {
  flex-shrink: 0;
}

.ffy-navbar .ffy-nb-nav .elementor-button,
.ffy-navbar .ffy-nb-nav .ffy-nb-cat-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: transparent !important;
  border: none;
  font-family: 'DM Sans', 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  fill: rgba(255, 255, 255, 0.88) !important;
  border-radius: 100px !important;
  padding: 7px 14px !important;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}

/* Active nav item — pill highlight */
.ffy-navbar .ffy-nb-nav .ffy-nav-active .elementor-button {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

/* Hover + focus state for non-active nav items */
.ffy-navbar .ffy-nb-nav .elementor-button:hover,
.ffy-navbar .ffy-nb-nav .elementor-button:focus-visible,
.ffy-navbar .ffy-nb-nav .ffy-nb-cat-btn:hover,
.ffy-navbar .ffy-nb-nav .ffy-nb-cat-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  outline: none;
}

/* ---------------------------------------------------------------
   Categories dropdown
   --------------------------------------------------------------- */
.ffy-nb-categories {
  position: relative;
}

.ffy-nb-cat-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  padding: 7px 14px;
  border-radius: 100px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.ffy-nb-cat-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ffy-nb-cat-chevron {
  display: inline-block;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.25s ease;
  opacity: 0.75;
}

.ffy-nb-categories.is-open .ffy-nb-cat-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.ffy-nb-cat-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  min-width: 180px;
  background: rgba(110, 8, 35, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(80, 0, 20, 0.5);
  padding: 8px 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
}

.ffy-nb-categories.is-open .ffy-nb-cat-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ffy-nb-cat-dropdown a {
  display: block;
  padding: 9px 20px;
  font-family: 'DM Sans', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.ffy-nb-cat-dropdown a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ---------------------------------------------------------------
   Right-side icons group (search, cart, lang)
   --------------------------------------------------------------- */
.ffy-navbar .ffy-nb-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Icon circle buttons (search, cart) */
.ffy-navbar .ffy-nb-actions .elementor-social-icon,
.ffy-navbar .ffy-nb-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  font-size: 14px !important;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}

.ffy-navbar .ffy-nb-actions .elementor-social-icon:hover,
.ffy-navbar .ffy-nb-actions .elementor-social-icon:focus-visible,
.ffy-navbar .ffy-nb-icon-btn:hover,
.ffy-navbar .ffy-nb-icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
  outline: none;
}

.ffy-navbar .ffy-nb-actions .elementor-social-icon i,
.ffy-navbar .ffy-nb-actions .elementor-social-icon svg {
  color: #fff !important;
  fill: #fff !important;
  font-size: 14px;
}

/* Suppress Elementor icon hover overrides inside the navbar */
.ffy-navbar .ffy-nb-actions .elementor-social-icon:hover i,
.ffy-navbar .ffy-nb-actions .elementor-social-icon:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Language switcher — compact pill */
.ffy-navbar .ffy-nb-actions .ffy-lang-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'DM Sans', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 100px !important;
  padding: 0 12px !important;
  height: 36px !important;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  margin: 0 !important;
}

.ffy-navbar .ffy-nb-actions .ffy-lang-toggle:hover,
.ffy-navbar .ffy-nb-actions .ffy-lang-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
  transform: scale(1.04);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  outline: none;
}

/* Language flag + abbreviation */
.ffy-lang-abbr {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ffy-lang-flag {
  font-size: 15px;
  line-height: 1;
}

/* ---------------------------------------------------------------
   Suppress old Elementor-generated header positioning
   inside .ffy-navbar context (avoid double-positioning)
   --------------------------------------------------------------- */
.ffy-navbar .elementor-widget-image,
.ffy-navbar .elementor-widget-button,
.ffy-navbar .elementor-widget-social-icons,
.ffy-navbar .elementor-widget-html {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.ffy-navbar .elementor-widget-button .elementor-button-wrapper {
  display: flex;
  align-items: center;
}

.ffy-navbar .elementor-widget-image .elementor-widget-container {
  line-height: 0;
}

.ffy-navbar .elementor-social-icons-wrapper {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.ffy-navbar .elementor-grid {
  display: flex !important;
  align-items: center;
}

.ffy-navbar .elementor-grid-item {
  display: flex !important;
  align-items: center;
}

/* Hide the screen-only spans visually (they are for a11y only) */
.ffy-navbar .elementor-screen-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Mobile hamburger button (shown ≤767px)
   --------------------------------------------------------------- */
.ffy-nb-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.ffy-nb-hamburger:hover,
.ffy-nb-hamburger:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.ffy-nb-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hamburger → X when menu open */
.ffy-nb-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ffy-nb-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.ffy-nb-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu panel */
.ffy-nb-mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: rgba(110, 8, 35, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  padding: 12px 8px;
  box-shadow: 0 12px 40px rgba(80, 0, 20, 0.6);
  z-index: 300;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.ffy-nb-mobile-menu.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ffy-nb-mobile-menu a {
  display: block;
  padding: 11px 20px;
  font-family: 'DM Sans', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  border-radius: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.ffy-nb-mobile-menu a:hover,
.ffy-nb-mobile-menu a:focus-visible,
.ffy-nb-mobile-menu a.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}

.ffy-nb-mobile-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 6px 12px;
}

/* ---------------------------------------------------------------
   Tablet breakpoint (768px – 1024px)
   --------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .ffy-navbar {
    top: 12px;
    width: calc(100% - 24px);
    padding: 0 12px;
    min-height: 48px;
  }

  .ffy-navbar .ffy-nb-nav .elementor-button,
  .ffy-navbar .ffy-nb-nav .ffy-nb-cat-btn {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  .ffy-navbar .ffy-nb-logo img {
    height: 28px;
  }
}

/* ---------------------------------------------------------------
   Mobile breakpoint (≤767px)
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .ffy-navbar {
    top: 10px;
    width: calc(100% - 20px);
    padding: 0 14px;
    min-height: 46px;
    border-radius: 80px;
  }

  /* Hide desktop nav and actions on mobile */
  .ffy-navbar .ffy-nb-nav,
  .ffy-navbar .ffy-nb-actions {
    display: none;
  }

  /* Show hamburger */
  .ffy-nb-hamburger {
    display: flex;
  }

  .ffy-navbar .ffy-nb-logo img {
    height: 26px;
  }
}

/* ---------------------------------------------------------------
   RTL — layout direction corrections
   (Natural flexbox handles horizontal flow without row-reverse)
   --------------------------------------------------------------- */
[dir="rtl"] .ffy-nb-cat-dropdown {
  inset-inline-start: 0;
  inset-inline-end: auto;
  text-align: right;
}

[dir="rtl"] .ffy-nb-mobile-menu a {
  text-align: right;
}

/* ---------------------------------------------------------------
   Suppress old .ffy-header Elementor absolute positioning of its
   direct children now that .ffy-navbar handles the layout
   --------------------------------------------------------------- */
.ffy-header > .elementor-widget-image,
.ffy-header > .elementor-element-fa28830,
.ffy-header > .elementor-element-b8b87a1 {
  display: none !important;
}


/* ================================================================
   Inner Page Hero Banner — shared by About Us & FAQ
   ================================================================ */
.ffy-page-hero {
  position: relative;
  overflow: hidden;
  padding: 160px 5vw 100px;
  background: linear-gradient(160deg, #1a0008 0%, #3a0016 50%, #220010 100%);
  text-align: center;
}

.ffy-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 60%, rgba(201,0,53,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(139,0,36,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.ffy-page-hero-inner {
  color:#ffffff;
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

/* Floating decorative fruit blobs */
.ffy-page-hero-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: ffy-hero-float 0.8s ease forwards;
}
.ffy-page-hero-deco:nth-child(1) { top: 12%; left: 4%; width: 90px; animation-delay: 0.2s; }
.ffy-page-hero-deco:nth-child(2) { top: 18%; right: 5%; width: 80px; animation-delay: 0.4s; }
.ffy-page-hero-deco:nth-child(3) { bottom: 8%; left: 8%; width: 70px; animation-delay: 0.6s; }
.ffy-page-hero-deco:nth-child(4) { bottom: 14%; right: 7%; width: 60px; animation-delay: 0.5s; }

.ffy-page-hero-deco img {
  width: 100%;
  height: auto;
  animation: ffy-hero-idle 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
}

@keyframes ffy-hero-float {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ffy-hero-idle {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-12px) rotate(3deg); }
}

/* Breadcrumb */
.ffy-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.ffy-breadcrumb a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ffy-breadcrumb a:hover,
.ffy-breadcrumb a:focus-visible {
  /* Fix: was #ff8aaa -- ratio 4.46:1 on #8B0024, 2.68:1 on #C90035 (both FAIL WCAG AA 4.5:1).
     White achieves 5.94:1 against every stop in the hero dark-crimson gradient. */
  color: #ffffff;
  outline: none;
  text-decoration: underline;
}

.ffy-breadcrumb-sep {
  font-size: 11px;
  opacity: 0.4;
}

.ffy-breadcrumb-current {
  color: rgba(255,255,255,0.85);
}

/* Hero label pill */
.ffy-page-hero .ffy-section-label {
  color: #ff8aaa;
  display: block;
  margin-bottom: 18px;
}

/* Hero heading */
.ffy-page-hero-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

/* Hero sub-text */
.ffy-page-hero-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 36px;
}

/* Hero CTA row */
.ffy-page-hero-cta {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Wave divider at bottom of hero */
.ffy-page-hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
}

.ffy-page-hero-wave svg {
  display: block;
  width: 100%;
}

/* ================================================================
   About Page — Sections
   ================================================================ */

/* ---------------------------------------------------------------
   Origin Story Section
   --------------------------------------------------------------- */
.ffy-story {
  background: #fdf8f5;
}

.ffy-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.ffy-story-img-wrap {
  position: relative;
  border-radius: 28px;
  overflow: visible;
}

.ffy-story-img-wrap img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  box-shadow: 0 24px 64px rgba(0,0,0,0.14);
}

.ffy-story-badge {
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  box-shadow: 0 12px 32px rgba(201,0,53,0.45);
  border: 4px solid #fdf8f5;
  z-index: 2;
}

.ffy-story-badge-num {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.ffy-story-badge-txt {
  font-size: 0.6rem;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0 8px;
}

.ffy-story-text {
  padding-left: 16px;
}

.ffy-story-text .ffy-section-body {
  margin-bottom: 20px;
}

.ffy-story-stat-row {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e8e0d8;
  flex-wrap: wrap;
}

.ffy-story-stat {
  text-align: center;
  min-width: 80px;
}

.ffy-story-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #C90035;
  line-height: 1;
}

.ffy-story-stat-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: #7a7a7a;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------
   Values / Craftsmanship Section
   --------------------------------------------------------------- */
.ffy-values {
  background: linear-gradient(160deg, #1a0008 0%, #3a0016 50%, #1a0008 100%);
  color: #fff;
}

.ffy-values-header {
  text-align: center;
  margin-bottom: 64px;
}

.ffy-values .ffy-section-heading {
  color: #fff;
}

.ffy-values .ffy-section-label {
  color: #ff8aaa;
}

.ffy-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ffy-value-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 44px 32px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.ffy-value-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.3);
}

.ffy-value-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  box-shadow: 0 8px 28px rgba(201,0,53,0.45);
  font-size: 2rem;
  color: #fff;
}

.ffy-value-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
}

.ffy-value-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
}

/* ---------------------------------------------------------------
   Milestones / Timeline
   --------------------------------------------------------------- */
.ffy-milestones {
  background: #fff;
}

.ffy-milestones-header {
  text-align: center;
  margin-bottom: 64px;
}

.ffy-milestone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}

/* Connecting line between milestones */
.ffy-milestone-grid::before {
  content: '';
  position: absolute;
  top: 40px;
  left: calc(12.5% + 14px);
  right: calc(12.5% + 14px);
  height: 2px;
  background: linear-gradient(90deg, #C90035 0%, #8B0024 100%);
  opacity: 0.2;
  z-index: 0;
}

.ffy-milestone-card {
  text-align: center;
  position: relative;
  z-index: 1;
}

.ffy-milestone-dot {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(201,0,53,0.35);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  border: 3px solid #fff;
  outline: 2px solid rgba(201,0,53,0.25);
}

.ffy-milestone-year {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C90035;
  margin-bottom: 8px;
}

.ffy-milestone-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.3;
}

.ffy-milestone-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: #6a6a6a;
  line-height: 1.65;
}

/* ---------------------------------------------------------------
   Team Cards
   --------------------------------------------------------------- */
.ffy-team {
  background: #fdf8f5;
}

.ffy-team-header {
  text-align: center;
  margin-bottom: 64px;
}

.ffy-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.ffy-team-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ffy-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.13);
}

.ffy-team-img-wrap {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.ffy-team-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(139,0,36,0.6) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ffy-team-card:hover .ffy-team-img-wrap::after {
  opacity: 1;
}

.ffy-team-avatar {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  font-weight: 700;
  color: #fff;
}

.ffy-team-info {
  padding: 24px 20px 28px;
}

.ffy-team-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}

.ffy-team-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #C90035;
  margin-bottom: 12px;
}

.ffy-team-bio {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: #6a6a6a;
  line-height: 1.65;
}

/* ================================================================
   FAQ Page — Components
   ================================================================ */

/* ---------------------------------------------------------------
   FAQ Category Tabs
   --------------------------------------------------------------- */
.ffy-faq {
  background: #fdf8f5;
}

.ffy-faq-inner {
  max-width: 860px;
  margin: 0 auto;
}

.ffy-faq-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 48px;
}

.ffy-faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 9px 22px;
  border-radius: 50px;
  border: 2px solid #e0d0cc;
  background: transparent;
  color: #5a4a4a;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.ffy-faq-tab:hover,
.ffy-faq-tab:focus-visible,
.ffy-faq-tabs button:hover,
.ffy-faq-tabs button:focus-visible {
  border-color: #C90035;
  color: #ffffff;
  outline: none;
}

.ffy-faq-tab:hover i,
.ffy-faq-tab:hover svg,
.ffy-faq-tab:focus-visible i,
.ffy-faq-tab:focus-visible svg,
.ffy-faq-tabs button:hover i,
.ffy-faq-tabs button:hover svg,
.ffy-faq-tabs button:focus-visible i,
.ffy-faq-tabs button:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

.ffy-faq-tab.is-active {
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(201,0,53,0.35);
}

/* ---------------------------------------------------------------
   FAQ Accordion
   --------------------------------------------------------------- */
.ffy-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ffy-accordion-item {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(200,180,175,0.35);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.ffy-accordion-item.is-open {
  box-shadow: 0 8px 32px rgba(201,0,53,0.12);
  border-color: rgba(201,0,53,0.2);
}

.ffy-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  cursor: pointer;
  user-select: none;
  gap: 16px;
  transition: background 0.2s ease;
}

.ffy-accordion-header:hover {
  background: rgba(201,0,53,0.05);
}

/* Keyboard focus ring for accordion header (tabindex=0 / role=button).
   WCAG 2.4.7: Focus visible. Crimson #C90035 outline on #fff = 5.94:1 (PASS). */
.ffy-accordion-header:focus {
  outline: none;
}
.ffy-accordion-header:focus-visible {
  outline: 2px solid #C90035;
  outline-offset: -2px;
  background: rgba(201,0,53,0.05);
}

.ffy-accordion-item.is-open .ffy-accordion-header {
  background: rgba(201,0,53,0.04);
}

.ffy-accordion-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  flex: 1;
}

.ffy-accordion-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #fdf8f5 0%, #f5ebe5 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C90035;
  font-size: 13px;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1), color 0.3s ease;
  border: 1px solid rgba(201,0,53,0.15);
}

.ffy-accordion-item.is-open .ffy-accordion-icon {
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  color: #fff;
  transform: rotate(180deg);
  border-color: transparent;
}

.ffy-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease;
}

.ffy-accordion-item.is-open .ffy-accordion-body {
  max-height: 600px;
}

.ffy-accordion-body-inner {
  padding: 4px 28px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.8;
}

.ffy-accordion-body-inner p {
  margin: 0 0 14px;
}

.ffy-accordion-body-inner p:last-child {
  margin-bottom: 0;
}

.ffy-accordion-body-inner ul {
  margin: 0 0 14px 20px;
  padding: 0;
}

.ffy-accordion-body-inner ul li {
  margin-bottom: 6px;
}

/* FAQ category grouping — hidden when filtered */
.ffy-faq-group {
  display: contents;
}

.ffy-accordion-item[data-category] {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ffy-accordion-item.is-hidden {
  display: none;
}

/* ---------------------------------------------------------------
   FAQ Support Card
   --------------------------------------------------------------- */
.ffy-faq-support {
  background: linear-gradient(135deg, #C90035 0%, #8B0024 60%, #600019 100%);
  border-radius: 28px;
  padding: 56px 48px;
  text-align: center;
  margin-top: 64px;
  box-shadow: 0 16px 48px rgba(201,0,53,0.3);
  position: relative;
  overflow: hidden;
}

.ffy-faq-support::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ffy-faq-support-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 1.8rem;
  color: #fff;
  position: relative;
}

.ffy-faq-support h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  position: relative;
}

.ffy-faq-support p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  margin: 0 auto 36px;
  max-width: 500px;
  line-height: 1.7;
  position: relative;
}

.ffy-faq-support-btns {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.ffy-btn-white-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}

.ffy-btn-white-outline:hover,
.ffy-btn-white-outline:focus-visible {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  outline: none;
}

.ffy-btn-white-outline:hover i,
.ffy-btn-white-outline:hover svg,
.ffy-btn-white-outline:focus-visible i,
.ffy-btn-white-outline:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

/* FAQ Support Card — Email / Contact Link */
.ffy-faq-support-btns .ffy-btn-white,
.ffy-faq-support .ffy-btn-white,
#ffy-support-email,
#ffy-support-email-ar {
  color: #ffffff;
  background: transparent;
  opacity: 0.92;
  text-decoration: none;
  transition: all 0.25s ease;
}

.ffy-faq-support-btns .ffy-btn-white i,
.ffy-faq-support-btns .ffy-btn-white svg,
.ffy-faq-support .ffy-btn-white i,
.ffy-faq-support .ffy-btn-white svg,
#ffy-support-email i,
#ffy-support-email svg,
#ffy-support-email-ar i,
#ffy-support-email-ar svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
  transition: all 0.25s ease;
}

.ffy-faq-support-btns .ffy-btn-white:hover,
.ffy-faq-support-btns .ffy-btn-white:focus-visible,
.ffy-faq-support .ffy-btn-white:hover,
.ffy-faq-support .ffy-btn-white:focus-visible,
#ffy-support-email:hover,
#ffy-support-email:focus-visible,
#ffy-support-email-ar:hover,
#ffy-support-email-ar:focus-visible {
  color: #ffffff;
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  outline: none;
}

.ffy-faq-support-btns .ffy-btn-white:hover i,
.ffy-faq-support-btns .ffy-btn-white:hover svg,
.ffy-faq-support-btns .ffy-btn-white:focus-visible i,
.ffy-faq-support-btns .ffy-btn-white:focus-visible svg,
.ffy-faq-support .ffy-btn-white:hover i,
.ffy-faq-support .ffy-btn-white:hover svg,
.ffy-faq-support .ffy-btn-white:focus-visible i,
.ffy-faq-support .ffy-btn-white:focus-visible svg,
#ffy-support-email:hover i,
#ffy-support-email:hover svg,
#ffy-support-email:focus-visible i,
#ffy-support-email:focus-visible svg,
#ffy-support-email-ar:hover i,
#ffy-support-email-ar:hover svg,
#ffy-support-email-ar:focus-visible i,
#ffy-support-email-ar:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

/* ================================================================
   About + FAQ Responsive Styles
   ================================================================ */
@media screen and (max-width: 1024px) {
  /* Story */
  .ffy-story-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .ffy-story-text {
    padding-left: 0;
  }
  .ffy-story-img-wrap img {
    height: 380px;
  }

  /* Values */
  .ffy-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Milestones */
  .ffy-milestone-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ffy-milestone-grid::before {
    display: none;
  }

  /* Team */
  .ffy-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  /* Page Hero */
  .ffy-page-hero {
    padding: 140px 6vw 80px;
  }
  .ffy-page-hero-deco:nth-child(1),
  .ffy-page-hero-deco:nth-child(3) {
    display: none;
  }
  .ffy-page-hero-deco:nth-child(2) { width: 60px; }
  .ffy-page-hero-deco:nth-child(4) { width: 50px; }

  /* Story badge */
  .ffy-story-badge {
    width: 100px;
    height: 100px;
    bottom: -20px;
    right: -16px;
  }

  /* Values */
  .ffy-values-grid {
    grid-template-columns: 1fr;
  }

  /* Milestones */
  .ffy-milestone-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Team */
  .ffy-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* FAQ Tabs */
  .ffy-faq-tabs {
    gap: 8px;
  }
  .ffy-faq-tab {
    font-size: 0.78rem;
    padding: 8px 16px;
  }

  /* FAQ Accordion */
  .ffy-accordion-header {
    padding: 18px 20px;
  }
  .ffy-accordion-body-inner {
    padding: 4px 20px 22px;
  }
  .ffy-accordion-title {
    font-size: 1.05rem;
  }

  /* FAQ Support */
  .ffy-faq-support {
    padding: 40px 24px;
  }
  .ffy-faq-support h3 {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 480px) {
  /* Team: single column on small screens */
  .ffy-team-grid {
    grid-template-columns: 1fr;
  }
  .ffy-milestone-grid {
    grid-template-columns: 1fr;
  }
  .ffy-faq-support-btns {
    flex-direction: column;
    align-items: center;
  }
}


/* ================================================================
   Products / Menu Catalog Page
   ================================================================ */

/* ---------------------------------------------------------------
   Catalog Controls Bar (Search + Filter Tabs + Sort)
   --------------------------------------------------------------- */
.ffy-catalog {
  background: #fdf8f5;
}

.ffy-catalog-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}

/* Search Bar */
.ffy-catalog-search-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.ffy-catalog-search {
  width: 100%;
  padding: 14px 22px 14px 52px;
  border-radius: 50px;
  border: 2px solid #e8e0d8;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.ffy-catalog-search::placeholder {
  color: #aaa;
}

.ffy-catalog-search:focus {
  border-color: #C90035;
  box-shadow: 0 0 0 4px rgba(201,0,53,0.08);
}

.ffy-catalog-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 14px;
  pointer-events: none;
  transition: color 0.2s ease;
}

.ffy-catalog-search:focus ~ .ffy-catalog-search-icon,
.ffy-catalog-search-wrap:focus-within .ffy-catalog-search-icon {
  color: #C90035;
}

/* Filter Tabs + Sort Row */
.ffy-catalog-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Tab group */
.ffy-catalog-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ffy-catalog-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 18px;
  border-radius: 50px;
  border: 2px solid #e0d0cc;
  background: transparent;
  color: #5a4a4a;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.ffy-catalog-tab:hover,
.ffy-catalog-tab:focus-visible,
.ffy-catalog-tabs button:hover,
.ffy-catalog-tabs button:focus-visible {
  border-color: #C90035;
  color: #ffffff;
  outline: none;
}

.ffy-catalog-tab:hover i,
.ffy-catalog-tab:hover svg,
.ffy-catalog-tab:focus-visible i,
.ffy-catalog-tab:focus-visible svg,
.ffy-catalog-tabs button:hover i,
.ffy-catalog-tabs button:hover svg,
.ffy-catalog-tabs button:focus-visible i,
.ffy-catalog-tabs button:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

.ffy-catalog-tab.is-active {
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(201,0,53,0.3);
}

/* Sort dropdown */
.ffy-catalog-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ffy-catalog-sort-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #7a7a7a;
  white-space: nowrap;
}

.ffy-catalog-sort {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #e0d0cc;
  border-radius: 50px;
  padding: 7px 36px 7px 16px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C90035' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 0.2s ease;
}

.ffy-catalog-sort:focus {
  border-color: #C90035;
}

/* Results count */
.ffy-catalog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 8px;
}

.ffy-catalog-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: #9a9a9a;
}

.ffy-catalog-count strong {
  color: #1a1a1a;
}

/* ---------------------------------------------------------------
   Product Grid (Catalog page)
   --------------------------------------------------------------- */
.ffy-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* ---------------------------------------------------------------
   Product Card (enhanced from .ffy-flavor-card)
   --------------------------------------------------------------- */
.ffy-product-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1),
              box-shadow 0.35s cubic-bezier(0.25,0.8,0.25,1);
  position: relative;
}

.ffy-product-card.is-hidden {
  display: none;
}

.ffy-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 52px rgba(0,0,0,0.13);
}

/* Card image area */
.ffy-product-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fdf8f5;
}

.ffy-product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ffy-product-card:hover .ffy-product-card-img img {
  transform: scale(1.07);
}

/* Hover overlay CTA */
.ffy-product-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,0,8,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.ffy-product-card:hover .ffy-product-card-overlay {
  opacity: 1;
}

.ffy-product-card-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(201,0,53,0.9);
  border: 2px solid rgba(255,255,255,0.3);
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ffy-product-card-overlay a:hover,
.ffy-product-card-overlay a:focus-visible {
  background: #C90035;
  color: #ffffff;
  transform: scale(1.04);
  outline: none;
}

.ffy-product-card-overlay a:hover i,
.ffy-product-card-overlay a:hover svg,
.ffy-product-card-overlay a:focus-visible i,
.ffy-product-card-overlay a:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

/* Badge tag */
.ffy-product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  border-radius: 50px;
  padding: 5px 13px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  z-index: 2;
  background: #C90035; /* overridden inline per product */
}

/* Card body */
.ffy-product-card-body {
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ffy-product-category-pill {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C90035;
  margin-bottom: 8px;
}

.ffy-product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.2;
}

.ffy-product-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.855rem;
  color: #6a6a6a;
  line-height: 1.65;
  flex: 1;
  margin-bottom: 18px;
}

.ffy-product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ffy-product-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #C90035;
}

/* Empty State */
.ffy-catalog-empty {
  display: none;
  text-align: center;
  padding: 80px 20px;
  grid-column: 1 / -1;
}

.ffy-catalog-empty.is-visible {
  display: block;
}

.ffy-catalog-empty-icon {
  font-size: 3.5rem;
  margin-bottom: 24px;
  opacity: 0.4;
}

.ffy-catalog-empty h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  color: #3a2a2a;
  margin: 0 0 12px;
}

.ffy-catalog-empty p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: #9a9a9a;
  margin: 0 0 28px;
}


/* ================================================================
   Product Detail Page
   ================================================================ */

/* ---------------------------------------------------------------
   Detail Layout — 2-column grid
   --------------------------------------------------------------- */
.ffy-pd {
  background: #fdf8f5;
}

.ffy-pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

/* ---------------------------------------------------------------
   Image Gallery
   --------------------------------------------------------------- */
.ffy-pd-gallery {
  position: sticky;
  top: 100px;
}

.ffy-pd-main-img-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
}

.ffy-pd-main-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.ffy-pd-main-img-wrap img.is-changing {
  opacity: 0;
  transform: scale(0.97);
}

/* Zoom overlay */
.ffy-pd-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}

.ffy-pd-zoom-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.ffy-pd-zoom-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

/* Thumbnail strip */
.ffy-pd-thumb-strip {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.ffy-pd-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  background: #fff;
}

.ffy-pd-thumb:hover {
  border-color: rgba(201,0,53,0.4);
  transform: scale(1.05);
}

.ffy-pd-thumb.is-active {
  border-color: #C90035;
  box-shadow: 0 4px 12px rgba(201,0,53,0.3);
}

.ffy-pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------
   Product Info Panel
   --------------------------------------------------------------- */
.ffy-pd-info {
  padding-top: 8px;
}

.ffy-pd-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.ffy-pd-category {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C90035;
  margin-bottom: 10px;
  display: block;
}

.ffy-pd-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.05;
  margin: 0 0 16px;
}

.ffy-pd-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-style: italic;
  color: #8a7a7a;
  margin-bottom: 20px;
  line-height: 1.5;
}

.ffy-pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e8e0d8;
}

.ffy-pd-price-from {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ffy-pd-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #C90035;
  line-height: 1;
}

.ffy-pd-description {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.94rem;
  color: #4a4a4a;
  line-height: 1.85;
  margin-bottom: 32px;
}

/* Quantity stepper */
.ffy-pd-qty-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ffy-pd-qty-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a4a4a;
  white-space: nowrap;
}

.ffy-pd-qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid #e0d0cc;
  border-radius: 50px;
  overflow: hidden;
}

.ffy-pd-qty-btn {
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #C90035;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.ffy-pd-qty-btn:hover {
  background: #fdf0f2;
}

.ffy-pd-qty-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.ffy-pd-qty-val {
  width: 44px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  border: none;
  outline: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

/* CTA Buttons */
.ffy-pd-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.ffy-pd-add-btn {
  flex: 1;
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  color: #fff;
  border: none;
  box-shadow: 0 6px 22px rgba(201,0,53,0.35);
}

.ffy-pd-add-btn:hover,
.ffy-pd-add-btn:focus-visible,
.ffy-pd-sticky-btn:hover,
.ffy-pd-sticky-btn:focus-visible {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(201,0,53,0.45);
  outline: none;
}

.ffy-pd-add-btn:hover i,
.ffy-pd-add-btn:hover svg,
.ffy-pd-add-btn:focus-visible i,
.ffy-pd-add-btn:focus-visible svg,
.ffy-pd-sticky-btn:hover i,
.ffy-pd-sticky-btn:hover svg,
.ffy-pd-sticky-btn:focus-visible i,
.ffy-pd-sticky-btn:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

.ffy-pd-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 22px;
  border-radius: 50px;
  cursor: pointer;
  border: 2px solid #e0d0cc;
  background: transparent;
  color: #5a4a4a;
  transition: all 0.22s ease;
}

.ffy-pd-save-btn:hover {
  border-color: #C90035;
  color: #C90035;
  background: #fff6f8;
}

/* ---------------------------------------------------------------
   Detail Sections (Ingredients / Allergens / Nutrition)
   --------------------------------------------------------------- */
.ffy-pd-section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e8e0d8;
}

.ffy-pd-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.ffy-pd-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ffy-pd-section-title i {
  color: #C90035;
  font-size: 14px;
}

/* Ingredient pills */
.ffy-pd-ingredients-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ffy-pd-ing-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid #e0d0cc;
  color: #3a2a2a;
}

.ffy-pd-ing-pill i {
  color: #C90035;
  font-size: 10px;
}

/* Allergen tags */
.ffy-pd-allergen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ffy-pd-allergen-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  background: #FFF8E1;
  border: 1px solid #FFD54F;
  color: #7A5500;
}

/* Nutrition table */
.ffy-pd-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.ffy-pd-nutrition-item {
  background: #fff;
  border: 1px solid #e8e0d8;
  border-radius: 14px;
  padding: 16px 10px;
  text-align: center;
}

.ffy-pd-nutrition-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #C90035;
  line-height: 1;
  margin-bottom: 4px;
}

.ffy-pd-nutrition-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* ---------------------------------------------------------------
   Related Products Strip
   --------------------------------------------------------------- */
.ffy-pd-related {
  background: #fff;
}

.ffy-pd-related-header {
  text-align: center;
  margin-bottom: 44px;
}

.ffy-pd-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------------------------------------------------------------
   Mobile Sticky CTA Bar
   --------------------------------------------------------------- */
.ffy-pd-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: #fff;
  border-top: 1px solid #e8e0d8;
  padding: 14px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
}

.ffy-pd-sticky-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #C90035;
}

.ffy-pd-sticky-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 50px;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(201,0,53,0.35);
}

/* ================================================================
   Products & Detail — Responsive
   ================================================================ */
@media screen and (max-width: 1200px) {
  .ffy-pd-layout {
    gap: 48px;
  }
}

@media screen and (max-width: 1024px) {
  /* Catalog grid */
  .ffy-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Detail layout */
  .ffy-pd-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ffy-pd-gallery {
    position: static;
  }

  /* Related: 2 cols */
  .ffy-pd-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Nutrition: wrap */
  .ffy-pd-nutrition-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767px) {
  /* Search + tabs stack */
  .ffy-catalog-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ffy-catalog-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ffy-catalog-tabs::-webkit-scrollbar {
    display: none;
  }

  .ffy-catalog-sort-wrap {
    width: 100%;
  }

  /* Detail */
  .ffy-pd-name {
    font-size: 2rem;
  }

  .ffy-pd-price {
    font-size: 2.1rem;
  }

  .ffy-pd-cta-row {
    flex-direction: column;
  }

  .ffy-pd-add-btn,
  .ffy-pd-save-btn {
    width: 100%;
    justify-content: center;
  }

  /* Sticky CTA on mobile */
  .ffy-pd-sticky-cta {
    display: flex;
  }

  /* Add bottom padding so sticky bar doesn't cover content */
  .ffy-pd {
    padding-bottom: 90px;
  }

  /* Related: 1 col */
  .ffy-pd-related-grid {
    grid-template-columns: 1fr;
  }

  /* Nutrition: 3 cols */
  .ffy-pd-nutrition-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Thumb strip scroll */
  .ffy-pd-thumb-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ffy-pd-thumb-strip::-webkit-scrollbar {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  /* Catalog: 1 col */
  .ffy-catalog-grid {
    grid-template-columns: 1fr;
  }

  /* Nutrition: 2 cols */
  .ffy-pd-nutrition-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   Contact Us Page Styles
   ================================================================ */

.ffy-contact-section {
  background: #fdf8f5;
}

.ffy-contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

/* Contact Form Card */
.ffy-contact-form-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 44px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid #e8e0d8;
}

.ffy-contact-form-header {
  margin-bottom: 32px;
}

.ffy-contact-form-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.15;
}

.ffy-contact-form-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: #7a7a7a;
  line-height: 1.6;
  margin: 0;
}

/* Form Groups & Inputs */
.ffy-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ffy-form-group {
  margin-bottom: 22px;
  position: relative;
}

.ffy-form-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: #3a2a2a;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.ffy-form-label .required {
  color: #C90035;
  margin-left: 2px;
}

.ffy-form-input,
.ffy-form-textarea,
.ffy-form-select {
  width: 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: #1a1a1a;
  background: #ffffff;
  border: 2px solid #e4dad1;
  border-radius: 50px;
  padding: 14px 22px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.ffy-form-textarea {
  border-radius: 20px;
  resize: vertical;
  min-height: 130px;
  padding: 16px 22px;
  line-height: 1.6;
}

.ffy-form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C90035' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 44px;
  cursor: pointer;
}

.ffy-form-input::placeholder,
.ffy-form-textarea::placeholder {
  color: #aaa;
}

.ffy-form-input:focus,
.ffy-form-textarea:focus,
.ffy-form-select:focus {
  border-color: #C90035;
  box-shadow: 0 0 0 4px rgba(201, 0, 53, 0.08);
}

.ffy-form-input.is-invalid,
.ffy-form-textarea.is-invalid,
.ffy-form-select.is-invalid {
  border-color: #d32f2f;
  background-color: #fffaf9;
}

.ffy-form-error {
  display: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: #d32f2f;
  font-weight: 600;
  margin-top: 6px;
  padding-left: 6px;
}

.ffy-form-error.is-visible {
  display: block;
  animation: ffyFadeIn 0.2s ease;
}

@keyframes ffyFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ffy-contact-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 50px;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(201, 0, 53, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: 10px;
}

.ffy-contact-submit:hover,
.ffy-contact-submit:focus-visible {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(201, 0, 53, 0.45);
  outline: none;
}

.ffy-contact-submit:hover i,
.ffy-contact-submit:hover svg,
.ffy-contact-submit:focus-visible i,
.ffy-contact-submit:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

.ffy-contact-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Contact Info Column */
.ffy-contact-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ffy-contact-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px 26px;
  border: 1px solid #e8e0d8;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ffy-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.ffy-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201, 0, 53, 0.08) 0%, rgba(139, 0, 36, 0.14) 100%);
  color: #C90035;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ffy-contact-card-content {
  flex: 1;
}

.ffy-contact-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 4px;
}

.ffy-contact-card-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.5;
}

.ffy-contact-card-text a {
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ffy-contact-card-text a:hover,
.ffy-contact-card-text a:focus-visible {
  color: #C90035;
  outline: none;
  text-decoration: underline;
}

/* Map Card */
.ffy-contact-map-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e8e0d8;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  height: 250px;
  position: relative;
}

.ffy-contact-map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Toast Alert Notification */
.ffy-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 50px;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  transform: translateY(120px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.ffy-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ffy-toast-icon {
  color: #4caf50;
  font-size: 1.2rem;
}


/* ================================================================
   404 Not Found Page Styles
   ================================================================ */

.ffy-404-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fdf8f5;
  padding: 100px 20px 80px;
  position: relative;
  overflow: hidden;
}

.ffy-404-content {
  max-width: 660px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ffy-404-code {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(6rem, 16vw, 11rem);
  font-weight: 700;
  line-height: 0.9;
  background: linear-gradient(135deg, #C90035 0%, #8B0024 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 12px;
  user-select: none;
  letter-spacing: -0.02em;
}

.ffy-404-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  line-height: 1.15;
}

.ffy-404-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: #6a6a6a;
  line-height: 1.7;
  margin: 0 auto 36px;
  max-width: 520px;
}

.ffy-404-search {
  max-width: 440px;
  margin: 0 auto 36px;
}

.ffy-404-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* ================================================================
   Contact & 404 — Responsive Breakpoints
   ================================================================ */

@media screen and (max-width: 1024px) {
  .ffy-contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ffy-contact-form-card {
    padding: 36px 30px;
  }
}

@media screen and (max-width: 767px) {
  .ffy-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ffy-contact-form-card {
    padding: 30px 20px;
    border-radius: 22px;
  }

  .ffy-toast {
    left: 20px;
    right: 20px;
    bottom: 20px;
    justify-content: center;
  }

  .ffy-404-actions {
    flex-direction: column;
    width: 100%;
  }

  .ffy-404-actions .ffy-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ================================================================
   Checklist Page — Tasting Journey Tracker
   ================================================================ */

.ffy-checklist {
  background: #fdf8f5;
  padding: 80px 0 100px;
}

.ffy-checklist-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------
   Progress Bar
   --------------------------------------------------------------- */
.ffy-cl-progress-wrap {
  margin-bottom: 48px;
}

.ffy-cl-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: #6a6a6a;
}

.ffy-cl-stats-count {
  font-weight: 600;
  color: #1a1a1a;
}

.ffy-cl-stats-pct {
  font-weight: 700;
  font-size: 1.1rem;
  color: #C90035;
}

.ffy-cl-progress-bar {
  width: 100%;
  height: 14px;
  background: rgba(201, 0, 53, 0.1);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.ffy-cl-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C90035 0%, #8B0024 100%);
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.ffy-cl-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: ffy-cl-shimmer 2s ease-in-out infinite;
}

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

/* ---------------------------------------------------------------
   Category Filter Tabs (mirrors FAQ tabs pattern)
   --------------------------------------------------------------- */
.ffy-cl-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 4px;
}

.ffy-cl-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6a6a6a;
  background: #fff;
  border: 1.5px solid #e8e0db;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.ffy-cl-tab i {
  font-size: 0.8rem;
  transition: color 0.3s ease;
}

.ffy-cl-tab:hover,
.ffy-cl-tab:focus-visible {
  color: #C90035;
  border-color: rgba(201, 0, 53, 0.35);
  background: rgba(201, 0, 53, 0.04);
  outline: none;
}

.ffy-cl-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #C90035, #8B0024);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(201, 0, 53, 0.3);
}

.ffy-cl-tab.is-active i {
  color: #fff;
}

/* ---------------------------------------------------------------
   Checklist Card — Glassmorphism Category Container
   --------------------------------------------------------------- */
.ffy-cl-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(232, 224, 219, 0.7);
  border-radius: 28px;
  padding: 36px 32px;
  margin-bottom: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ffy-cl-card.is-hidden {
  display: none;
}

.ffy-cl-category-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  cursor: pointer;
  user-select: none;
}

.ffy-cl-category-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, #C90035, #8B0024);
  flex-shrink: 0;
}

.ffy-cl-category-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1a1a1a;
  flex: 1;
  line-height: 1.2;
}

.ffy-cl-category-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: rgba(201, 0, 53, 0.15);
  color: #C90035;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.ffy-cl-category-chevron {
  font-size: 0.75rem;
  color: #999;
  transition: transform 0.3s ease;
}

.ffy-cl-card.is-collapsed .ffy-cl-category-chevron {
  transform: rotate(-90deg);
}

[dir="rtl"] .ffy-cl-card.is-collapsed .ffy-cl-category-chevron {
  transform: rotate(90deg);
}

.ffy-cl-card.is-collapsed .ffy-cl-items {
  display: none;
}

/* ---------------------------------------------------------------
   Checklist Item Row
   --------------------------------------------------------------- */
.ffy-cl-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ffy-cl-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.ffy-cl-item:hover {
  background: rgba(201, 0, 53, 0.03);
  transform: translateY(-1px);
}

.ffy-cl-item:active {
  transform: translateY(0);
}

/* ---------------------------------------------------------------
   Custom Checkbox
   --------------------------------------------------------------- */
.ffy-cl-checkbox-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.ffy-cl-checkbox {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}

.ffy-cl-checkmark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid #d4ccc7;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.ffy-cl-checkmark::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7rem;
  color: #fff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Checked state */
.ffy-cl-item.is-checked .ffy-cl-checkmark {
  background: linear-gradient(135deg, #C90035, #8B0024);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(201, 0, 53, 0.35);
  transform: scale(1.05);
}

.ffy-cl-item.is-checked .ffy-cl-checkmark::after {
  opacity: 1;
  transform: scale(1);
}

/* ---------------------------------------------------------------
   Item Text Content
   --------------------------------------------------------------- */
.ffy-cl-item-content {
  flex: 1;
  min-width: 0;
}

.ffy-cl-item-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  transition: all 0.3s ease;
}

.ffy-cl-item-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: #8a8a8a;
  line-height: 1.4;
  margin-top: 3px;
  transition: all 0.3s ease;
}

/* Checked state text */
.ffy-cl-item.is-checked .ffy-cl-item-title {
  text-decoration: line-through;
  text-decoration-color: rgba(201, 0, 53, 0.4);
  color: #aaa;
}

.ffy-cl-item.is-checked .ffy-cl-item-desc {
  opacity: 0.5;
}

/* Item completion badge */
.ffy-cl-item-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 100px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.1);
}

.ffy-cl-item.is-checked .ffy-cl-item-badge {
  opacity: 1;
  transform: scale(1);
}

/* ---------------------------------------------------------------
   Reset Button
   --------------------------------------------------------------- */
.ffy-cl-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1.5px solid #e8e0db;
}

.ffy-cl-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #C90035;
  background: transparent;
  border: 2px solid #C90035;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ffy-cl-reset-btn:hover,
.ffy-cl-reset-btn:focus-visible {
  background: #C90035;
  color: #fff;
  box-shadow: 0 6px 24px rgba(201, 0, 53, 0.3);
  transform: translateY(-2px);
  outline: none;
}

.ffy-cl-reset-btn:active {
  transform: translateY(0);
}

.ffy-cl-reset-btn i {
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------
   Confetti Celebration (CSS-only particles)
   --------------------------------------------------------------- */
.ffy-cl-celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ffy-cl-celebration.is-active {
  opacity: 1;
}

.ffy-cl-confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  top: -20px;
  animation: ffy-cl-fall 3s ease-in forwards;
}

@keyframes ffy-cl-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.ffy-cl-confetti:nth-child(1) { left: 10%; background: #C90035; animation-delay: 0s; animation-duration: 2.5s; }
.ffy-cl-confetti:nth-child(2) { left: 20%; background: #FFD700; animation-delay: 0.15s; animation-duration: 2.8s; width: 8px; height: 14px; }
.ffy-cl-confetti:nth-child(3) { left: 30%; background: #8B0024; animation-delay: 0.3s; animation-duration: 3s; }
.ffy-cl-confetti:nth-child(4) { left: 40%; background: #FF6B9D; animation-delay: 0.1s; animation-duration: 2.6s; width: 12px; height: 8px; }
.ffy-cl-confetti:nth-child(5) { left: 50%; background: #2E7D32; animation-delay: 0.25s; animation-duration: 3.2s; }
.ffy-cl-confetti:nth-child(6) { left: 60%; background: #C90035; animation-delay: 0.4s; animation-duration: 2.7s; width: 8px; height: 12px; }
.ffy-cl-confetti:nth-child(7) { left: 70%; background: #FFD700; animation-delay: 0.05s; animation-duration: 2.9s; }
.ffy-cl-confetti:nth-child(8) { left: 80%; background: #8B0024; animation-delay: 0.35s; animation-duration: 3.1s; width: 14px; height: 8px; }
.ffy-cl-confetti:nth-child(9) { left: 90%; background: #FF6B9D; animation-delay: 0.2s; animation-duration: 2.4s; }
.ffy-cl-confetti:nth-child(10) { left: 15%; background: #2E7D32; animation-delay: 0.45s; animation-duration: 3.3s; width: 10px; height: 6px; }
.ffy-cl-confetti:nth-child(11) { left: 35%; background: #C90035; animation-delay: 0.12s; animation-duration: 2.5s; }
.ffy-cl-confetti:nth-child(12) { left: 55%; background: #FFD700; animation-delay: 0.38s; animation-duration: 2.8s; width: 6px; height: 12px; }
.ffy-cl-confetti:nth-child(13) { left: 75%; background: #FF6B9D; animation-delay: 0.22s; animation-duration: 3s; }
.ffy-cl-confetti:nth-child(14) { left: 85%; background: #8B0024; animation-delay: 0.08s; animation-duration: 2.6s; width: 12px; height: 10px; }
.ffy-cl-confetti:nth-child(15) { left: 45%; background: #2E7D32; animation-delay: 0.32s; animation-duration: 3.4s; }
.ffy-cl-confetti:nth-child(16) { left: 25%; background: #FFD700; animation-delay: 0.18s; animation-duration: 2.3s; width: 8px; height: 8px; border-radius: 50%; }
.ffy-cl-confetti:nth-child(17) { left: 65%; background: #C90035; animation-delay: 0.28s; animation-duration: 2.9s; border-radius: 50%; }
.ffy-cl-confetti:nth-child(18) { left: 5%; background: #FF6B9D; animation-delay: 0.42s; animation-duration: 3.1s; }
.ffy-cl-confetti:nth-child(19) { left: 95%; background: #8B0024; animation-delay: 0.15s; animation-duration: 2.7s; border-radius: 50%; width: 8px; height: 8px; }
.ffy-cl-confetti:nth-child(20) { left: 48%; background: #2E7D32; animation-delay: 0.5s; animation-duration: 3.5s; width: 6px; height: 10px; }


/* ---------------------------------------------------------------
   Checklist Responsive Breakpoints
   --------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .ffy-cl-card {
    padding: 30px 26px;
  }
}

@media screen and (max-width: 767px) {
  .ffy-checklist {
    padding: 60px 0 80px;
  }

  .ffy-cl-tabs {
    gap: 8px;
  }

  .ffy-cl-tab {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  .ffy-cl-card {
    padding: 24px 18px;
    border-radius: 22px;
    margin-bottom: 20px;
  }

  .ffy-cl-category-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .ffy-cl-category-title {
    font-size: 1.2rem;
  }

  .ffy-cl-item {
    gap: 12px;
    padding: 12px 14px;
  }

  .ffy-cl-checkmark {
    width: 24px;
    height: 24px;
  }

  .ffy-cl-checkmark::after {
    font-size: 0.6rem;
  }

  .ffy-cl-item-title {
    font-size: 0.9rem;
  }

  .ffy-cl-item-desc {
    font-size: 0.78rem;
  }

  .ffy-cl-item-badge {
    display: none;
  }

  .ffy-cl-actions {
    margin-top: 36px;
    padding-top: 28px;
  }
}




/* ================================================================
   RESPONSIVE OVERRIDES v2 - Milk
   Comprehensive fixes across all breakpoints for all 20 pages.
   Appended to main.css - overrides take effect after existing rules.
   ================================================================ */

/* Global Box-Sizing and Overflow Containment */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

#ffy-root,
.elementor,
.elementor.elementor-3089 {
  max-width: 100% !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* Hero Slider Description text fluid scaling fix - 3cqw on 320px = 9.6px unreadable */
@media (max-width: 767px) {
  .elementor-3089 .elementor-element.elementor-element-7701f8b,
  .elementor-3089 .elementor-element.elementor-element-c4938f0,
  .elementor-3089 .elementor-element.elementor-element-e7536d1,
  .elementor-3089 .elementor-element.elementor-element-d20d328 {
    font-size: clamp(13px, 3.8cqw, 16px) !important;
    width: var(--container-widget-width, min(85cqw, 360px)) !important;
    max-width: min(85cqw, 360px) !important;
    --container-widget-width: min(85cqw, 360px) !important;
  }

  /* Hero ingredient d4ba694 - fix hardcoded 267px left offset */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-d4ba694 {
    left: 62% !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-d4ba694 {
    right: 62% !important;
  }

  /* Hero ingredient 36eaaf8 - fix hardcoded 213px left offset */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-36eaaf8 {
    left: 55% !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-36eaaf8 {
    right: 55% !important;
  }

  /* Hero ingredient e46f4f9 - fix hardcoded 213px left offset */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-e46f4f9 {
    left: 55% !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-e46f4f9 {
    right: 55% !important;
  }

  /* Hero ingredient feb1dd5 - fix hardcoded 213px left offset */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-feb1dd5 {
    left: 55% !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-feb1dd5 {
    right: 55% !important;
  }
}

/* Navbar - bump hamburger trigger to 768px (was 767px) */
@media screen and (max-width: 768px) {
  .ffy-navbar .ffy-nb-nav,
  .ffy-navbar .ffy-nb-actions {
    display: none;
  }
  .ffy-nb-hamburger {
    display: flex;
  }
}

@media screen and (min-width: 769px) {
  .ffy-navbar .ffy-nb-nav,
  .ffy-navbar .ffy-nb-actions {
    display: flex;
  }
  .ffy-nb-hamburger {
    display: none;
  }
}

/* Hamburger button - expand hit target to 44x44px minimum */
.ffy-nb-hamburger {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
}

/* Navbar action icon buttons - 44x44px min touch target on mobile */
@media screen and (max-width: 768px) {
  .ffy-navbar .ffy-nb-actions .elementor-social-icon,
  .ffy-navbar .ffy-nb-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .ffy-navbar .ffy-nb-actions .ffy-lang-toggle {
    height: 44px !important;
    min-height: 44px;
  }
}

/* Mobile menu - safe max-height with internal scrolling for short screens */
.ffy-nb-mobile-menu.is-open {
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ffy-nb-mobile-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Buttons - min 44x44px touch targets everywhere */
.ffy-btn,
.ffy-btn-primary,
.ffy-btn-outline,
.ffy-btn-white-outline {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ffy-newsletter .ffy-btn-white {
  min-height: 44px;
}

/* FAQ / Catalog / Checklist tabs - 44px touch target */
.ffy-faq-tab,
.ffy-catalog-tab,
.ffy-cl-tab {
  min-height: 44px;
}

/* Quantity stepper buttons - 44x44px */
.ffy-pd-qty-btn {
  width: 44px !important;
  height: 44px !important;
}

/* Footer social links - 44x44px */
.ffy-footer-social-link {
  width: 44px;
  height: 44px;
}

/* Footer links - 6px vertical padding for easier tapping */
.ffy-footer-links a {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* iOS Safari: Prevent auto-zoom on input focus - font-size >= 16px on mobile */
@media screen and (max-width: 768px) {
  .ffy-form-input,
  .ffy-form-textarea,
  .ffy-form-select,
  .ffy-newsletter-input,
  .ffy-catalog-search,
  #ffy-404-search-input {
    font-size: 16px !important;
  }
}

/* About / Story Badges - fix bleed on small mobile at <= 480px */
@media screen and (max-width: 480px) {
  .ffy-about-badge {
    bottom: 12px !important;
    right: 12px !important;
    width: 80px !important;
    height: 80px !important;
  }
  .ffy-story-badge {
    bottom: 12px !important;
    right: 12px !important;
    width: 90px !important;
    height: 90px !important;
  }
}

/* About stat-row: wrap cleanly on mobile */
.ffy-about-stat-row {
  flex-wrap: wrap;
  gap: 16px;
}

@media screen and (max-width: 480px) {
  .ffy-about-stat-row {
    justify-content: center;
    gap: 12px;
  }
}

/* Inner Page Hero - responsive padding for very small screens */
@media screen and (max-width: 480px) {
  .ffy-page-hero {
    padding: 120px 5vw 60px;
  }
  .ffy-page-hero-heading {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .ffy-page-hero-cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .ffy-page-hero-cta .ffy-btn,
  .ffy-page-hero-cta .ffy-btn-white-outline {
    width: 100%;
    justify-content: center;
  }
}

/* Section inner - max-width containment for large desktops / ultrawide */
.ffy-section-inner {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* Flavor / Feature / Testimonial grids - 2-column on 481-768px tablet */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .ffy-flavors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ffy-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ffy-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Footer - 2-column on tablet range 481-768px */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .ffy-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* Newsletter - full-width button on narrow mobile */
@media screen and (max-width: 640px) {
  .ffy-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
  .ffy-newsletter-input {
    min-width: unset;
    width: 100%;
  }
  .ffy-newsletter .ffy-btn-white {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* Contact submit - min 48px tall on mobile */
@media screen and (max-width: 640px) {
  .ffy-contact-submit {
    min-height: 48px;
  }
}

/* Contact form row - single column on 480px */
@media screen and (max-width: 480px) {
  .ffy-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ffy-contact-form-card {
    padding: 24px 16px;
    border-radius: 18px;
  }
}

/* FAQ Support card - single column buttons on mobile */
@media screen and (max-width: 480px) {
  .ffy-faq-support {
    padding: 36px 20px;
  }
  .ffy-faq-support h3 {
    font-size: 1.45rem;
  }
  .ffy-faq-support-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .ffy-btn-white-outline {
    width: 100%;
    justify-content: center;
  }
}

/* Catalog controls on very small screens */
@media screen and (max-width: 480px) {
  .ffy-catalog-search-wrap {
    max-width: 100%;
  }
  .ffy-catalog-sort {
    font-size: 14px;
    padding: 9px 36px 9px 14px;
  }
}

/* Product detail - nutrition 2-col on 380px and below */
@media screen and (max-width: 380px) {
  .ffy-pd-nutrition-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Sticky CTA bottom safe area - notched phones */
.ffy-pd-sticky-cta {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* Product detail page-bottom clearance for sticky bar */
@media screen and (max-width: 767px) {
  .ffy-pd {
    padding-bottom: max(90px, calc(70px + env(safe-area-inset-bottom)));
  }
}

/* About page - values, milestones, team grid 2-column on 481-768px */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .ffy-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ffy-milestone-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ffy-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ffy-story-stat-row {
    justify-content: space-around;
  }
}

/* Story stat row: wrap + center for single-column layouts */
@media screen and (max-width: 480px) {
  .ffy-story-stat-row {
    justify-content: center;
    gap: 20px;
  }
  .ffy-story-stat {
    min-width: 70px;
  }
}

/* Section padding - tighter on very small screens */
@media screen and (max-width: 480px) {
  .ffy-section {
    padding: 48px 5vw;
  }
  .ffy-newsletter {
    padding: 56px 5vw;
  }
  .ffy-footer {
    padding: 48px 5vw 24px;
  }
  .ffy-section-heading {
    font-size: clamp(1.9rem, 7vw, 2.4rem);
  }
}

/* Hero bowl - constrain on ultrawide monitors */
@media screen and (min-width: 1440px) {
  .elementor-3089 .elementor-element.elementor-element-85fc4e9,
  .elementor-3089 .elementor-element.elementor-element-26f9cbd,
  .elementor-3089 .elementor-element.elementor-element-4b76848,
  .elementor-3089 .elementor-element.elementor-element-54523ec {
    max-width: min(55.5cqw, 75vh) !important;
    width: var(--container-widget-width, min(55.5cqw, 75vh)) !important;
    --container-widget-width: min(55.5cqw, 75vh) !important;
  }
}

/* Checklist - responsive tab scrolling on mobile */
@media screen and (max-width: 480px) {
  .ffy-cl-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ffy-cl-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* 404 page - full-width search on mobile */
@media screen and (max-width: 480px) {
  .ffy-404-search {
    max-width: 100%;
  }
  .ffy-404-section {
    padding: 80px 5vw 60px;
  }
}

/* Navbar compact tablet 769px - 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .ffy-navbar {
    top: 12px;
    width: calc(100% - 24px);
    padding: 0 10px;
    min-height: 48px;
  }
  .ffy-navbar .ffy-nb-nav .elementor-button,
  .ffy-navbar .ffy-nb-nav .ffy-nb-cat-btn {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }
  .ffy-navbar .ffy-nb-logo img {
    height: 26px;
  }
  .ffy-navbar .ffy-nb-actions .elementor-social-icon,
  .ffy-navbar .ffy-nb-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  .ffy-navbar .ffy-nb-actions .ffy-lang-toggle {
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}

/* Accordion header - easier tap on mobile */
@media screen and (max-width: 480px) {
  .ffy-accordion-header {
    padding: 16px;
    gap: 12px;
  }
  .ffy-accordion-title {
    font-size: 1rem;
  }
  .ffy-accordion-body-inner {
    padding: 4px 16px 20px;
  }
}

/* Product card overlay - partially visible on touch devices */
@media (hover: none) and (pointer: coarse) {
  .ffy-product-card-overlay {
    opacity: 0.65;
  }
  .ffy-product-card:hover .ffy-product-card-overlay {
    opacity: 1;
  }
}

/* Team grid - 1-column on 380px and below */
@media screen and (max-width: 380px) {
  .ffy-team-grid {
    grid-template-columns: 1fr !important;
  }
  .ffy-milestone-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Related products - 1-col on 480px */
@media screen and (max-width: 480px) {
  .ffy-pd-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Catalog grid - 2-col on 481-768px tablet */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .ffy-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   END RESPONSIVE OVERRIDES v2
   ================================================================ */

/* ================================================================
   RESPONSIVE OVERRIDES v3 — Milk
   Targeted fixes for issues not fully covered by v1/v2.
   All rules are scoped tightly and placed after previous layers
   so they win the cascade without needing !important where avoidable.
   ================================================================ */

/* ---------------------------------------------------------------
   HERO SLIDER — Replace hard-coded px left/right offsets
   The elementor-page.css @media(max-width:767px) block uses
   `left: 267px` for d4ba694 / e46f4f9 / feb1dd5
   and `left: 213px` for 36eaaf8, causing overflow on ≤480px.
   These overrides win because they appear later in the cascade.
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* d4ba694 — Mint leaf (Milk slide) */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-d4ba694 {
    left: 62cqw !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-d4ba694 {
    right: 62cqw !important;
  }

  /* 36eaaf8 — Blueberry garnish */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-36eaaf8 {
    left: 55cqw !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-36eaaf8 {
    right: 55cqw !important;
  }

  /* e46f4f9 — Chocolate piece (Banana Crush slide) */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-e46f4f9 {
    left: 55cqw !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-e46f4f9 {
    right: 55cqw !important;
  }

  /* feb1dd5 — Mint leaf 2 (Kiwi slide) */
  body:not(.rtl) .elementor-3089 .elementor-element.elementor-element-feb1dd5 {
    left: 55cqw !important;
  }
  body.rtl .elementor-3089 .elementor-element.elementor-element-feb1dd5 {
    right: 55cqw !important;
  }
}

/* ---------------------------------------------------------------
   HERO SLIDER — Clamp product title font-size on mobile
   At 2.6cqw on 320px container, title is only ~8px. Ensure
   it renders at ≥ clamp(1.4rem, 9cqw, 3rem).
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .elementor-3089 .elementor-element.elementor-element-b5d8762 .elementor-heading-title,
  .elementor-3089 .elementor-element.elementor-element-81e8e1b .elementor-heading-title,
  .elementor-3089 .elementor-element.elementor-element-53ca2d0 .elementor-heading-title,
  .elementor-3089 .elementor-element.elementor-element-8a8d15f .elementor-heading-title {
    font-size: clamp(1.6rem, 9cqw, 3rem) !important;
  }
}

/* ---------------------------------------------------------------
   HERO SLIDER — ffy-word decorative text
   white-space: nowrap is fine on desktop but combined with a
   17.5cqw font, on tablet portrait (768px) = 134px text. Add
   overflow:hidden so it clips into the background and never
   causes horizontal scroll.
   --------------------------------------------------------------- */
.ffy-word .elementor-heading-title {
  overflow: hidden;
}

/* ---------------------------------------------------------------
   ABOUT / STORY sections — fluid image heights
   Currently fixed at 480px, which can be too tall or too short.
   Replace with aspect-ratio + min/max constraints so images
   always look great without causing overflow.
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .ffy-about-img-wrap img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    min-height: 240px;
    max-height: 400px;
  }

  .ffy-story-img-wrap img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    min-height: 240px;
    max-height: 400px;
  }
}

@media screen and (max-width: 480px) {
  .ffy-about-img-wrap img {
    min-height: 200px;
    max-height: 320px;
  }

  .ffy-story-img-wrap img {
    min-height: 200px;
    max-height: 320px;
  }
}

/* ---------------------------------------------------------------
   CONTACT PAGE — Map card height fluid on mobile
   Fixed at 250px, which is fine on desktop but can be awkward
   on narrow screens. Allow it to shrink gracefully.
   --------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .ffy-contact-map-card {
    height: 200px;
  }
}

/* ---------------------------------------------------------------
   SMALL TABLET (481px–768px) — Hero about image height
   The tablet breakpoint already stacks the grid 1-column at
   ≤1024px. Keep image height at a sensible max for mid sizes.
   --------------------------------------------------------------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .ffy-about-img-wrap img {
    height: 360px;
  }

  .ffy-story-img-wrap img {
    height: 360px;
  }
}

/* ---------------------------------------------------------------
   VERY SMALL SCREENS (≤ 360px) — Extra padding / font safety
   Ensures the site is usable on 320px devices without any
   horizontal scroll from section containers.
   --------------------------------------------------------------- */
@media screen and (max-width: 360px) {
  .ffy-section {
    padding: 40px 4vw !important;
  }

  .ffy-newsletter {
    padding: 48px 4vw !important;
  }

  .ffy-footer {
    padding: 40px 4vw 20px !important;
  }

  .ffy-contact-form-card {
    padding: 20px 14px !important;
    border-radius: 16px !important;
  }

  .ffy-faq-support {
    padding: 28px 14px !important;
  }

  .ffy-section-heading {
    font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
  }

  /* Navbar — keep logo+hamburger on one line */
  .ffy-navbar {
    padding: 0 10px !important;
    min-height: 44px !important;
  }

  .ffy-navbar .ffy-nb-logo img {
    height: 22px !important;
  }

  /* Footer bottom — stack everything */
  .ffy-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ffy-footer-bottom-links {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ---------------------------------------------------------------
   HERO SLIDER — Description text minimum readable size
   At 3cqw on 320px container the text is 9.6px. Override with
   clamp() to guarantee a legible floor of 13px.
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .elementor-3089 .elementor-element.elementor-element-7701f8b,
  .elementor-3089 .elementor-element.elementor-element-c4938f0,
  .elementor-3089 .elementor-element.elementor-element-e7536d1,
  .elementor-3089 .elementor-element.elementor-element-d20d328 {
    font-size: clamp(13px, 3.8cqw, 16px) !important;
    width: min(85cqw, 360px) !important;
    max-width: min(85cqw, 360px) !important;
    --container-widget-width: min(85cqw, 360px) !important;
  }
}

/* ---------------------------------------------------------------
   HERO SLIDER — Navigation arrows touch target
   Arrow buttons need ≥44px for comfortable mobile tapping.
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .ffy-arrow .elementor-social-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* ---------------------------------------------------------------
   PRODUCT DETAIL — Thumbnail strip fluid on very small screens
   --------------------------------------------------------------- */
@media screen and (max-width: 360px) {
  .ffy-pd-thumb {
    width: 60px;
    height: 60px;
  }
}

/* ---------------------------------------------------------------
   FOOTER — Contact items text wrapping
   On very narrow screens, long email/address strings can overflow.
   --------------------------------------------------------------- */
.ffy-footer-contact-item span {
  word-break: break-word;
  overflow-wrap: break-word;
}

.ffy-footer-contact-item {
  min-width: 0;
}

/* ---------------------------------------------------------------
   TESTIMONIAL QUOTES — prevent long words from overflowing card
   --------------------------------------------------------------- */
.ffy-testimonial-quote {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------------------------------------------------------------
   ACCORDION / FAQ — long question text wrapping
   --------------------------------------------------------------- */
.ffy-accordion-title {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   CHECKLIST — inner padding on 320px screens
   --------------------------------------------------------------- */
@media screen and (max-width: 360px) {
  .ffy-cl-card {
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }

  .ffy-checklist-inner {
    padding: 0 16px;
  }

  .ffy-cl-item {
    padding: 10px 10px;
    gap: 10px;
  }
}

/* ---------------------------------------------------------------
   SMALL TABLET (481px–768px) — Page hero heading
   The hero heading uses clamp(2.8rem, 6vw, 5rem). At 600px
   that is 4.8rem which may still be large. Tighten the scale.
   --------------------------------------------------------------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .ffy-page-hero-heading {
    font-size: clamp(2.4rem, 5vw, 3.5rem);
  }

  .ffy-page-hero {
    padding: 140px 6vw 80px;
  }
}

/* ---------------------------------------------------------------
   SECTION INNER — prevent overflow from content wider than viewport
   --------------------------------------------------------------- */
.ffy-section-inner,
.ffy-footer-inner,
.ffy-faq-inner,
.ffy-checklist-inner {
  box-sizing: border-box;
  overflow: visible;
  min-width: 0;
}

/* ---------------------------------------------------------------
   IMAGES — global safeguard (already set in v2 but reinforce)
   --------------------------------------------------------------- */
img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   FORMS — ensure selects don't overflow on small screens
   --------------------------------------------------------------- */
.ffy-form-select,
.ffy-catalog-sort {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
   PRODUCT CARD FOOTER — allow wrapping on very narrow cards
   --------------------------------------------------------------- */
@media screen and (max-width: 380px) {
  .ffy-flavor-footer,
  .ffy-product-card-footer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .ffy-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
   NAVBAR — ensure brand + hamburger never overflow on 320px
   Use min-width: 0 on flex children to allow shrinking.
   --------------------------------------------------------------- */
.ffy-navbar .ffy-nb-logo {
  min-width: 0;
  flex-shrink: 1;
}

.ffy-navbar .ffy-nb-logo img {
  max-width: 90px;
}

@media screen and (max-width: 360px) {
  .ffy-navbar .ffy-nb-logo img {
    max-width: 70px;
    height: 20px !important;
  }
}

/* ---------------------------------------------------------------
   TABLET NAVBAR (769px–1024px) — ensure actions don't clip
   --------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 900px) {
  /* Hide categories dropdown to save space on narrow tablets */
  .ffy-navbar .ffy-nb-categories {
    display: none;
  }
}

/* ---------------------------------------------------------------
   PRODUCT CATALOG — sort wrapper full-width on 481-768px
   --------------------------------------------------------------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .ffy-catalog-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ffy-catalog-sort-wrap {
    width: 100%;
  }

  .ffy-catalog-sort {
    flex: 1;
  }
}

/* ---------------------------------------------------------------
   LARGE DESKTOP (1440px+) — constrain section widths
   Prevents content from stretching too wide on ultrawide monitors.
   --------------------------------------------------------------- */
@media screen and (min-width: 1440px) {
  .ffy-section-inner,
  .ffy-footer-inner {
    max-width: 1320px;
  }

  .ffy-faq-inner {
    max-width: 900px;
  }

  .ffy-checklist-inner {
    max-width: 960px;
  }
}

/* ---------------------------------------------------------------
   MISC — prevent body from horizontal scrolling due to
   absolute-positioned hero elements (belt-and-suspenders)
   --------------------------------------------------------------- */
.ffy-root,
.ffy-frame,
.elementor-element-0def1b6 {
  overflow: hidden !important;
}

/* ================================================================
   END RESPONSIVE OVERRIDES v3
   ================================================================ */


/* ================================================================
   SPACING & ALIGNMENT OVERHAUL v4 — Milk
   Comprehensive balanced-spacing pass across all pages, sections,
   and breakpoints. Fixes cramped elements, inconsistent gaps,
   button-to-edge proximity, and section-header margin scaling.
   ================================================================ */

/* ---------------------------------------------------------------
   1. PAGE HERO — Bottom breathing room & CTA clearance
   The wave SVG at the bottom is ~72px tall. We increase the
   bottom padding so CTA buttons have proper visual clearance
   above the wave, and add extra room above the breadcrumb.
   --------------------------------------------------------------- */
.ffy-page-hero {
  padding: 168px 5vw 120px;
}

/* The hero inner content gets a bottom margin so it never
   collides with the wave even on varying content heights */
.ffy-page-hero-inner {
  padding-bottom: 8px;
}

/* Hero CTA row — give it more vertical breathing space
   between the description and the wave below */
.ffy-page-hero-cta {
  margin-top: 4px;
}

/* ---------------------------------------------------------------
   2. MISSING BUTTON CLASS — ffy-btn-outline-white
   Used in about.html and about-en.html hero but the style
   was never defined, causing buttons to have no border/color.
   Mirrors the white-outline style used in ffy-faq-support.
   --------------------------------------------------------------- */
.ffy-btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 50px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.65);
}

.ffy-btn-outline-white:hover,
.ffy-btn-outline-white:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  outline: none;
}

.ffy-btn-outline-white:hover i,
.ffy-btn-outline-white:hover svg,
.ffy-btn-outline-white:focus-visible i,
.ffy-btn-outline-white:focus-visible svg {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
}

/* ---------------------------------------------------------------
   3. SECTION HEADERS — margin-bottom scaling
   The fixed 64px bottom margin on all section headers is too
   large on tablet/mobile. Scale it down proportionally.
   --------------------------------------------------------------- */
.ffy-flavors-header,
.ffy-features-header,
.ffy-testimonials-header,
.ffy-values-header,
.ffy-milestones-header,
.ffy-team-header,
.ffy-pd-related-header {
  margin-bottom: 56px;
}

/* ---------------------------------------------------------------
   4. SECTION BODY (description) — top margin under headings
   Add a small predictable gap between .ffy-section-heading and
   the first .ffy-section-body paragraph so they never feel glued.
   --------------------------------------------------------------- */
.ffy-section-heading + .ffy-section-body,
.ffy-section-heading + p.ffy-section-body {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   5. NEWSLETTER SECTION — vertical padding
   At 80px it's noticeably tighter than the 96px sections around
   it. Raise to match section rhythm.
   --------------------------------------------------------------- */
.ffy-newsletter {
  padding-top: 96px;
  padding-bottom: 96px;
}

/* Newsletter description — more space between heading and form */
.ffy-newsletter .ffy-section-body {
  margin-bottom: 44px;
}

/* Newsletter note — ensure it has breathing room below the form */
.ffy-newsletter-note {
  margin-top: 20px;
}

/* ---------------------------------------------------------------
   6. ABOUT / STORY GRID — column gap on desktop
   72px is large; keep it but add breathing room on the text side.
   --------------------------------------------------------------- */
.ffy-about-text,
.ffy-story-text {
  padding-left: 24px;
}

/* Spacing between consecutive body paragraphs in story/about */
.ffy-story-text .ffy-section-body + .ffy-section-body,
.ffy-about-text .ffy-section-body + .ffy-section-body {
  margin-top: 16px;
}

/* Stats row — extra top breathing room */
.ffy-story-stat-row,
.ffy-about-stat-row {
  margin-top: 48px;
  padding-top: 36px;
}

/* ---------------------------------------------------------------
   7. FLAVOR CARDS — bottom margin alignment
   .ffy-flavor-card-body has padding 24px 22px 22px. The desc
   bottom margin already pushes the footer down. Normalise.
   --------------------------------------------------------------- */
.ffy-flavor-card-body {
  padding: 24px 24px 24px;
}

/* ---------------------------------------------------------------
   8. FEATURE CARDS — internal padding balance
   40px top/bottom with 28px sides is slightly cramped on the
   sides. Harmonise.
   --------------------------------------------------------------- */
.ffy-feature-card {
  padding: 44px 32px;
}

/* ---------------------------------------------------------------
   9. TESTIMONIAL CARDS — padding balance
   36px top/bottom with 32px sides is good; add a little bottom.
   --------------------------------------------------------------- */
.ffy-testimonial-card {
  padding: 40px 36px;
}

/* ---------------------------------------------------------------
   10. VALUE CARDS — already good at 44px/32px.
       Add a slight increase to the icon bottom margin for visual
       balance.
   --------------------------------------------------------------- */
.ffy-value-icon {
  margin-bottom: 32px;
}

/* ---------------------------------------------------------------
   11. MILESTONE DOTS — bottom margin
   --------------------------------------------------------------- */
.ffy-milestone-dot {
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------
   12. TEAM CARDS — info padding refinement
   --------------------------------------------------------------- */
.ffy-team-info {
  padding: 28px 22px 32px;
}

/* ---------------------------------------------------------------
   13. FAQ ACCORDION — header/body padding alignment
   --------------------------------------------------------------- */
.ffy-accordion-header {
  padding: 24px 28px;
}

.ffy-accordion-body-inner {
  padding: 0 28px 32px;
}

/* FAQ Tabs — margin-bottom reduction for better proportion */
.ffy-faq-tabs {
  margin-bottom: 44px;
}

/* ---------------------------------------------------------------
   14. FAQ SUPPORT CARD — top margin
   64px from accordion to support card is too much. Reduce.
   --------------------------------------------------------------- */
.ffy-faq-support {
  margin-top: 56px;
}

/* Support card icon — slightly more bottom margin */
.ffy-faq-support-icon {
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------
   15. CATALOG CONTROLS — bottom margin for search bar
   48px is large before the grid. Slightly reduce.
   --------------------------------------------------------------- */
.ffy-catalog-controls {
  margin-bottom: 40px;
}

/* Catalog meta row (results count) — tighten before grid */
.ffy-catalog-meta {
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------
   16. PRODUCT DETAIL — info panel top padding
   8px top padding on info means content starts immediately below
   gallery. Add more visual separation.
   --------------------------------------------------------------- */
.ffy-pd-info {
  padding-top: 16px;
}

/* Product detail section gaps */
.ffy-pd-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
}

/* Product price row */
.ffy-pd-price-row {
  margin-bottom: 32px;
  padding-bottom: 32px;
}

/* ---------------------------------------------------------------
   17. CONTACT FORM CARD — header spacing
   The contact form header should not be too compressed.
   --------------------------------------------------------------- */
.ffy-contact-form-header {
  margin-bottom: 36px;
}

/* Contact layout gap */
.ffy-contact-layout {
  gap: 60px;
}

/* ---------------------------------------------------------------
   18. FOOTER — section padding
   64px top is fine; 32px bottom is a bit tight.
   --------------------------------------------------------------- */
.ffy-footer {
  padding-top: 72px;
  padding-bottom: 40px;
}

/* Footer top grid padding */
.ffy-footer-top {
  padding-bottom: 52px;
}

/* Footer bottom padding-top */
.ffy-footer-bottom {
  padding-top: 32px;
}

/* ---------------------------------------------------------------
   19. 404 PAGE — content padding
   --------------------------------------------------------------- */
.ffy-404-section {
  padding: 120px 5vw 100px;
}

/* ---------------------------------------------------------------
   20. CHECKLIST PAGE — padding
   --------------------------------------------------------------- */
.ffy-checklist {
  padding: 88px 0 112px;
}

/* Progress wrap bottom margin */
.ffy-cl-progress-wrap {
  margin-bottom: 52px;
}

/* ---------------------------------------------------------------
   21. BREADCRUMB — bottom margin (hero)
   --------------------------------------------------------------- */
.ffy-breadcrumb {
  margin-bottom: 28px;
}

/* Hero label pill — bottom margin */
.ffy-page-hero .ffy-section-label {
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------
   22. HERO HEADING — bottom margin
   --------------------------------------------------------------- */
.ffy-page-hero-heading {
  margin-bottom: 28px;
}

/* Hero description — bottom margin before CTA */
.ffy-page-hero-desc {
  margin-bottom: 40px;
}


/* ================================================================
   SPACING OVERHAUL v4 — RESPONSIVE ADJUSTMENTS
   ================================================================ */

/* ---------------------------------------------------------------
   Tablet (769px – 1024px)
   --------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  /* Page hero */
  .ffy-page-hero {
    padding: 148px 5vw 100px;
  }

  /* Newsletter */
  .ffy-newsletter {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  /* Section headers */
  .ffy-flavors-header,
  .ffy-features-header,
  .ffy-testimonials-header,
  .ffy-values-header,
  .ffy-milestones-header,
  .ffy-team-header,
  .ffy-pd-related-header {
    margin-bottom: 48px;
  }

  /* Story / About grids go single column — remove text indent */
  .ffy-about-text,
  .ffy-story-text {
    padding-left: 0;
    padding-right: 0;
  }

  /* Story stat row */
  .ffy-story-stat-row,
  .ffy-about-stat-row {
    margin-top: 40px;
    padding-top: 28px;
  }

  /* Contact layout */
  .ffy-contact-layout {
    gap: 40px;
  }

  /* Footer */
  .ffy-footer {
    padding-top: 60px;
    padding-bottom: 36px;
  }

  /* Accordion header */
  .ffy-accordion-header {
    padding: 22px 24px;
  }

  /* Accordion body */
  .ffy-accordion-body-inner {
    padding: 0 24px 28px;
  }

  /* FAQ support */
  .ffy-faq-support {
    margin-top: 48px;
    padding: 48px 40px;
  }

  /* Catalog controls */
  .ffy-catalog-controls {
    margin-bottom: 36px;
  }

  /* Product info top padding */
  .ffy-pd-info {
    padding-top: 0;
  }

  /* 404 */
  .ffy-404-section {
    padding: 100px 5vw 80px;
  }

  /* Checklist */
  .ffy-checklist {
    padding: 72px 0 96px;
  }
}

/* ---------------------------------------------------------------
   Small Tablet (481px – 768px)
   --------------------------------------------------------------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Page hero */
  .ffy-page-hero {
    padding: 140px 6vw 88px;
  }

  /* Section padding */
  .ffy-section {
    padding: 64px 6vw;
  }

  /* Newsletter */
  .ffy-newsletter {
    padding: 72px 6vw;
  }

  /* Section headers */
  .ffy-flavors-header,
  .ffy-features-header,
  .ffy-testimonials-header,
  .ffy-values-header,
  .ffy-milestones-header,
  .ffy-team-header,
  .ffy-pd-related-header {
    margin-bottom: 44px;
  }

  /* Feature cards */
  .ffy-feature-card {
    padding: 36px 24px;
  }

  /* Value cards */
  .ffy-value-card {
    padding: 36px 24px;
  }

  /* Testimonial cards */
  .ffy-testimonial-card {
    padding: 32px 28px;
  }

  /* Catalog controls */
  .ffy-catalog-controls {
    margin-bottom: 32px;
  }

  /* FAQ */
  .ffy-faq-tabs {
    margin-bottom: 36px;
  }

  .ffy-faq-support {
    margin-top: 44px;
    padding: 40px 32px;
  }

  /* Footer */
  .ffy-footer {
    padding-top: 56px;
    padding-bottom: 32px;
  }

  .ffy-footer-top {
    padding-bottom: 40px;
  }

  /* Checklist */
  .ffy-checklist {
    padding: 64px 0 80px;
  }
}

/* ---------------------------------------------------------------
   Mobile (≤ 767px)
   --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Page hero */
  .ffy-page-hero {
    padding: 136px 6vw 88px;
  }

  .ffy-page-hero-heading {
    margin-bottom: 22px;
  }

  .ffy-page-hero-desc {
    margin-bottom: 32px;
    font-size: 1rem;
  }

  /* Newsletter */
  .ffy-newsletter {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .ffy-newsletter .ffy-section-body {
    margin-bottom: 36px;
  }

  /* Section headers */
  .ffy-flavors-header,
  .ffy-features-header,
  .ffy-testimonials-header,
  .ffy-values-header,
  .ffy-milestones-header,
  .ffy-team-header,
  .ffy-pd-related-header {
    margin-bottom: 36px;
  }

  /* Feature cards */
  .ffy-feature-card {
    padding: 32px 22px;
  }

  /* Value cards */
  .ffy-value-card {
    padding: 36px 24px;
  }

  /* Testimonial cards */
  .ffy-testimonial-card {
    padding: 28px 24px;
    gap: 16px;
  }

  /* Accordion */
  .ffy-accordion-header {
    padding: 20px 22px;
  }

  .ffy-accordion-body-inner {
    padding: 0 22px 26px;
  }

  /* FAQ tabs */
  .ffy-faq-tabs {
    margin-bottom: 32px;
  }

  /* FAQ support */
  .ffy-faq-support {
    margin-top: 40px;
  }

  /* Catalog controls */
  .ffy-catalog-controls {
    margin-bottom: 28px;
  }

  .ffy-catalog-meta {
    margin-bottom: 20px;
  }

  /* Story / About stat row */
  .ffy-story-stat-row,
  .ffy-about-stat-row {
    margin-top: 36px;
    padding-top: 24px;
    gap: 20px;
  }

  /* Contact form card */
  .ffy-contact-form-header {
    margin-bottom: 28px;
  }

  /* Footer */
  .ffy-footer {
    padding-top: 52px;
    padding-bottom: 28px;
  }

  .ffy-footer-top {
    padding-bottom: 36px;
  }

  .ffy-footer-bottom {
    padding-top: 24px;
  }

  /* 404 */
  .ffy-404-section {
    padding: 96px 6vw 72px;
  }

  /* Checklist */
  .ffy-checklist {
    padding: 56px 0 72px;
  }

  .ffy-cl-progress-wrap {
    margin-bottom: 40px;
  }

  /* Breadcrumb */
  .ffy-breadcrumb {
    margin-bottom: 22px;
  }

  /* Team info */
  .ffy-team-info {
    padding: 22px 18px 26px;
  }

  /* Product detail sections */
  .ffy-pd-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }

  .ffy-pd-price-row {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }
}

/* ---------------------------------------------------------------
   Small Mobile (≤ 480px)
   --------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  /* Page hero */
  .ffy-page-hero {
    padding: 124px 5vw 76px;
  }

  .ffy-breadcrumb {
    margin-bottom: 18px;
  }

  .ffy-page-hero .ffy-section-label {
    margin-bottom: 16px;
  }

  .ffy-page-hero-heading {
    margin-bottom: 18px;
  }

  .ffy-page-hero-desc {
    margin-bottom: 28px;
    font-size: 0.95rem;
  }

  /* Newsletter */
  .ffy-newsletter {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .ffy-newsletter .ffy-section-body {
    margin-bottom: 32px;
  }

  /* Section headers */
  .ffy-flavors-header,
  .ffy-features-header,
  .ffy-testimonials-header,
  .ffy-values-header,
  .ffy-milestones-header,
  .ffy-team-header,
  .ffy-pd-related-header {
    margin-bottom: 28px;
  }

  /* Testimonial cards */
  .ffy-testimonial-card {
    padding: 24px 20px;
    gap: 14px;
  }

  /* Flavor cards body */
  .ffy-flavor-card-body {
    padding: 20px 18px 20px;
  }

  /* Feature cards */
  .ffy-feature-card {
    padding: 28px 20px;
  }

  /* Value cards */
  .ffy-value-card {
    padding: 32px 20px;
  }

  /* Accordion */
  .ffy-accordion-header {
    padding: 18px 18px;
  }

  .ffy-accordion-body-inner {
    padding: 0 18px 22px;
  }

  /* FAQ tabs */
  .ffy-faq-tabs {
    margin-bottom: 28px;
  }

  /* FAQ support */
  .ffy-faq-support {
    margin-top: 36px;
  }

  /* Team info */
  .ffy-team-info {
    padding: 18px 16px 22px;
  }

  /* Catalog controls */
  .ffy-catalog-controls {
    margin-bottom: 24px;
  }

  /* Story stat row */
  .ffy-story-stat-row,
  .ffy-about-stat-row {
    margin-top: 28px;
    padding-top: 20px;
  }

  /* Footer */
  .ffy-footer-top {
    padding-bottom: 32px;
  }

  .ffy-footer-bottom {
    padding-top: 20px;
  }

  /* 404 */
  .ffy-404-section {
    padding: 88px 5vw 64px;
  }

  /* Checklist */
  .ffy-checklist {
    padding: 48px 0 64px;
  }

  .ffy-cl-progress-wrap {
    margin-bottom: 36px;
  }

  .ffy-cl-tabs {
    margin-bottom: 32px;
  }

  .ffy-cl-card {
    padding: 24px 18px;
  }

  .ffy-cl-actions {
    margin-top: 40px;
    padding-top: 28px;
  }
}

/* ---------------------------------------------------------------
   RTL mirrors of the spacing overhaul above
   --------------------------------------------------------------- */

/* Page hero RTL */
[dir="rtl"] .ffy-page-hero {
  padding: 168px 5vw 120px;
}

/* Story / About text: flip padding side in RTL */
[dir="rtl"] .ffy-about-text,
[dir="rtl"] .ffy-story-text {
  padding-left: 0;
  padding-right: 24px;
}

/* RTL tablet/mobile: reset text indent */
@media screen and (max-width: 1024px) {
  [dir="rtl"] .ffy-about-text,
  [dir="rtl"] .ffy-story-text {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .ffy-page-hero {
    padding: 148px 5vw 100px;
  }
}

@media screen and (max-width: 767px) {
  [dir="rtl"] .ffy-page-hero {
    padding: 136px 6vw 88px;
  }
  [dir="rtl"] .ffy-page-hero-desc {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  [dir="rtl"] .ffy-page-hero {
    padding: 124px 5vw 76px;
  }
  [dir="rtl"] .ffy-page-hero-desc {
    font-size: 0.95rem;
  }
}

/* RTL btn-outline-white */
[dir="rtl"] .ffy-btn-outline-white {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ================================================================
   END SPACING & ALIGNMENT OVERHAUL v4
   ================================================================ */

/* ================================================================
   SPACING & ALIGNMENT OVERHAUL v5 — GLOBAL AUDIT RESOLUTION
   Addresses:
   1. Hero CTA buttons breathing room above wave (About, FAQ, etc.)
   2. Missing Contact Page Hero typography & badge classes
   3. Product Detail Hero bottom clearance
   4. Card footer breathing room & padding consistency
   5. Vertical rhythm and container edge clearance across all viewports
   ================================================================ */

/* ---------------------------------------------------------------
   1. INNER PAGE HERO — CTA & WAVE CLEARANCE
   Ensures CTA buttons on About Us & FAQ have ample clearance
   above the SVG wave decoration across all device widths.
   --------------------------------------------------------------- */
.ffy-page-hero {
  padding-top: 172px !important;
  padding-bottom: 140px !important;
}

.ffy-page-hero-inner {
  position: relative;
  z-index: 3;
  padding-bottom: 24px;
}

.ffy-page-hero-cta {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 3;
}

.ffy-page-hero-wave {
  pointer-events: none;
  z-index: 1;
}

/* Page heroes without a wave SVG (such as Contact page) */
.ffy-page-hero:not(:has(.ffy-page-hero-wave)) {
  padding-bottom: 96px !important;
}

/* ---------------------------------------------------------------
   2. CONTACT PAGE HERO — MISSING STYLES DEFINITION
   Styles .ffy-page-hero-badge, .ffy-page-hero-title, .ffy-page-hero-sub
   which were previously undefined in the stylesheet.
   --------------------------------------------------------------- */
.ffy-page-hero-badge {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff8aaa;
  margin-bottom: 18px;
}

.ffy-page-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.ffy-page-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

/* RTL overrides for Contact page hero */
[dir="rtl"] .ffy-page-hero-badge {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-page-hero-title {
  font-family: 'Amiri', 'Cormorant Garamond', serif !important;
  letter-spacing: 0 !important;
}

[dir="rtl"] .ffy-page-hero-sub {
  font-family: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif !important;
}

/* ---------------------------------------------------------------
   3. PRODUCT DETAIL HERO — SPACING BALANCE
   When hero contains only breadcrumb + label + heading.
   --------------------------------------------------------------- */
.ffy-page-hero-inner > .ffy-page-hero-heading:last-child {
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------
   4. PRODUCT & FLAVOR CARDS — BODY & FOOTER BREATHING ROOM
   Ensures card contents do not hug the card edges.
   --------------------------------------------------------------- */
.ffy-flavor-card-body,
.ffy-product-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
}

.ffy-flavor-footer,
.ffy-product-card-footer {
  margin-top: 20px;
  align-items: center;
}

/* ---------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS FOR HERO SPACING
   --------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .ffy-page-hero {
    padding-top: 156px !important;
    padding-bottom: 116px !important;
  }

  .ffy-page-hero-inner {
    padding-bottom: 18px;
  }
}

@media screen and (max-width: 767px) {
  .ffy-page-hero {
    padding-top: 140px !important;
    padding-bottom: 100px !important;
  }

  .ffy-page-hero:not(:has(.ffy-page-hero-wave)) {
    padding-bottom: 72px !important;
  }

  .ffy-page-hero-inner {
    padding-bottom: 14px;
  }

  .ffy-page-hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    margin-bottom: 14px;
  }

  .ffy-page-hero-cta .ffy-btn {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  .ffy-page-hero {
    padding-top: 130px !important;
    padding-bottom: 92px !important;
  }

  .ffy-flavor-card-body,
  .ffy-product-card-body {
    padding: 20px 18px 24px;
  }
}

/* ================================================================
   END SPACING & ALIGNMENT OVERHAUL v5
   ================================================================ */