body {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
}

.anton-regular-sub-text {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #000;
}


/* ---------------------------------- */
/*            Navbar                  */
/* ---------------------------------- */
.navbar {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: black;
  margin: 0 12px;
  position: relative;
  padding-bottom: 4px;
  padding-right: 0px;
  display: inline-block; /* shrink clickable area to text width */
  padding: 10px 6px 5px 6px;
  transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover {
  color: #dd6d61;
}

/* Redish underline exactly under text */
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #dd6d61;
  transition: width 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%; /* expands only as wide as the text */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: #dd6d61;
}

.navbar-brand {
  font-weight: bold;
  color: #000;
}
.navbar-brand span {
  color: #dd6d61;
}





/* --------------------------------------------------------- */
/*                        Banner Image                       */
/* --------------------------------------------------------- */
.banner-section {
  /* Image on top of gradient */
  background: 
    url('/images/header-bg-vector.jpg') no-repeat center center,
    linear-gradient(90deg, #f8dede, #eec7e8);
  background-size: cover; /* Make sure the image covers the section */
  padding: 60px 20px;
}

.banner-text h1 {
  font-weight: 900;
  line-height: 0.9;
  transition: transform 0.3s ease;
  display: inline-block;
  filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.15));
}

.banner-text h1:hover {
  transform: scale(1.15);
  animation: bounce 0.6s;
}

.banner-text h1 .highlight,
.banner-text h2 .highlight {
  background: linear-gradient(to right, #be6892, #e8888e);
  -webkit-background-clip: text;  /* Safari/Chrome */
  -webkit-text-fill-color: transparent;
  background-clip: text;          /* Standard */
  color: transparent;             /* fallback */
}

.banner-text h1 .highlight,
.banner-text h2 .highlight {
  color: #e2829c; /* pink highlight */
}

.banner-text p {
  margin-top: 15px;
  font-size: 1rem;
  color: #333;
}

@keyframes bounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.2); }   /* bigger jump */
  50%  { transform: scale(0.9); }   /* deeper dip */
  75%  { transform: scale(1.15); }  /* secondary bounce */
  100% { transform: scale(1.1); }   /* settle slightly bigger */
}

.banner-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}

  /* Default (xs: <576px) */
.banner-text h1 {
  font-size: 3.0rem;
}
.banner-text h2 {
  font-size: 2.0rem;
}

/* sm: ≥576px */
@media (min-width: 576px) {
  .banner-text h1 {
    font-size: 3.5rem;
  }
  .banner-text h2 {
    font-size: 2.0rem;
  }
}
/* md: ≥768px */
@media (min-width: 768px) {
  .banner-text h1 {
    font-size: 2.1rem; /* keep smaller here to avoid overlap */
  }
  .banner-text h2 {
    font-size: 1.3rem;
  }
}
/* lg: ≥992px */
@media (min-width: 992px) {
  .banner-text h1 {
    font-size: 2.9rem;
  }
  .banner-text h2 {
    font-size: 1.9rem;
  }
}
/* xl: ≥1200px */
@media (min-width: 1200px) {
  .banner-text h1 {
    font-size: 3.5rem;
  }
  .banner-text h2 {
    font-size: 2.0rem;
  }
}
/* xxl: ≥1300px */
@media (min-width: 1300px) {
  .banner-text h1 {
    font-size: 3.9rem;
  }
  .banner-text h2 {
    font-size: 2.0rem;
  }
}
/* xxl: ≥1300px */
@media (min-width: 1350px) {
  .banner-text h1 {
    font-size: 4.0rem;
  }
  .banner-text h2 {
    font-size: 2.3rem;
  }
}
/* xxl: ≥1400px */
@media (min-width: 1400px) {
  .banner-text h1 {
    font-size: 4.2rem;
  }
  .banner-text h2 {
    font-size: 2.5rem;
  }
}
/* xxl: ≥1450px */
@media (min-width: 1450px) {
  .banner-text h1 {
    font-size: 4.3rem;
  }
  .banner-text h2 {
    font-size: 2.5rem;
  }
}
/* xxl: ≥1500px */
@media (min-width: 1500px) {
  .banner-text h1 {
    font-size: 4.6rem;
  }
  .banner-text h2 {
    font-size: 3.0rem;
  }
}
/* xxl: ≥1700px */
@media (min-width: 1700px) {
  .banner-text h1 {
    font-size: 5.0rem;
  }
  .banner-text h2 {
    font-size: 3.5rem;
  }
}
/* Move tuna image up slightly */
.tuna-image {
  margin-top: -100px; /* adjust as needed */
}

  /* Move salmon down */
.salmon-image {
  margin-top: 100px; /* adjust as needed */
}

/* On smaller screens, reset so it doesn't look awkward */
@media (max-width: 767px) {
  .tuna-image {
    margin-top: 0;
  }
}


/* --------------------------------------------------------- */
/*                 Quick. Clean. Simple - DONE               */
/* --------------------------------------------------------- */
.quick-clean-simple {
  font-weight: 800;
  /* Responsive font size: min 1.5rem, preferred 6vw, max 3.5rem */
  font-size: clamp(1.5rem, 6vw, 5.5rem);
  background: linear-gradient(to right, #c66aa0, #f28b82);
  background-clip: text;          /* Standard property (works in Firefox) */
  -webkit-background-clip: text;  /* Safari/Chrome/WebKit */
  color: transparent;             /* Firefox */
  -webkit-text-fill-color: transparent; /* Safari/Chrome */
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  line-height: 1.3;
  height: 1.3em;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Typing cursor effect (optional) */
.cursor {
  display: inline-block;
  width: 2px;
  background: #000;
  margin-left: 2px;
  animation: blink 0.7s infinite;
  opacity: 0; /* hidden until typing starts */
  display: inline-block;
}

@keyframes blink {
  50% { opacity: 0; }
}

#typing {
  min-height: 4.5rem; /* reserve enough space for the headline */
  display: inline-block;
  white-space: nowrap; /* prevent wrapping if needed */
}


/* ---------------------------------------------------- */
/*            Generic Button Gradient - DONE            */
/* ---------------------------------------------------- */
.btn-gradient {
  /* Gradient background */
  background: linear-gradient(to right, #e6868e, #b76392);
  color: #fff; /* White text */
  font-weight: 500;

  /* Button sizing & spacing */
  padding: 0.75rem 1.5rem;
  font-size: 1rem;

  /* Border & radius */
  border: 3px solid #fff;  /* 3px white border */
  border-radius: 0.75rem;  /* soft rounded corners */

  /* Shadow & transition */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(to right, #d3737c, #a05182); /* slightly darker */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px); /* lift effect */
  color: #fff;
  border-color: #fff; /* keep border white */
}

.btn-gradient:active {
  background: linear-gradient(to right, #c95e69, #8e4573);
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  border-color: #fff;
}

.btn-gradient:disabled {
  background: linear-gradient(to right, #e6a5aa, #c188ab);
  opacity: 0.65;
  box-shadow: none;
  border-color: #fff;
}

/* ---------------------------------- */
/*         Order Button                */
/* ---------------------------------- */
.order-btn {
  background: linear-gradient(to right, #e6868e, #b76392);
  color: #fff;
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 8px 20px rgba(206,137,182,.25);
}

.order-btn:hover,
.order-btn:focus {
  opacity: .95;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(206,137,182,.35);
  color: #fff;
}

.order-btn:focus-visible {
  outline: 3px solid rgba(183,99,146,.35);
  outline-offset: 2px;
}

.order-btn[disabled] {
  opacity: .8;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}


/* ---------------------------------- */
/*            Testimonials - DONE     */
/* ---------------------------------- */
    .testimonial-card {
      border: 1px solid #ddd;
      border-radius: 0.75rem;
      padding: 1.5rem;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .testimonial-text {
      font-size: 1rem;
      font-weight: 600;
    }
    .testimonial-footer {
      margin-top: auto; /* pushes footer to bottom */
    }
    .testimonial-author {
      font-weight: 600;
    }
    .testimonial-location {
      color: #666;
      font-size: 1.0rem;
    }



  /* ============== Namespaced styles - about-us ============== */
  .about-section {
    --text-main: #141414;
    --text-muted: #4d4d4d;
    --img-radius: 14px;
    --img-shadow: 0 20px 48px rgba(0,0,0,.16);
    color: var(--text-main);
  }

  .about-section .about-title {
    line-height: 1.05;
    font-size: 2.25rem; /* larger than default h1 */
  }

  .about-section .about-copy {
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: .2px;
  }

  .about-section .about-image-wrap img {
    display: block;
    border-radius: var(--img-radius);
    box-shadow: var(--img-shadow);
  }

  /* Responsive type scaling */
  @media (min-width: 768px) {
    .about-section .about-title { font-size: 2.5rem; }
  }
  @media (min-width: 1200px) {
    .about-section .about-title { font-size: 3rem; }
  }

/* ==================================================== */
/*   Hero Image, background wave, pink/purple overlay - home-hero-image  */
/* ==================================================== */
.wave-bg {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.wave-lines {
  position: absolute;
  top: 25%; left: 0; width: 100%; height: 300px;
  z-index: 0; pointer-events: none;
}
.wave-lines path {
  stroke: #fddcde;
  stroke-width: 15;   /* thicker line */
  fill: none;
  opacity: 0.25;      /* faint, blends well */
}
.content-on-top {
  position: relative;
  z-index: 1;
}

/* Layout container */
.hero-image-container {
  position: relative;
  width: 100%;
  overflow: visible;
  display: flex;
  justify-content: center; /* center the wrapper */
}

/* Wrapper width = image + overlay width */
.hero-image-wrap {
  position: relative;
  display: inline-block;   /* shrink-wrap to its own width */
  width: 90%;              /* default: mobile < md = 90% */
  line-height: 0;          /* remove inline gap */
}

/* md and up = 75% */
@media (min-width: 768px) {
  .hero-image-wrap {
    width: 75%;
  }
}

/* The image fills the wrapper width */
#hero-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay matches wrapper exactly */
.hero-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(150, 50, 200, 0); /* transparent by default */
  transition: background-color 0.5s ease-in-out;
  pointer-events: none;
}

/* Hover tint over the same area as the image */
.hero-image-wrap:hover::after {
  background-color: rgba(120, 55, 114, 0.5);
}


  /* ================= Namespaced styles - home-sushi-info ================= */
  .two-minute-section {
    /* tokens */
    --btn-grad-left: #F5928D;
    --btn-grad-right: #CE89B6;
    --icon-size: 56px;
    --icon-shadow: 0 8px 20px rgba(0, 0, 0, .08);
  }

  /* Heading size + rhythm */
  .two-minute-section .heading {
    font-size: 2rem;
    line-height: 1.2;
  }
  .two-minute-section h3 {
    font-size: 1.5rem;
  }

  /* Feature icon “pill” */
  .two-minute-section .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--icon-shadow);
  }
  .two-minute-section .feature-icon img {
    max-width: 70%;
    height: auto;
    display: block;
  }

  /* Right image container */
  .two-minute-section .image-wrap img {
    display: block;
    border-radius: 0; /* change to .5rem if you want rounded corners */
  }

  /* Gradient button */
  .two-minute-section .btn-gradient {
    background-image: linear-gradient(90deg, var(--btn-grad-left), var(--btn-grad-right));
    border: none;
    color: #fff;
    border-radius: 8px; /* less curve */
    box-shadow: 0 8px 22px rgba(206, 137, 182, 0.35);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    text-decoration: none;
    display: inline-block;
  }
  .two-minute-section .btn-gradient:hover,
  .two-minute-section .btn-gradient:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(206, 137, 182, 0.45);
    color: #fff;
  }
  .two-minute-section .btn-gradient:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(206, 137, 182, 0.35);
  }

  /* Responsive tweaks */
  @media (min-width: 768px) {
    .two-minute-section .heading { font-size: 2.5rem; }
    .two-minute-section h3 { font-size: 1.75rem; }
  }
  @media (min-width: 1200px) {
    .two-minute-section .heading { font-size: 2.75rem; }
    .two-minute-section h3 { font-size: 2rem; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .two-minute-section .btn-gradient { transition: none !important; }
  }


  /* ===== Namespaced under - home-find-us ===== */
  .find-us-section {
    --marquee-speed: 30s; /* lower = faster */
    --logo-height: 56px;
    --logo-gap: 3rem;     /* horizontal space between logos */
    --edge-fade: 80px;
    --logo-opacity: 0.9;
    --btn-grad-left: #F5928D;
    --btn-grad-right: #CE89B6;
    --btn-shadow: 0 8px 20px rgba(206, 137, 182, 0.35);
  }

  .find-us-section .logo-marquee-wrapper { padding-top: 2rem; padding-bottom: 2rem; }

  /* Marquee viewport */
  .find-us-section .logo-marquee { overflow: hidden; position: relative; }

  /* Track */
  .find-us-section .marquee-track {
    display: inline-flex;
    flex-wrap: nowrap;                /* never wrap */
    gap: 0;                           /* we'll use margins so width math is exact */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: findus-marquee var(--marquee-speed) linear infinite;
    animation-play-state: paused;     /* start paused; JS will start it */
  }
  .find-us-section .marquee-track.is-animating { animation-play-state: running; }
  .find-us-section .logo-marquee:hover .marquee-track.is-animating { animation-play-state: paused; }

  /* exact pixel loop distance set by JS via --loop */
  @keyframes findus-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--loop) * -1)); }
  }

  /* Each item gets explicit margin so measurement includes spacing */
  .find-us-section .marquee-track > li {
    margin-right: var(--logo-gap);
  }
  .find-us-section .marquee-track > li:last-child {
    margin-right: 0; /* last in a set has no trailing gap; JS clones include proper gap */
  }

  /* Edge fades (desktop only) */
  .find-us-section .logo-marquee .edge {
    position: absolute; top: 0; bottom: 0; width: var(--edge-fade);
    pointer-events: none; z-index: 2;
  }
  .find-us-section .logo-marquee .edge-left  { left: 0;  background: linear-gradient(to right, var(--bs-light), transparent); }
  .find-us-section .logo-marquee .edge-right { right: 0; background: linear-gradient(to left,  var(--bs-light), transparent); }

  /* Logos */
  .find-us-section .logo-marquee img {
    height: var(--logo-height);
    width: auto;
    display: block;
    opacity: var(--logo-opacity);
    transition: transform .2s ease, opacity .2s ease, filter .2s ease;
    filter: grayscale(20%);
  }
  .find-us-section .logo-marquee img:hover {
    transform: scale(1.08);
    opacity: 1;
    filter: grayscale(0%);
  }

  /* CTA button */
  .find-us-section .order-btn {
    background-image: linear-gradient(90deg, var(--btn-grad-left), var(--btn-grad-right));
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: var(--btn-shadow);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    text-decoration: none;
    display: inline-block;
  }
  .find-us-section .order-btn-lg {
    padding: 0.95rem 2.25rem;
    font-size: 1.125rem;
    line-height: 1.2;
    min-width: 220px;
  }
  .find-us-section .order-btn:hover,
  .find-us-section .order-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(206, 137, 182, 0.45);
    color: #fff;
    opacity: 0.98;
  }
  .find-us-section .order-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(206, 137, 182, 0.35);
  }

  /* Responsive tweaks */
  @media (max-width: 575.98px) {
    .find-us-section {
      --logo-height: 44px;
      --logo-gap: 2rem;
      --marquee-speed: 18s; /* faster on mobile */
    }
    .find-us-section .order-btn-lg { width: 100%; max-width: 320px; }
    .find-us-section .logo-marquee-wrapper { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  }
  @media (min-width: 992px) {
    .find-us-section {
      --logo-height: 64px;
      --marquee-speed: 24s;
    }
    .find-us-section .logo-marquee-wrapper { padding-top: 3rem; padding-bottom: 3rem; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .find-us-section .marquee-track { animation: none !important; transform: none !important; }
    .find-us-section .logo-marquee .edge { display: none !important; }
    .find-us-section .order-btn { transition: none !important; }
  }


  /* ================= Namespaced styles home-our-products ================= */
  .our-products-section {
    --img-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    --copy-color: #6c6c6c;

    /* Button color tokens */
    --btn-purple-start: #c48ad3;
    --btn-purple-end:   #8b63b8;
    --btn-salmon-start: #f6a89a;
    --btn-salmon-end:   #f28b79;
    --btn-radius: 8px;
  }

  /* Section title */
  .our-products-section .section-title {
    font-size: 2.25rem; /* bigger than default */
    text-align: left;
  }

  /* Product */
  .our-products-section .product {
    margin: 0;
  }

  .our-products-section .product-name {
    font-weight: 700;
    margin-bottom: .25rem;
  }

  /* Image wrapper */
  .our-products-section .img-wrap {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }

  .our-products-section img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(var(--img-shadow));
    transition: transform .2s ease, filter .2s ease;
  }

  .our-products-section .img-wrap:hover img {
    transform: translateY(-2px);
    filter: drop-shadow(0 22px 48px rgba(0,0,0,.22));
  }

  .our-products-section .product-copy {
    color: var(--copy-color);
    font-weight: 500;
    letter-spacing: .2px;
  }

  /* Gradient buttons */
  .our-products-section .btn-ingredients {
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: var(--btn-radius);
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    text-decoration: none;
  }
  .our-products-section .btn-ingredients:hover,
  .our-products-section .btn-ingredients:focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,.16);
    color: #fff;
  }
  .our-products-section .btn-ingredients:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
  }

  /* Left (purple) */
  .our-products-section .btn-purple {
    background-image: linear-gradient(90deg, var(--btn-purple-start), var(--btn-purple-end));
  }
  /* Right (salmon) */
  .our-products-section .btn-salmon {
    background-image: linear-gradient(90deg, var(--btn-salmon-start), var(--btn-salmon-end));
  }

  /* Responsive adjustments */
  @media (min-width: 768px) {
    .our-products-section .product-copy {
      font-size: 1.05rem;
    }
    .our-products-section .section-title {
      font-size: 2.5rem;
    }
  }
  @media (min-width: 1200px) {
    .our-products-section .section-title {
      font-size: 2.75rem;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .our-products-section .img-wrap:hover img,
    .our-products-section .btn-ingredients {
      transition: none !important;
    }
  }


  /* ============== Namespaced styles home-join-our-community ============== */
  .join-community-section {
    background: linear-gradient(90deg, #f9d3d3, #eed0df);
    --btn-left:#F5928D; --btn-right:#CE89B6; --btn-shadow:0 8px 20px rgba(206,137,182,.35); --border-muted:#b9b5bb;
  }
  .join-community-section .section-title { line-height:1.1; }
  .join-community-section .section-copy { color:#4d4d4d; max-width:38ch; font-weight:600; }

  .join-community-section .subscribe-form { max-width:520px; }
  .join-community-section .jc-input {
    background:transparent; border:none; border-bottom:2px solid var(--border-muted);
    border-radius:0; padding-left:0; padding-right:0; box-shadow:none; width:100%; max-width:360px;
  }
  .join-community-section .jc-input:focus { outline:none; box-shadow:none; border-bottom-color:#9c6ea9; }
  .join-community-section .jc-input::placeholder { color:#a5a1a8; }

  .join-community-section .jc-submit {
    background-image:linear-gradient(90deg,var(--btn-left),var(--btn-right));
    color:#fff; border:none; border-radius:8px; width:52px; height:40px; line-height:1; font-size:1.1rem;
    box-shadow:var(--btn-shadow); display:inline-flex; align-items:center; justify-content:center;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .join-community-section .jc-submit:hover, .join-community-section .jc-submit:focus {
    transform:translateY(-2px); box-shadow:0 12px 28px rgba(206,137,182,.45); color:#fff;
  }
  .join-community-section .jc-submit:active { transform:translateY(0); box-shadow:0 6px 16px rgba(206,137,182,.35); }

  /* Honeypot (hidden off-screen but present in DOM) */
  .join-community-section .hp-wrap { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
  .join-community-section .hp-field { opacity:0; height:0; width:0; border:0; padding:0; margin:0; }

  @media (min-width:768px){ .join-community-section .section-title{ font-size:2.75rem; } }
  @media (min-width:992px){ .join-community-section .section-title{ font-size:3rem; } .join-community-section .section-copy{ font-size:1.05rem; } }
  @media (max-width:575.98px){ .join-community-section .jc-submit{ width:56px; height:44px; } }
  @media (prefers-reduced-motion:reduce){ .join-community-section .jc-submit{ transition:none !important; } }

/* Ensure navbar collapses on mobile */
@media (max-width: 991px) {
  .navbar-collapse {
    display: none;
  }
  .navbar-collapse.show {
    display: block;
  }
}

/* home-select-your-flavour */
/* Make the stage anchor clickable without changing appearance */
.flavour-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.flavour-link:focus-visible {
  outline: 3px solid rgba(0,0,0,.2);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ===========================
   DESKTOP/TABLET (md+) styles
=========================== */
#select-flavour.flavour-section{
  padding-top: 4rem;
  padding-bottom: 1rem;
  min-height: 420px;
  position: relative;
}
#select-flavour .flavour-text-col { margin-top: -1.5rem; }
#select-flavour .flavour-image-col { margin-top: 1.5rem; }
#select-flavour h2{
  font-size: 3.5rem;
  line-height: 1.2;
}
#select-flavour .flavour-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition: opacity .45s ease;
}
#select-flavour .flavour-bg.active{ opacity:1; }
#select-flavour .bg-salmon{ background: linear-gradient(90deg, #ffffff 0%, #f8adab 100%); }
#select-flavour .bg-tuna  { background: linear-gradient(90deg, #ffffff 0%, #b9749f 100%); }

/* Buttons (shared with mobile) */
#select-flavour .flavour-btn,
#select-flavour-mobile .flavour-btn{
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 2px solid #fff;
  color: #fff !important;
  transition: background .25s ease, opacity .25s ease, transform .15s ease;
  cursor: pointer;
}
#select-flavour .flavour-btn:focus-visible,
#select-flavour-mobile .flavour-btn:focus-visible {
  outline: 3px solid rgba(255,255,255,.5);
  outline-offset: 2px;
}
.flavour-btn-tuna{ background:#b279ad; opacity:.85; }
.flavour-btn-tuna:hover{ background:#a1659a; opacity:1; transform:translateY(-1px); }
.flavour-btn-tuna.active{ background:#8d3f83; opacity:1; }

.flavour-btn-salmon{ background:#f6a5a2; opacity:.85; }
.flavour-btn-salmon:hover{ background:#ef8f8c; opacity:1; transform:translateY(-1px); }
.flavour-btn-salmon.active{ background:#e6868e; opacity:1; }

/* Desktop stage */
#select-flavour .flavour-stage{
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 4/3;
  z-index: 1;
}
#select-flavour .flavour-img{
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; object-fit: contain;
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    left .55s cubic-bezier(.2,.7,.2,1),
    top .55s cubic-bezier(.2,.7,.2,1),
    opacity .35s ease;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
}
#select-flavour .is-front{ z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
#select-flavour .is-back-right{ z-index: 2; left: 66%; top: 44%; transform: translate(-50%, -50%) scale(.84) rotate(4deg); opacity: .95; }
#select-flavour .pocket-tuna,
#select-flavour .pocket-salmon{ z-index: 1; left: -2%; top: 44%; transform: translate(-50%, -50%) scale(.7) rotate(-4deg); opacity: .9; }
#select-flavour .d-none{ display:none !important; }

/* =====================
   MOBILE (sm) styles
===================== */
#select-flavour-mobile.flavour-section-mobile{
  padding-top: 2rem;
  padding-bottom: 1rem;
  min-height: 360px;
  position: relative;
}
#select-flavour-mobile h2{
  font-size: 2.4rem;
  line-height: 1.3;
}
#select-flavour-mobile .flavour-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition: opacity .35s ease;
}
#select-flavour-mobile .flavour-bg.active{ opacity:1; }
#select-flavour-mobile .bg-salmon{ background: linear-gradient(90deg, #ffffff 0%, #f8adab 100%); }
#select-flavour-mobile .bg-tuna  { background: linear-gradient(90deg, #ffffff 0%, #b9749f 100%); }

#select-flavour-mobile .flavour-stage-mobile{ position: relative; }
#select-flavour-mobile .front-img{
  position: relative;
  z-index: 2;
  max-width: 85%;
  margin: 0 auto;
}
#select-flavour-mobile .pocket-img{
  position: absolute;
  z-index: 1;
  left: 10%; top: 55%;
  transform: translate(-50%, -50%) scale(.65) rotate(-4deg);
  opacity: .85;
}

  /* ============ Namespaced styles for Our Products products-salmon-teriyaki/tuna-mayo ============ */
  /* Main images: no CSS border/radius (borders are in the files) */
  .our-products-section .main-product-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    display: block;
  }

  /* Cross-fade overlay image */
  .our-products-section .swap-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .38s ease;
    z-index: 2;
    pointer-events: none;
  }
  .our-products-section .swap-overlay.show {
    opacity: 1;
  }

  /* Glow wrapper */
  .our-products-section .image-hero {
    position: relative;
    display: inline-block;
  }
  .our-products-section .image-hero::before {
    content: "";
    position: absolute;
    inset: -60px;
    z-index: 0;
    filter: blur(42px);
    opacity: 1;
    pointer-events: none;
    border-radius: 24px;
  }
  /* Darker glows */
  .our-products-section .blob--tuna::before {
    background:
      radial-gradient(60% 60% at 35% 40%,
        rgba(162, 76, 157, 0.5) 0%,
        rgba(216, 163, 210, 0.5) 35%,
        rgba(255, 255, 255, 0) 70%);
  }
  .our-products-section .blob--salmon::before {
    background:
      radial-gradient(60% 60% at 35% 40%,
        rgba(239, 143, 131, 0.5) 0%,
        rgba(246, 205, 215, 0.5) 35%,
        rgba(255, 255, 255, 0) 70%);
  }

  /* Thumbnails: no CSS border/radius (borders are in the files) */
  .our-products-section .product-thumb {
    width: 65px;
    height: 65px;
    object-fit: cover;
    cursor: pointer;
    transition: transform .2s;
    display: block;
  }
  .our-products-section .product-thumb:hover { transform: scale(1.05); }

  /* Headings + button */
  .our-products-section .text-tuna { color: #a24c9d; }
  .our-products-section .text-salmon { color: #ef8f83; }

  .our-products-section .order-btn {
    background: linear-gradient(to right, #e6868e, #b76392);
    color: #fff;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    display: inline-block;
  }
  .our-products-section .order-btn:hover { opacity: 0.9; }

  /* On mobile: 80% width + centered */
  @media (max-width: 767.98px) {
    .our-products-section .order-btn {
      width: 80%;
      margin: 0 auto;
      display: block;
    }
  }

  /* ===== Namespaced Privacy styles - privacy-policy ===== */
  .privacy-section {
    --text-main: #222;
    --text-muted: #555;
    --rule: #e6e6e6;
    color: var(--text-main);
  }

  .privacy-section .privacy-content p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
  }

  .privacy-section .privacy-content ul {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
  }

  .privacy-section .privacy-content ul li {
    margin-bottom: .3rem;
  }

  .privacy-section .privacy-content h5 {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  /* Keep content width readable */
  @media (min-width: 992px) {
    .privacy-section .container {
      max-width: 900px;
    }
  }

  /* ================= Namespaced styles - order-online ================= */
  .order-online-section {
    --card-bg: #f4f4f4;
    --card-border: #d9d9d9;
    --title-tuna: #b07bb5;
    --title-salmon: #ef9f95;
    --pill-bg: #ffffff;
    --pill-border: #e5e5e5;
    --pill-shadow: 0 2px 6px rgba(0,0,0,.08);
    --logo-size: 40px; /* bumped up */
  }

  .order-online-section .product-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
  }
  .order-online-section .product-card .product-imgwrap {
    background: #fff;
    border: 1px solid var(--card-border);
  }
  .order-online-section .product-tuna .product-title { color: var(--title-tuna); }
  .order-online-section .product-salmon .product-title { color: var(--title-salmon); }

  .order-online-section .retailer {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
  }

  .order-online-section .retailer-logo {
    height: var(--logo-size);
    width: auto;
    display: block;
  }

  .order-online-section .order-pill {
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    border-radius: 999px;
    color: #111;
    font-weight: 600;
    padding: .375rem 1rem;
    box-shadow: var(--pill-shadow);
    line-height: 1.2;
  }
  .order-online-section .order-pill:hover,
  .order-online-section .order-pill:focus {
    color: #111;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    transform: translateY(-1px);
  }
  .order-online-section .order-pill:active {
    transform: translateY(0);
    box-shadow: var(--pill-shadow);
  }

  /* ===== Namespaced Newsletter styles - newsletter-signup ===== */
  .newsletter-section {
    --text-main: #222;
    color: var(--text-main);
  }

  /* Keep content width readable, same as FAQ & Privacy */
  @media (min-width: 992px) {
    .newsletter-section .container {
      max-width: 900px;
    }
  }

/* ---------- Background and card  - subscribe-newsletter-signup ---------- */
.subscribe-page { position: relative; overflow: hidden; }
.subscribe-page .subscribe-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(245,146,141,.35) 0%, rgba(245,146,141,0) 60%),
    radial-gradient(60% 60% at 85% 80%, rgba(206,137,182,.35) 0%, rgba(206,137,182,0) 60%),
    linear-gradient(90deg, #f9d3d3, #eed0df);
  filter: blur(0.5px);
}
.subscribe-page .hero-card {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* Wider container on large screens */
.container--max { max-width: 900px; }
@media (min-width: 1200px) { .container--max { max-width: 1100px; } }
@media (min-width: 1400px) { .container--max { max-width: 1200px; } }

/* ---------- Headline bits ---------- */
.emoji-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* Disable/working state */
.subscribe-btn[disabled] {
  opacity: .8; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

/* ---------- Input group styling ---------- */
.subscribe-page .form-control::placeholder { color: #9a96a0; }
.subscribe-page .input-group-lg .input-group-text { font-size: 1.25rem; }

/* On ≥992px (lg+): adjust sizes to avoid clipping */
@media (min-width: 992px) {
  .subscribe-page .input-group-lg > .form-control,
  .subscribe-page .input-group-lg > .input-group-text,
  .subscribe-page .input-group-lg > .btn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: 1rem !important;
    border-radius: .375rem !important;
    line-height: 1.5;
  }
  .subscribe-page .input-group-lg > .form-control {
    border: 1px solid transparent !important;
  }
  .subscribe-page .input-group-lg .input-group-text {
    font-size: 1rem !important;
  }
}

/* Honeypot */
.hp-wrap { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.hp-field { opacity:0; height:0; width:0; border:0; padding:0; margin:0; }

/* Success icon */
.subscribe-page .check-icon {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: #28a745; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; margin-top: .2rem;
}

/* Focus visibility */
.subscribe-page .order-btn:focus-visible { outline: 3px solid rgba(183,99,146,.35); outline-offset: 2px; }

/* Confetti canvas overlay */
.confetti-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 1; transition: opacity .5s ease; }

/* Mobile tweaks */
@media (max-width: 767.98px) {
  .order-btn { width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .order-btn { transition: none !important; }
}

/* ---------- Background + card (mirrors subscribe page) - unsubscribe-newsletter-signup ---------- */
.unsubscribe-page { position: relative; overflow: hidden; }
.unsubscribe-page .unsubscribe-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(245,146,141,.35) 0%, rgba(245,146,141,0) 60%),
    radial-gradient(60% 60% at 85% 80%, rgba(206,137,182,.35) 0%, rgba(206,137,182,0) 60%),
    linear-gradient(90deg, #f9d3d3, #eed0df);
  filter: blur(0.5px);
}
.unsubscribe-page .hero-card {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* Headline emoji */
.unsubscribe-page .emoji { font-size: 1.9rem; line-height: 1; }

/* Buttons (match Deliver to Me / subscribe) */
.unsubscribe-page .order-btn {
  background: linear-gradient(to right, #e6868e, #b76392);
  color: #fff;
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 8px 20px rgba(206,137,182,.25);
}
.unsubscribe-page .order-btn:hover,
.unsubscribe-page .order-btn:focus {
  opacity: .95;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(206,137,182,.35);
  color: #fff;
}

/* Working state */
.unsubscribe-page .unsubscribe-btn[disabled] {
  opacity: .8; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

/* Input group styling */
.unsubscribe-page .form-control::placeholder { color: #9a96a0; }
.unsubscribe-page .input-group-lg .input-group-text { font-size: 1.25rem; }

/* On ≥992px (lg+): make the "lg" input group revert to base size (prevents clipping like on subscribe) */
@media (min-width: 992px) {
  .unsubscribe-page .input-group-lg > .form-control,
  .unsubscribe-page .input-group-lg > .input-group-text,
  .unsubscribe-page .input-group-lg > .btn {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: 1rem !important;
    border-radius: .375rem !important;
    line-height: 1.5;
  }
  .unsubscribe-page .input-group-lg > .form-control {
    border: 1px solid transparent !important;
  }
  .unsubscribe-page .input-group-lg .input-group-text {
    font-size: 1rem !important;
  }
}


/* Success icon */
.unsubscribe-page .check-icon {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: #28a745; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; margin-top: .2rem;
}

/* Focus visibility */
.unsubscribe-page .order-btn:focus-visible { outline: 3px solid rgba(183,99,146,.35); outline-offset: 2px; }

/* Mobile tweaks */
@media (max-width: 767.98px) { .unsubscribe-page .order-btn { width: 100%; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .unsubscribe-page .order-btn { transition: none !important; } }

/* ===============================
   Sushi Pocket Contest Announcement - eg ig-contest
   =============================== */
.sp-announcement {
  --sp-announce-bg: linear-gradient(135deg, #f9d3d3, #eed0df);
  --sp-announce-radius: 20px;
  --sp-announce-shadow: 0 8px 24px rgba(0,0,0,0.1);
  --sp-announce-font: "Gordita", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --sp-announce-accent: #C89361;
  font-family: var(--sp-announce-font);
  margin: 2rem auto;
  max-width: 900px;
  padding: 1rem;
}

.sp-announcement .sp-announcement-card {
  background: var(--sp-announce-bg);
  border-radius: var(--sp-announce-radius);
  box-shadow: var(--sp-announce-shadow);
  padding: 2rem;
  color: #222;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sp-announcement h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.sp-announcement p {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
}

.sp-announcement ol {
  text-align: left;
  margin: 1.25rem auto;
  padding-left: 1.2rem;
  max-width: 600px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.sp-announcement ol li {
  margin-bottom: 0.75rem;
}

.sp-announcement a {
  color: #b76392;
  font-weight: 600;
  text-decoration: none;
}
.sp-announcement a:hover {
  text-decoration: underline;
}

.sp-announcement .sp-announce-footer {
  margin-top: 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--sp-announce-accent);
}

  /* ================= Namespaced styles - home-your-2-min-sushi-fix ================= */

 

  /* Responsive tweaks */
  @media (min-width: 768px) {
    .two-minute-section .heading { font-size: 2.5rem; }
  }
  @media (min-width: 1200px) {
    .two-minute-section .heading { font-size: 2.75rem; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .two-minute-section .btn-gradient { transition: none !important; }
  }


/* Disable/working state */
.contact-submit-btn[disabled] {
  opacity: .8; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

/* Success icon */
.check-icon {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: #28a745; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; margin-top: .2rem;
}

/* Mobile tweaks */
@media (max-width: 767.98px) {
  .order-btn { width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .order-btn { transition: none !important; }
}

  /* ===== Namespaced FAQ styles - faq ===== */
  .faq-section {
    --faq-text: #222;
    --faq-muted: #5b5b5b;
    --faq-rule: #e6e6e6;
    color: var(--faq-text);
  }

  .faq-section .faq-list {
    margin: 0;
  }

  .faq-section .faq-group-title {
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    color: #111;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--faq-rule);
    padding-bottom: .5rem;
  }

  .faq-section .faq-item {
    padding: 1.25rem 0;
  }

  .faq-section .faq-q {
    margin: 0 0 .5rem 0;
    line-height: 1.25;
  }

  .faq-section .faq-a {
    margin: 0;
    color: var(--faq-muted);
    font-size: 1.05rem;
  }

  .faq-section hr {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--faq-rule);
    opacity: 1;
  }

  .faq-section ul {
    margin-bottom: .5rem;
  }

  /* Readability on larger screens */
  @media (min-width: 992px) {
    .faq-section .container {
      max-width: 900px; /* keeps readable line length */
    }
  }

  /* Respect reduced motion (no animations here, reserved for future) */
  @media (prefers-reduced-motion: reduce) { }

  /* ================= Namespaced styles - find-in-store ================= */
  .find-in-store-section {
    --card-bg: #efefef;
    --card-bg-hover: #e4e4e4;
    --card-radius: 14px;
    --card-border: #e1e1e1;
    --cta-bg: #fff;
    --cta-border: #e7e7e7;
    --cta-shadow: 0 3px 12px rgba(0,0,0,.08);
    --logo-h: 44px;
  }

  .find-in-store-section .store-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 1.25rem 1.5rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .find-in-store-section .store-card:hover {
    background: var(--card-bg-hover);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }

  .find-in-store-section .store-logo {
    height: var(--logo-h);
    width: auto;
    display: block;
  }

  .find-in-store-section .store-cta {
    background: var(--cta-bg);
    border: 1px solid var(--cta-border);
    border-radius: 12px;
    padding: .65rem 1.2rem;
    box-shadow: var(--cta-shadow);
    color: #111;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .find-in-store-section .store-cta:hover,
  .find-in-store-section .store-cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    color: #111;
  }
  .find-in-store-section .store-cta:active {
    transform: translateY(0);
    box-shadow: var(--cta-shadow);
  }

  @media (max-width: 767.98px) {
    .find-in-store-section .store-card {
      text-align: center;
    }
  }

  /* ============== Namespaced styles - find-us-in-store ============== */
  .find-store-section {
    background: linear-gradient(90deg, #f9d3d3, #eed0df);
  }

  /* Gradient button */
  .find-store-section .btn-store {
    background-image: linear-gradient(90deg, #F5928D, #CE89B6);
    border: 2px solid #fff; /* white border */
    border-radius: 10px;
    color: #fff;
    font-size: 1.05rem;
    padding: 0.75rem 2rem; /* balanced padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-block;
  }
  .find-store-section .btn-store:hover,
  .find-store-section .btn-store:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    color: #fff;
  }
  .find-store-section .btn-store:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }

  /* Mobile tweaks: make button text larger */
  @media (max-width: 575.98px) {
    .find-store-section .btn-store {
      font-size: 1.2rem;   /* larger text for mobile */
      padding: 0.9rem 2.2rem; /* slightly bigger tap target */
    }
  }